/* NTCOS · landing comercial (atrair, qualificar, converter). Carregado depois de site.css. Só var(--token). */

/* abertura */
.lp-motto { margin-top: var(--space-6); max-width: 44ch; color: var(--ink); }
.site-hero__lead { margin-top: var(--space-5); }
.lp-tabs3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .lp-tabs3 { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }

/* trilho das três etapas */
.lp-rail { position: sticky; top: calc(var(--header-h) + 8px); z-index: var(--z-sticky); display: flex; justify-content: center; gap: var(--space-1);
  width: max-content; max-width: 100%; margin: 0 auto var(--space-16); padding: 4px; list-style: none;
  border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(var(--blur-md)); backdrop-filter: blur(var(--blur-md)); }
.lp-rail a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius-pill);
  font: 500 15px/1 var(--font-text); letter-spacing: 0.02em; color: var(--ink-2); text-decoration: none; transition: color var(--dur-toque) var(--ease-cruzeiro), background-color var(--dur-leme) var(--ease-cruzeiro); }
.lp-rail a .data-sm { color: var(--muted); }
.lp-rail a:hover { color: var(--ink); }
.lp-rail a.is-current { background: var(--primary); color: var(--on-primary); }
.lp-rail a.is-current .data-sm { color: var(--reflexo-200); }
.lp-rail a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 760px) { .lp-rail { top: calc(var(--header-h-sm) + 6px); margin-bottom: var(--space-12); } .lp-rail a { padding: 0 12px; font-size: 14px; } }

/* etapa: texto e tela lado a lado, alternando */
.lp-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: center; padding-block: var(--space-12);
  scroll-margin-top: calc(var(--header-h) + 72px); }
.lp-step + .lp-step { border-top: 1px solid var(--line); }
.lp-step--flip .lp-step__text { order: 2; }
.lp-step__text { display: grid; gap: var(--space-5); justify-items: start; min-width: 0; }
.lp-step__k { display: inline-flex; align-items: center; gap: 10px; }
.lp-step__k .data-sm { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-round); background: var(--surface-tint); color: var(--accent); }
.lp-step__k .label { color: var(--accent); text-transform: uppercase; }
.lp-step__text .h3 { max-width: 22ch; }
.lp-step__text .body-lg { color: var(--ink); }
.lp-step__text .body { color: var(--ink-2); }
.lp-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.lp-step__art { position: relative; min-width: 0; padding: var(--space-8); border-radius: var(--radius-2xl);
  background: radial-gradient(60% 70% at 50% 40%, var(--halo), transparent 75%), var(--surface-sunken); }
.lp-float { position: absolute; width: 230px; }
.lp-float--a { right: -12px; bottom: 28px; }
.lp-float--b { left: -12px; bottom: 28px; }

/* tela: ficha do catálogo */
.lp-listing { max-width: 440px; margin: 0 auto; overflow: hidden; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xl); }
.lp-listing__photo { position: relative; display: grid; place-items: center; height: 210px; background: linear-gradient(180deg, var(--halo), var(--surface-tint)); }
.lp-listing__photo .site-casco__boat { width: 78%; }
.lp-listing__badge { position: absolute; left: 14px; top: 14px; padding: 6px 10px; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink);
  font: 700 12px/1 var(--font-text); letter-spacing: 0.02em; box-shadow: var(--shadow-xs); }
.lp-listing__count { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-pill);
  background: var(--glass); color: var(--ink); font: 500 12px/1 var(--font-text); letter-spacing: 0.02em; -webkit-backdrop-filter: blur(var(--blur-md)); backdrop-filter: blur(var(--blur-md)); }
.lp-listing__body { padding: var(--space-5); }
.lp-listing__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.lp-listing__price { color: var(--ink); white-space: nowrap; }
.lp-listing__specs { margin-top: 6px; color: var(--muted); }
.lp-listing__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }

