/* Lymecode: variáveis do design system (tema claro). Mesmos valores de site-design/lymecode-vars.css e design-system/tokens.json. */
:root {
  --lima: #c9f24b; --tinta: #16181b; --gelo: #eef2ef;
  --bg: #f9faf9; --surface: #fdfdfd; --surface-2: #f4f7f5;
  --fg: #16181b; --muted: #424547; --line: #c7cbc9; --line-strong: #8a8e8e;
  --accent: #c9f24b; --on-accent: #16181b; --accent-hover: #b1d449;
  --accent-ink: #455230; --accent-soft: #f2fcdf; --deep: #16181b;
  --ok: #20754a; --ok-soft: #e1ebe4; --warn: #a64e13; --warn-soft: #f3e6df;
  --bad: #b42318; --bad-soft: #f7e2df; --info: #2459a8; --info-soft: #dfe7f3;
  /* tons do tema escuro usados nas seções de fundo tinta */
  --dark-fg: #f0f4f1; --dark-muted: #9da09f; --dark-surface: #2f3134; --dark-line: #313336; --dark-line-strong: #636667;
  --font-display: "Manrope", system-ui, "Segoe UI", sans-serif;
  --font-destaque: "Special Gothic Expanded One", "Manrope", sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-sm: 2px; --radius-md: 6px; --radius-lg: 10px; --radius-full: 9999px;
  --shadow-card: 0 1px 2px #0000000f, 0 10px 28px -14px #00000038;
  --focus-ring: 0 0 0 2px #fdfdfd, 0 0 0 4px #455230;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

/* Lymecode: componentes. Carregado depois de tokens.css; usa só os tokens. */
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
.caption { text-transform: uppercase; }
.ly-stage { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-4); }
.ly-stack { display: grid; gap: var(--space-3); padding: var(--space-4); max-width: 420px; }

/* Button */
.ly-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px/1 var(--font-body); padding: 11px 16px; border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .12s cubic-bezier(.2,.8,.2,1), border-color .12s cubic-bezier(.2,.8,.2,1), transform .12s cubic-bezier(.2,.8,.2,1); }
.ly-btn:active { transform: translateY(1px); }
.ly-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ly-btn-primary { background: var(--accent); color: var(--on-accent); }
.ly-btn-primary:hover { background: var(--accent-hover); }
.ly-btn-secondary { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.ly-btn-secondary:hover { border-color: var(--fg); }
.ly-btn-ghost { background: transparent; color: var(--fg); }
.ly-btn-ghost:hover { background: var(--surface-2); }
.ly-btn-danger { background: transparent; color: var(--bad); border-color: var(--bad); }
.ly-btn-danger:hover { background: var(--bad-soft); }
.ly-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.ly-btn-sm { padding: 8px 12px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ly-btn { transition: none; } .ly-btn:active { transform: none; } }

/* Chip */
.ly-chip { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--fg); white-space: nowrap; }
.ly-chip::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.ly-chip-plain::before { display: none; }
.ly-chip-accent { background: var(--accent); color: var(--on-accent); }
.ly-chip-ok { background: var(--ok-soft); color: var(--ok); }
.ly-chip-warn { background: var(--warn-soft); color: var(--warn); }
.ly-chip-bad { background: var(--bad-soft); color: var(--bad); }
.ly-chip-info { background: var(--info-soft); color: var(--info); }

/* Field */
.ly-field { display: grid; gap: 6px; }
.ly-field label { font-size: 13px; font-weight: 600; color: var(--fg); }
.ly-field input { font: inherit; font-size: 14.5px; color: var(--fg); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); padding: 9px 11px; width: 100%; min-width: 0; box-sizing: border-box; }
.ly-field input:focus { outline: none; border-color: var(--fg); }
.ly-field input:focus-visible { box-shadow: var(--focus-ring); }
.ly-field .ly-hint { font-size: 12.5px; color: var(--muted); }
.ly-field-err input { border-color: var(--bad); }
.ly-field-err .ly-hint { color: var(--bad); }