/* tela: conversa vinculada ao lead */
.lp-chat { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); overflow: hidden; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xl); }
.lp-chat__thread { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); background: var(--canvas); }
.lp-chat__head { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.lp-chat__head .ui-sm { color: var(--ink); }
.lp-chat__head .meta { color: var(--muted); }
.lp-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius-round); background: var(--surface-tint); color: var(--accent); font: 700 12px/1 var(--font-text); letter-spacing: 0.02em; }
.lp-bubble { max-width: 88%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--surface); border: 1px solid var(--line);
  font: 400 14px/1.45 var(--font-text); letter-spacing: 0.015em; color: var(--ink); }
.lp-bubble--me { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--primary); border-color: transparent; color: var(--on-primary); }
.lp-chat__lead { padding: var(--space-5); border-left: 1px solid var(--line); }
.lp-chat__k { color: var(--accent); text-transform: uppercase; }
.lp-chat__lead dl { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; }
.lp-chat__lead dl div { margin: 0; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.lp-chat__lead dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.lp-chat__lead dt { color: var(--muted); }
.lp-chat__lead dd { margin: 4px 0 0; color: var(--ink); }

/* tela: pedido */
.lp-order { max-width: 520px; margin: 0 auto; padding: var(--space-6); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xl); }
.lp-order__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.lp-order__head .title { margin-top: 6px; color: var(--ink); }
.lp-order__head .meta { margin-top: 4px; color: var(--muted); }
.lp-order__k { color: var(--accent); text-transform: uppercase; }
.lp-order__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.lp-order__list { display: grid; gap: var(--space-3); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.lp-order__list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); font: 400 14px/1.4 var(--font-text); letter-spacing: 0.015em; color: var(--ink-2); }
.lp-order__list .data-sm { color: var(--ink); }
.lp-pending { font: 500 12px/1 var(--font-text); letter-spacing: 0.02em; color: var(--muted); }
.lp-order__steps { padding-top: var(--space-5); }
.lp-order__steps ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.lp-order__steps li { position: relative; padding-top: 14px; font: 500 12px/1.2 var(--font-text); letter-spacing: 0.02em; color: var(--muted); }
.lp-order__steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: var(--radius-pill); background: var(--track); }
.lp-order__steps li.is-done { color: var(--ink-2); }
.lp-order__steps li.is-done::before { background: var(--chart-line); }
.lp-order__steps li.is-now { color: var(--ink); }
.lp-order__steps li.is-now::before { background: linear-gradient(90deg, var(--chart-line) 50%, var(--track) 50%); }

/* funil */
.lp-funnel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: center; }
.lp-funnel__text { display: grid; gap: var(--space-5); }
.lp-funnel__text .lead { color: var(--ink-2); }
.lp-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-card);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.lp-board__col { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-3); border-radius: var(--radius-control); background: var(--surface-sunken); min-width: 0; }
.lp-board__h { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: 2px 2px var(--space-2); color: var(--ink); }
.lp-board__n { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: 700 12px/1 var(--font-text); letter-spacing: 0.02em; }
.lp-deal { display: grid; gap: 4px; justify-items: start; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.lp-deal .ui-sm { color: var(--ink); }
.lp-deal .meta { color: var(--muted); }
.lp-deal--won { box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--accent); }
.lp-origin { margin-top: 4px; padding: 4px 8px; border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--accent); font: 700 11px/1 var(--font-text); letter-spacing: 0.02em; }
.lp-origin--none { background: var(--surface-sunken); color: var(--muted); }

/* WS Náutica */
.lp-ws { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-16); align-items: center; }
.lp-ws__text { display: grid; gap: var(--space-5); }
.lp-ws__text .lead { color: var(--ink-2); }
.lp-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.lp-roles li { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); }
.lp-roles li .title-sm { color: var(--ink); }
.lp-roles li .body-sm { margin-top: 6px; color: var(--ink-2); }
.lp-roles__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-round); color: var(--accent); background: linear-gradient(160deg, var(--surface), var(--halo)); box-shadow: inset 0 0 0 1px var(--line); }