/* Alert */
.ly-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); font-size: 14px; border: 1px solid; }
.ly-alert::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; margin-top: 7px; }
.ly-alert > span { color: var(--fg); }
.ly-alert-info { background: var(--info-soft); color: var(--info); border-color: var(--info); }
.ly-alert-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.ly-alert-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.ly-alert-bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }

/* ProjectCard */
.ly-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; display: grid; gap: 10px; align-content: start; min-width: 0; max-width: 420px; transition: box-shadow .2s cubic-bezier(.2,.8,.2,1); }
.ly-card:hover { box-shadow: var(--shadow-card); }
.ly-card-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.ly-card-kicker { font: 600 13px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0; }
.ly-card-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: var(--fg); }
.ly-card-text { color: var(--muted); margin: 0; }
.ly-bar { height: 6px; border-radius: 3px; background: var(--deep); overflow: hidden; }
.ly-bar > i { display: block; height: 100%; background: var(--accent); }
.ly-card-meta { display: flex; justify-content: space-between; font: 500 12px/1 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }

/* Wordmark: a logo oficial, em SVG com o nome já em curvas */
.ly-wm { display: inline-block; line-height: 0; vertical-align: middle; }
.ly-wm svg { display: block; width: auto; }

/* Lymecode: layout do site. Vem depois dos tokens e dos componentes do design system e segue as pranchas de site-design/. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--font-body); overflow-wrap: break-word; }
h1, h2, h3, p { margin: 0; }
img, svg { max-width: 100%; }
a { color: var(--accent-ink); }
a:hover { color: var(--fg); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 2px; }
.ly-btn:focus-visible { outline: none; }
[hidden] { display: none !important; }
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 12px; top: -64px; z-index: 100; background: var(--tinta); color: var(--dark-fg); padding: 12px 16px; border-radius: var(--radius-md); font-weight: 600; text-decoration: none; }
.pular:focus { top: 12px; color: var(--dark-fg); outline: 2px solid var(--lima); outline-offset: 2px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- complementos dos componentes (de site-design/lymecode-vars.css) ---------- */
.ly-btn.lg { font-size: 16px; padding: 15px 22px; }
.on-dark .ly-btn-secondary { color: var(--dark-fg); border-color: var(--dark-line-strong); }
.on-dark .ly-btn-secondary:hover { border-color: var(--dark-fg); }
.on-dark .ly-btn:focus-visible { box-shadow: 0 0 0 2px #16181b, 0 0 0 4px #c9f24b; }
.on-dark .on-light .ly-btn-secondary { color: var(--fg); border-color: var(--line-strong); }
.on-dark .on-light .ly-btn-secondary:hover { border-color: var(--fg); }
.on-dark .on-light .ly-btn:focus-visible { box-shadow: var(--focus-ring); }
.ly-field textarea, .ly-field select { font: inherit; font-size: 14.5px; color: var(--fg); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); padding: 9px 11px; width: 100%; min-width: 0; }
.ly-field textarea { resize: vertical; min-height: 96px; }
.ly-field textarea:focus, .ly-field select:focus { outline: none; border-color: var(--fg); }
.ly-field textarea:focus-visible, .ly-field select:focus-visible { box-shadow: var(--focus-ring); }
.ly-field .opcional { font-weight: 400; color: var(--muted); }
/* no celular, 16 px nos campos evita o zoom automático do iPhone */
@media (max-width: 720px) { .ly-field input, .ly-field textarea { font-size: 16px; } }

/* ---------- tipografia ---------- */
.eyebrow { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-wrap: balance; }
.h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.h1.menor { font-size: clamp(40px, 4.4vw, 60px); }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.h2.medio { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.03em; }
.h2.demo { font-size: clamp(30px, 3vw, 42px); text-wrap: wrap; }
.h2.faixa { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -.03em; text-wrap: wrap; }
.destaque { font-family: var(--font-destaque); font-weight: 400; font-size: 1em; letter-spacing: -.01em; color: var(--accent-ink); }
.lead { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; color: var(--muted); max-width: 540px; }
.lead.largo { max-width: 640px; }
.sublead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; color: var(--muted); max-width: 640px; }
.num { font-family: var(--font-destaque); font-size: 28px; line-height: 1; color: var(--accent-ink); }

/* ---------- seções ---------- */
.sec { padding: clamp(56px, 8vw, 96px) 0; }
.sec-gelo { background: var(--gelo); }
.sec-lima { background: var(--lima); }
.sec-tinta { background: var(--tinta); color: var(--dark-fg); }
.sec-tinta .eyebrow, .sec-tinta .destaque { color: var(--lima); }
.sec-tinta .sublead { color: var(--dark-muted); }
.sec-tinta a:focus-visible { outline-color: var(--lima); }
.sec-lima .eyebrow, .sec-lima .destaque { color: var(--tinta); }
.sec-lima a:focus-visible, .sec-lima summary:focus-visible { outline-color: var(--tinta); }
.pilha { display: flex; flex-direction: column; gap: 48px; }
.pilha.g40 { gap: 40px; }
.sec-head { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }

/* ---------- topo ---------- */
.topo { background: var(--bg); border-bottom: 1px solid var(--line); }
.topo-in { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topo-logo { display: flex; align-items: center; text-decoration: none; }
.topo-logo img { display: block; height: 28px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.nav-links a { color: var(--fg); text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.topo-acoes { display: flex; align-items: center; gap: 8px; }
.ly-btn.nav-menu { display: none; }
.menu-painel { border-top: 1px solid var(--line); background: var(--bg); }
.menu-painel nav { max-width: 1200px; margin: 0 auto; padding: 8px 24px 24px; display: flex; flex-direction: column; }
.menu-painel nav > a:not(.ly-btn) { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; font-size: 17px; font-weight: 500; }
.menu-painel nav > a.secundario { color: var(--muted); font-size: 15px; }
.menu-painel .ly-btn { margin-top: 20px; }
@media (max-width: 860px) {
  .nav-links, .ly-btn.nav-cta { display: none !important; }
  .ly-btn.nav-menu { display: inline-flex; }
}
@media (min-width: 861px) { .menu-painel { display: none !important; } }

/* ---------- abertura ---------- */
.hero { padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.hero.interna { padding-top: clamp(48px, 6vw, 88px); }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: center; }
.hero-txt { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-txt .ctas.folga { padding-top: 8px; }
.checks { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--muted); }
.checks li { display: flex; align-items: center; gap: 6px; }
.checks svg { flex: none; }
.hero-arte { position: relative; min-height: clamp(280px, 34vw, 460px); border-radius: var(--radius-lg); background: var(--lima); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hero-arte::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#16181b 1.2px, transparent 1.3px); background-size: 24px 24px; opacity: .1; }
.hero-arte-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 40px 0 32px; }
.hero-logo { filter: drop-shadow(0 24px 28px rgba(22, 24, 27, .22)); }
.hero-logo img { display: block; height: clamp(150px, 19vw, 260px); width: auto; }
.ly-float { animation: ly-float 6s cubic-bezier(.45, 0, .55, 1) infinite; will-change: transform; }
.ly-float-shadow { width: clamp(96px, 12vw, 160px); height: 16px; border-radius: 50%; background: var(--tinta); opacity: .18; animation: ly-float-shadow 6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes ly-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-20px) rotate(3deg); } }
@keyframes ly-float-shadow { 0%, 100% { transform: scaleX(1); opacity: .18; } 50% { transform: scaleX(.78); opacity: .1; } }

/* ---------- grades ---------- */
.grade { display: grid; gap: 16px; }
.grade.c150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grade.c240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grade.c280 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* ---------- dores ---------- */
.dor { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 20px; justify-content: space-between; }
.dor-fala { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.3; letter-spacing: -.02em; }
.dor-saida { padding-top: 16px; min-height: 65px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--muted); }
.dor-saida svg { flex: none; margin-top: 3px; }