/* responsivo */
@media (max-width: 1100px) {
  .lp-step, .lp-funnel, .lp-ws { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .lp-step--flip .lp-step__text { order: 0; }
  .lp-float--a { right: 8px; } .lp-float--b { left: 8px; }
}
@media (max-width: 760px) {
  .lp-step { padding-block: var(--space-10); }
  .lp-step__art { padding: var(--space-4); border-radius: var(--radius-xl); }
  .lp-float { display: none; }
  .lp-chat { grid-template-columns: minmax(0, 1fr); }
  .lp-chat__lead { border-left: 0; border-top: 1px solid var(--line); }
  .lp-order__cols { grid-template-columns: minmax(0, 1fr); }
  .lp-board { grid-template-columns: minmax(0, 1fr); }
  .lp-roles { grid-template-columns: minmax(0, 1fr); }
  .h3 { font-size: 24px; letter-spacing: 0; }
}

/* convite final: o N do símbolo, cortado pela linha d'água, reage ao mouse */
.lp-mark { width: min(340px, 100%); perspective: 900px; }
.lp-mark__svg { display: block; width: 100%; height: auto; overflow: visible; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); filter: drop-shadow(0 24px 40px rgba(0, 0, 41, .35)); }
.lp-mark__top { transform: translate(var(--tx, 0px), var(--ty, 0px)); }
.lp-mark__bot { transform: translate(var(--bx, 0px), var(--by, 0px)); }
.lp-mark__wave { fill: none; stroke: var(--brand-reflexo); stroke-width: 12; stroke-linecap: round; opacity: .75;
  transform-box: fill-box; transform-origin: center; transform: translateX(var(--wx, 0px)) scaleY(var(--wa, 1)); }
@media (max-width: 960px) { .lp-mark { width: 200px; } }

/* ============ abertura com o mar sutil (08/11) ============ */
.site-hero { isolation: isolate; background: var(--bg); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.site-hero__inner { position: relative; z-index: 1; width: 100%; min-height: 0; align-items: center; }
.site-hero__note { z-index: 1; }
.lp-sea { --sea-p: 0; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  opacity: calc((1 - var(--sea-p) * 1.15) * var(--sea-max, .95));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 78%, transparent 100%); }
[data-theme="dark"] .lp-sea { --sea-max: 1; }
.lp-sea__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s var(--ease-cruzeiro);
  transform: translate3d(0, calc(var(--sea-p) * 60px), 0) scale(calc(1 + var(--sea-p) * .04)); }
/* o movimento fica no canvas; a máscara do .lp-sea não se mexe, então a borda de baixo continua esmaecida */
.lp-sea__canvas.is-ready { opacity: 1; }
.lp-sea__fallback { position: absolute; inset: 0; opacity: 0; transition: opacity .6s;
  background: linear-gradient(to bottom, transparent 40%, var(--halo) 58%, color-mix(in srgb, var(--brand-reflexo) 45%, var(--bg)) 100%); }
.lp-sea__canvas.no-webgl + .lp-sea__fallback { opacity: 1; }
/* sobre o mar, o cartão vira vidro (há luz por trás) */
.site-hero .site-casco { background: var(--glass); -webkit-backdrop-filter: blur(var(--blur-lg)); backdrop-filter: blur(var(--blur-lg)); border-color: var(--glass-line); }
html:not([data-theme="dark"]) .site-hero .site-casco { background: rgba(255,255,255,.68); -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.1); backdrop-filter: blur(var(--blur-lg)) saturate(1.1); }
.site-hero .site-casco__media { background: radial-gradient(70% 90% at 50% 20%, color-mix(in srgb, var(--surface) 80%, transparent), color-mix(in srgb, var(--halo) 70%, transparent)); }
/* no celular o hero empilha texto e cartão: o mar fica preso à primeira tela */
@media (max-width: 760px) { .lp-sea { --sea-max: .85; inset: 0 0 auto 0; height: 100svh; } [data-theme="dark"] .lp-sea { --sea-max: .9; } }
@media (prefers-reduced-motion: reduce) { .lp-sea__canvas { transform: none; } }