/* ---------- frentes ---------- */
.frente { background: var(--dark-surface); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.frente-icone { width: 52px; height: 52px; border-radius: var(--radius-lg); background: var(--lima); display: flex; align-items: center; justify-content: center; }
.frente h3 { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
.frente p { font-size: 16.5px; line-height: 1.5; color: var(--dark-fg); }
.frente-link { font-weight: 600; font-size: 15px; color: var(--lima); text-underline-offset: 3px; }
.frente-link:hover { color: var(--dark-fg); }
.frente .frente-tags { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--dark-line-strong); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; line-height: 1.6; text-transform: uppercase; color: var(--dark-muted); }

/* ---------- cartões de demonstração (início) ---------- */
.demo-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.demo-card-arte { height: 220px; background: var(--gelo); display: flex; align-items: center; justify-content: center; padding: 20px; }
.demo-card-txt { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.demo-card-txt h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
.demo-card-txt p { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.demo-card-txt a { margin-top: auto; padding-top: 8px; font-weight: 600; font-size: 15px; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.demo-card-txt a:hover { color: var(--fg); }
.frente .ly-chip { align-self: flex-start; }
.frente .frente-link { margin-top: auto; padding-top: 8px; }
.frente .frente-tags + .frente-link { margin-top: 0; padding-top: 0; }

/* miniaturas das telas (decorativas) */
.mk { font-size: 12px; line-height: 1.6; color: var(--fg); }
.mk p { margin: 0; }
.mono { font-family: var(--font-mono); }
.mk-cartao { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; }
.mk-pedido { width: 220px; border-radius: 14px; padding: 12px; gap: 8px; }
.mk-pedido .mk-tit { font-weight: 600; }
.mk-linha { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.mk-linha.fim { border-bottom: 0; }
.mk-linha .mono { font-weight: 600; }
.mk-botao { background: var(--lima); color: var(--tinta); border-radius: var(--radius-md); padding: 8px; text-align: center; font-weight: 600; }
.mk-lembrete { width: 230px; display: flex; flex-direction: column; gap: 8px; }
.mk-balao { background: var(--surface); border-radius: 4px 12px 12px 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.4; box-shadow: 0 1px 0 #00000014; }
.mk-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mk-resposta { background: var(--surface); border: 1.5px solid var(--accent-ink); color: var(--accent-ink); border-radius: 8px; padding: 7px; text-align: center; font-weight: 600; }
.mk-status { margin-top: 4px !important; align-self: flex-start; display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; background: var(--ok-soft); color: var(--ok); padding: 5px 8px; border-radius: var(--radius-sm); }
.mk-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.mk-orc { width: 220px; padding: 14px; gap: 6px; }
.mk-orc-topo { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 2px solid var(--tinta); }
.mk-orc-topo b { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.mk-orc-topo .mono { font-size: 10px; color: var(--muted); }
.mk-item { display: flex; justify-content: space-between; font-size: 11.5px; }
.mk-item.suave { color: var(--muted); }
.mk-total { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; padding-top: 6px; border-top: 1px solid var(--line); }
.mk-orc .mk-botao { margin-top: 4px; padding: 7px; }

/* ---------- etapas (método e diagnóstico) ---------- */
.etapas { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.etapas.c230 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.etapas li { border-top: 3px solid var(--tinta); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.etapas h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -.02em; }
.etapas p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.etapas .etapa-quando { margin: auto 0 0; padding-top: 4px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); }

/* ---------- garantias ---------- */
.garantias { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 36px 40px; }
.garantias li { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid var(--tinta); }
.garantias h3 { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.garantias h3 svg { flex: none; }
.garantias p { font-size: 15.5px; line-height: 1.5; color: #2f3134; }

/* ---------- perguntas ---------- */
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 40px 56px; align-items: start; }
.faq-intro { display: flex; flex-direction: column; gap: 16px; }
.faq-intro > p:last-child { font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 440px; }
.faq-lista { border-top: 1px solid var(--line); }
.faq-lista details { border-bottom: 1px solid var(--line); padding: 20px 0; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.faq-lista summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.015em; }
.faq-lista details p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.faq-plus { flex: none; transition: transform .2s var(--ease); }
details[open] .faq-plus { transform: rotate(45deg); }

/* ---------- contato e formulário ---------- */
.contato-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px 64px; align-items: start; }
.contato-txt { display: flex; flex-direction: column; gap: 20px; }
.contato-txt > p:not(.eyebrow) { font-size: 18px; line-height: 1.55; color: var(--dark-muted); max-width: 480px; }
.canais { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 16px; }
.canais li { display: flex; align-items: center; gap: 12px; }
.canais svg { flex: none; }
.canais a { color: var(--dark-fg); text-decoration: none; }
.canais a:hover { color: var(--lima); text-decoration: underline; text-underline-offset: 3px; }
.form-card { background: var(--surface); color: var(--fg); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.form-card a:focus-visible { outline-color: var(--accent-ink); }
.form-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.form-titulo { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
.form-passo-rotulo { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.form-barra { height: 6px; border-radius: 3px; background: var(--tinta); overflow: hidden; }
.form-barra > div { height: 100%; width: 33%; background: var(--lima); transition: width .2s var(--ease); }
.form-card form, .form-passo { display: flex; flex-direction: column; gap: 20px; }
.form-passo:focus { outline: none; }
.form-card fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.form-card legend { padding: 0; margin-bottom: 12px; font-size: 17px; font-weight: 600; }
.form-card legend.menor { margin-bottom: 10px; font-size: 15px; }
.form-card legend .opcional { font-weight: 400; color: var(--muted); }
.form-dica { margin: -4px 0 6px; font-size: 14px; color: var(--muted); }
.opcoes-ramo { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.opcoes-porte { display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes-dores { display: flex; flex-direction: column; gap: 8px; }
.opt { font: inherit; text-align: left; cursor: pointer; color: var(--fg); border-radius: var(--radius-md); border: 1.5px solid var(--line); background: var(--surface); transition: background-color .12s var(--ease), border-color .12s var(--ease); }
.opt:hover { border-color: var(--line-strong); }
.opt[aria-pressed="true"] { border-color: var(--accent-ink); background: var(--accent-soft); }
.opt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.opt-ramo { padding: 12px 14px; min-height: 68px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.opt-ramo span:first-child { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.opt-ramo span:last-child { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.opt-porte { font-size: 14px; font-weight: 500; padding: 9px 14px; border-radius: var(--radius-full); }
.opt-dor { font-size: 15px; line-height: 1.4; padding: 13px 16px; display: flex; align-items: center; gap: 12px; }
.opt-dor .caixa { flex: none; width: 22px; height: 22px; border-radius: 4px; border: 1.5px solid var(--line-strong); background: var(--surface); display: flex; align-items: center; justify-content: center; }
.opt-dor .caixa svg { display: none; }
.opt-dor[aria-pressed="true"] .caixa { border-color: var(--tinta); background: var(--lima); }
.opt-dor[aria-pressed="true"] .caixa svg { display: block; }
.form-acoes { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.form-acoes.fim { justify-content: flex-end; }
.sugestao { background: var(--accent-soft); border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.sugestao-rotulo { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-ink); }
.sugestao-titulo { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.015em; }
.sugestao-texto { font-size: 14px; line-height: 1.45; color: var(--muted); }
.campos-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.form-nota { font-size: 13px; line-height: 1.5; color: var(--muted); }
.form-fim { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 12px 0; }
.form-fim .selo { width: 52px; height: 52px; border-radius: 50%; background: var(--lima); display: flex; align-items: center; justify-content: center; }
.form-fim-titulo { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -.02em; }
.form-fim p:not(.form-fim-titulo) { font-size: 16px; line-height: 1.5; color: var(--muted); }

/* ---------- rodapé ---------- */
.rodape { background: var(--tinta); color: var(--dark-fg); border-top: 1px solid var(--dark-line); padding: 56px 0 32px; }
.rodape a { color: var(--dark-fg); }
.rodape a:hover { color: var(--lima); }
.rodape a:focus-visible { outline-color: var(--lima); }
.rodape-in { display: flex; flex-direction: column; gap: 40px; }
.rodape-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 64px; }
.rodape-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; flex: 1 1 320px; min-width: 0; }
.rodape-marca img { display: block; height: 30px; width: auto; }
.rodape-marca p { font-size: 15px; line-height: 1.55; color: var(--dark-muted); max-width: 380px; }
.rodape-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 15px; flex: 0 1 180px; }
.rodape-col.contato { flex-basis: 220px; }
.rodape-col a { text-decoration: none; }
.rodape-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape-rotulo { margin: 0 0 4px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-muted); }
.rodape-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; border-top: 1px solid var(--dark-line); font-family: var(--font-mono); font-size: 12px; color: var(--dark-muted); }
.rodape-base a { color: var(--dark-muted); }

/* ---------- diagnóstico ---------- */
.preco-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.preco-linha .mono { font-size: 22px; font-weight: 600; }
.preco-linha span:last-child { font-size: 15px; color: var(--muted); }
.preco-linha span:only-child { font-size: 16px; font-weight: 600; color: var(--fg); }
.recebe { background: var(--lima); color: var(--tinta); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 8px; }
.recebe-rotulo { margin: 0 0 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.recebe ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.recebe li { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 2px solid var(--tinta); font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.3; letter-spacing: -.02em; }
.recebe li:last-child { border-bottom: 2px solid var(--tinta); }
.recebe svg { flex: none; }
.para-quem { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.para-quem p:first-child { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.para-quem p:last-child { font-size: 14.5px; line-height: 1.45; color: var(--muted); }

/* ---------- demonstrações ---------- */
.demos-hero { padding: clamp(48px, 6vw, 88px) 0 clamp(32px, 4vw, 56px); }
.demos-hero .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.demos-hero .h1 { max-width: 900px; }
.demo-sec { padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--line); }
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px 56px; align-items: center; }
.demo-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.demo-rotulo { display: flex; align-items: baseline; gap: 12px; }
.demo-rotulo span:last-child { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.demo-txt > p:not(.demo-rotulo) { font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 520px; }
.demo-txt ol { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; }
.demo-arte { background: var(--gelo); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; justify-content: center; font-size: 12px; line-height: 1.6; }
.demo-arte p { margin: 0; }
.fone { width: 200px; border: 8px solid var(--tinta); border-radius: 28px; background: var(--gelo); overflow: hidden; display: flex; flex-direction: column; }
.fone-topo { padding: 12px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.fone-corpo { padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 230px; }
.bolha { max-width: 85%; padding: 7px 9px; font-size: 11px; line-height: 1.35; }
.bolha.entra { align-self: flex-start; background: var(--surface); border-radius: 3px 10px 10px 10px; }
.bolha.sai { align-self: flex-end; background: var(--accent-soft); border-radius: 10px 3px 10px 10px; }
.bolha.larga { max-width: 90%; }
.bolha.arquivo { display: flex; gap: 6px; align-items: center; padding: 8px 9px; }
.fone .mk-resposta { padding: 6px; font-size: 11px; }
.painel { flex: 1 1 220px; max-width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.painel.g8 { gap: 8px; }
.painel-tit { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.painel-lista { display: flex; flex-direction: column; gap: 6px; }
.pedido-linha { display: flex; justify-content: space-between; font-size: 11.5px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.pedido-linha.novo { border: 1.5px solid var(--accent-ink); }
.pedido-linha .mono { font-size: 10.5px; white-space: nowrap; padding-left: 6px; }
.agenda-nota { font-size: 11.5px; color: var(--muted); }
.agenda-linha { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--line); }
.agenda-linha b { font-family: var(--font-mono); }
.agenda-linha .ok { color: var(--ok); font-weight: 600; }
.agenda-linha .aviso { color: var(--warn); font-weight: 600; }
.painel .mk-orc-topo b { font-size: 15px; white-space: nowrap; }
.painel .mk-orc-topo .mono { font-size: 10px; white-space: nowrap; }
.painel .mk-item { font-size: 12px; }
.painel .mk-total { font-size: 14px; }
.faixa-cta { background: var(--gelo); padding: clamp(48px, 6vw, 72px) 0; }
.faixa-cta .wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.faixa-cta-txt { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.faixa-cta-txt p { font-size: 16.5px; line-height: 1.55; color: var(--muted); }

/* ---------- comércios locais ---------- */
.site-mock { width: min(100%, 248px); border: 8px solid var(--tinta); border-radius: 30px; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; font-size: 12px; line-height: 1.4; color: var(--fg); filter: drop-shadow(0 24px 28px rgba(22, 24, 27, .22)); }
.site-mock p { margin: 0; }
.site-mock-barra { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--gelo); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.site-mock-capa { background: var(--tinta); color: var(--dark-fg); padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; }
.site-mock-capa b { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.site-mock-capa span { font-size: 11px; color: var(--dark-muted); }
.site-mock-corpo { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.site-mock-zap { background: var(--lima); color: var(--tinta); border-radius: var(--radius-md); padding: 9px; text-align: center; font-weight: 600; }
.site-mock-linha { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 11.5px; }
.site-mock-linha svg { flex: none; }
.site-mock-mapa { height: 62px; border-radius: var(--radius-md); background: linear-gradient(#c7cbc9 0 0) 0 38% / 100% 2px no-repeat, linear-gradient(#c7cbc9 0 0) 62% 0 / 2px 100% no-repeat, linear-gradient(#c7cbc9 0 0) 22% 0 / 2px 100% no-repeat, var(--gelo); position: relative; }
.site-mock-mapa::after { content: ""; position: absolute; left: 60%; top: 24%; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; background: var(--tinta); transform: rotate(-45deg); }
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: stretch; }
.plano { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: 20px; }
.plano-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.plano h3 { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
.plano-resumo { font-size: 16px; line-height: 1.5; color: var(--muted); }
.plano-preco { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--line); }
.plano-preco .valor { font-family: var(--font-mono); font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plano-preco .mes { font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.plano-preco .pag { font-size: 14px; line-height: 1.45; color: var(--muted); }
.lista-check { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; line-height: 1.45; }
.lista-check li { display: flex; align-items: flex-start; gap: 10px; }
.lista-check svg { flex: none; margin-top: 3px; }
.plano .ly-btn { margin-top: auto; }
.planos-nota { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 720px; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 40px 56px; align-items: start; }
.coluna { display: flex; flex-direction: column; gap: 20px; padding-top: 18px; border-top: 2px solid var(--tinta); }
.coluna h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.coluna .lista-check { color: #2f3134; }
.fecho { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.fecho > p:not(.eyebrow) { font-size: 18px; line-height: 1.55; color: var(--dark-muted); max-width: 560px; }
.fecho .link-claro { color: var(--dark-fg); font-size: 15px; text-underline-offset: 3px; }
.fecho .link-claro:hover { color: var(--lima); }
.fecho > p.fecho-outra { align-self: stretch; max-width: none; margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--dark-line); font-size: 15px; line-height: 1.5; color: var(--dark-muted); }
.fecho-outra a { color: var(--dark-fg); text-underline-offset: 3px; }
.fecho-outra a:hover { color: var(--lima); }

/* ---------- páginas de texto (privacidade, 404) ---------- */
.texto { max-width: 720px; display: flex; flex-direction: column; gap: 20px; }
.texto h2 { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; margin-top: 16px; }
.texto p, .texto li { font-size: 16.5px; line-height: 1.6; color: var(--muted); }
.texto ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.texto .data { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- celular ---------- */
@media (max-width: 350px) {
  /* a palavra em destaque é larga: um pouco menor para caber em telas de 320 px */
  .h1, .h1.menor { font-size: 34px; }
  .h2 { font-size: 28px; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faq-plus, .form-barra > div, .opt { transition: none; }
  .ly-float, .ly-float-shadow { animation: none; }
}