/* =====================================================================
   Start Alto Ticket · base dos estilos de LP
   Paleta ÚNICA (Concepção Black 2026): vinho + rosé + creme.
   Cada estilo define a tipografia, a métrica e os componentes de assinatura;
   as cores vêm sempre destes tokens.
   ===================================================================== */
:root {
  /* paleta da Concepção */
  --vinho: #490F1B;
  --vinho-2: #3A1420;
  --vinho-3: #1C0710;
  --vinho-4: #12040A;
  --vinho-claro: #7A2335;
  --rose: #C39A9C;
  --rose-2: #E2C2C4;
  --rose-3: #F3DCDD;
  --malva: #89636B;
  --creme: #F2EAE0;
  --creme-2: #F8F3EC;
  --areia: #E9DDD0;
  --areia-2: #D8CABC;

  /* semântica padrão (estilos sobrescrevem) */
  --bg: var(--creme); --fg: var(--vinho); --mut: #6E4E55; --line: rgba(73,15,27,.14); --card: #FBF7F2;
  --acc: var(--vinho); --acc-2: var(--rose);
  --cta: var(--vinho); --cta-fg: var(--creme); --cta-sh: 0 14px 30px -14px rgba(73,15,27,.55);
  --r: 14px; --r-btn: 12px;
  --fh: Georgia, serif; --fb: system-ui, sans-serif; --fm: ui-monospace, monospace;
  --maxw: 1160px; --narrow: 780px;

  /* gráficos */
  --g-ink: var(--fg); --g-acc: var(--vinho); --g-acc2: var(--rose); --g-card: var(--card); --g-line: var(--line); --g-mut: var(--mut); --g-soft: var(--areia);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--fb); line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
img { display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1em; }
.w { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: var(--narrow); margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.center .btn { margin-left: auto; margin-right: auto; }
.s { position: relative; }
.k { font-family: var(--fm); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- botão base ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; background: var(--cta); color: var(--cta-fg); text-decoration: none; border-radius: var(--r-btn); box-shadow: var(--cta-sh); transition: transform .18s, filter .18s, box-shadow .18s; position: relative; overflow: hidden; isolation: isolate; max-width: 100%; text-align: center; cursor: pointer; border: 0; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.btn:active { transform: translateY(0) scale(.985); filter: brightness(.96); transition-duration: .06s; }
.btn:focus-visible { outline: 3px solid var(--rose-2); outline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.btn__main { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.btn__sub { font-size: .62em; opacity: .8; font-weight: 500; letter-spacing: .02em; }
.btn__arr { font-size: 1.3em; line-height: 0; }
.btn--sm { padding: 11px 16px; font-size: 13px; box-shadow: none; min-height: 44px; }
/* brilho que atravessa o botão (ref. Império · avShine) */
.btn--shine::before { content: ""; position: absolute; z-index: -1; top: -120%; left: 0; width: 28%; height: 340%; transform: translateX(-215%) rotate(24deg); will-change: transform; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: shine 3.6s ease-in-out infinite; }
@keyframes shine { 0%, 48% { transform: translateX(-215%) rotate(24deg); } 76%, 100% { transform: translateX(480%) rotate(24deg); } }
/* anel pulsante (ref. VIP · pulseButton) */
.btn--ring { animation: ring 2s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(195,154,156,.55), var(--cta-sh); } 70% { box-shadow: 0 0 0 18px rgba(195,154,156,0), var(--cta-sh); } 100% { box-shadow: 0 0 0 0 rgba(195,154,156,0), var(--cta-sh); } }
/* pulsar (ref. Império · pulsar) */
.btn--pulse { animation: pulsar 2.4s ease-in-out infinite; }
@keyframes pulsar { 50% { transform: scale(1.045); } }

/* ---------- logo ---------- */
.logo { display: inline-flex; flex-direction: column; line-height: .92; letter-spacing: .02em; font-family: var(--fh); }
.logo b { font-size: 26px; font-weight: 800; letter-spacing: .07em; }
.logo span { font-size: 9.5px; letter-spacing: .36em; font-weight: 600; opacity: .85; margin-top: 2px; }
.logo--xs b { font-size: 12px; } .logo--xs span { font-size: 5px; letter-spacing: .3em; }
.logo--sm b { font-size: 17px; } .logo--sm span { font-size: 7px; }
.logo--md b { font-size: 22px; } .logo--md span { font-size: 8px; }
.logo--lg b { font-size: 38px; } .logo--lg span { font-size: 12.5px; }


/* logo oficial: máscara do arquivo da marca, herda a cor (currentColor ou --logo-fill) */
.logo { position: relative; }
.logo > * { visibility: hidden; }
.logo::before { content: ""; position: absolute; inset: 0; background: var(--logo-fill, currentColor); -webkit-mask: url("../../img/brand/nl-logo-400.webp") center / contain no-repeat; mask: url("../../img/brand/nl-logo-400.webp") center / contain no-repeat; }
.nl-icon { display: inline-block; width: 1em; height: 1.03em; background: var(--logo-fill, currentColor); -webkit-mask: url("../../img/brand/nl-icone-96.webp") center / contain no-repeat; mask: url("../../img/brand/nl-icone-96.webp") center / contain no-repeat; vertical-align: middle; }

/* ---------- fotos ---------- */
.ph { position: relative; margin: 0; overflow: hidden; background: rgba(195,154,156,.14); }
.ph::before { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; font: 600 12px/1.4 system-ui, sans-serif; color: rgba(137,99,107,.8); }
.ph img { position: relative; width: 100%; height: 100%; object-fit: cover; }

/* ---------- reveal no scroll (ref. casemaestro lp-rise / Framer fadeUp) ---------- */
.rv { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
.no-js .rv { opacity: 1; transform: none; }

/* =====================================================================
   GRÁFICOS (graficos.py)
   ===================================================================== */
.g-card { margin: 0; background: var(--g-card); border: 1px solid var(--g-line); border-radius: var(--r); padding: 18px 18px 14px; color: var(--g-ink); }
.g-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; }
.g-head em { font-style: italic; text-transform: none; letter-spacing: .02em; font-weight: 400; color: var(--g-mut); font-size: 12.5px; }
.g-foot { font-size: 13px; color: var(--g-mut); margin: 10px 0 0; }
.g-legal { font-size: 12px; color: var(--g-mut); margin-top: 14px; }

/* desenho de linhas (stroke) ao entrar (ref. lp-draw) */
.g-draw { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.8s cubic-bezier(.4,.1,.2,1) .2s; }
.g-draw--late { transition-delay: 1.1s; }
.in .g-draw, .g-draw.in { stroke-dashoffset: 0; }
.g-pop { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; transition: opacity .5s 1s, transform .5s 1s cubic-bezier(.3,1.6,.5,1); }
.g-pop--late { transition-delay: 1.9s; }
.in .g-pop { opacity: 1; transform: none; }

/* teto da agenda */
.g-teto svg { width: 100%; height: auto; display: block; overflow: visible; }
.g-grid line { stroke: var(--g-line); stroke-width: 1; }
.g-axis { stroke: var(--g-mut); stroke-width: 1.2; opacity: .6; }
.g-lbl { fill: var(--g-mut); font-size: 12px; font-family: var(--fb); }
.g-lbl--lim { fill: var(--g-mut); font-style: italic; }
.g-limit { stroke: var(--g-mut); stroke-width: 1.4; stroke-dasharray: 6 6; }
.g-line { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.g-line--a { stroke: var(--g-mut); }
.g-line--b { stroke: var(--g-acc); stroke-width: 4.5; }
.g-area { opacity: 0; transition: opacity 1s 1.6s; }
.in .g-area { opacity: 1; }
.g-dot { fill: var(--g-acc); stroke: var(--g-card); stroke-width: 3; }
.g-tip { fill: var(--g-acc); }
.g-tipt { fill: var(--g-card); font-size: 13px; font-weight: 700; font-family: var(--fb); }
.g-end { font-size: 13px; font-weight: 700; font-family: var(--fb); }
.g-end--b { fill: var(--g-acc); } .g-end--a { fill: var(--g-mut); }
.g-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--g-mut); margin-top: 6px; }
.lg::before { content: ""; display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; background: var(--g-mut); }
.lg--b::before { background: var(--g-acc); } .lg--l::before { background: repeating-linear-gradient(90deg, var(--g-mut) 0 4px, transparent 4px 7px); }

/* matriz de pontos */
.g-vol__cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: end; text-align: center; }
.g-vol__cols b { display: block; font-size: 18px; margin-top: 12px; }
.g-vol__cols span { display: block; font-size: 13px; color: var(--g-mut); }
.g-vol__eq { font-size: 40px; font-weight: 300; color: var(--g-mut); align-self: center; }
.g-vol__grid { display: grid; gap: 3px; margin: 0 auto; }
.g-vol__grid--s { grid-template-columns: repeat(10, 1fr); max-width: 210px; }
.g-vol__grid--b { grid-template-columns: repeat(5, 1fr); max-width: 210px; gap: 6px; }
.g-vol__grid i { aspect-ratio: 1; border-radius: 3px; background: var(--g-mut); opacity: 0; transform: scale(.3); transition: opacity .3s, transform .3s; transition-delay: calc(var(--i) * 12ms); }
.g-vol__grid--b i { background: var(--g-acc); border-radius: 7px; transition-delay: calc(400ms + var(--i) * 12ms); }
.in .g-vol__grid i { opacity: .55; transform: none; }
.in .g-vol__grid--b i { opacity: 1; }

/* barras */
.g-bar { display: grid; grid-template-columns: 150px 1fr 54px; gap: 12px; align-items: center; padding: 8px 0; font-size: 14px; }
.g-bar div { height: 12px; border-radius: 99px; background: rgba(137,99,107,.18); background: color-mix(in srgb, var(--g-mut) 18%, transparent); overflow: hidden; }
.g-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--g-mut); transition: width 1.2s cubic-bezier(.3,.8,.2,1); transition-delay: calc(var(--i) * 160ms); }
.g-bar--hi i { background: var(--g-acc); }
.g-bar--hi span, .g-bar--hi b { color: var(--g-acc); font-weight: 700; }
.in .g-bar i { width: var(--w); }
.g-bar b { text-align: right; font-variant-numeric: tabular-nums; }

/* hub / órbita (ref. casemaestro) */
.g-hub { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto; color: var(--g-ink); }
.g-hub__ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid var(--g-line); }
.g-hub__ring.r1 { width: 100%; height: 100%; } .g-hub__ring.r2 { width: 70%; height: 70%; } .g-hub__ring.r3 { width: 40%; height: 40%; background: radial-gradient(circle, rgba(195,154,156,.22), transparent 70%); background: radial-gradient(circle, color-mix(in srgb, var(--g-acc2) 22%, transparent), transparent 70%); }
.g-hub__radar { position: absolute; inset: 0; margin: auto; width: 22%; height: 22%; border-radius: 50%; border: 2px solid var(--g-acc2); animation: radar 3.2s ease-out infinite; }
.g-hub__radar.d2 { animation-delay: 1.6s; }
@keyframes radar { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } }
.g-hub__core { position: absolute; inset: 0; margin: auto; width: 22%; height: 22%; border-radius: 50%; background: var(--g-acc); color: var(--creme); display: grid; place-items: center; box-shadow: 0 10px 40px -10px var(--g-acc); }
.g-node { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translate(-50%, -50%) rotate(var(--a)) translate(min(42vw, 185px)) rotate(calc(-1 * var(--a))); opacity: 0; transition: opacity .6s calc(var(--i) * 120ms); }
.in .g-node { opacity: 1; }
.g-node .ic { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--g-card); border: 1px solid var(--g-line); color: var(--g-acc); box-shadow: 0 6px 18px -8px rgba(0,0,0,.25); animation: nodehl 6s infinite; animation-delay: calc(var(--i) * 1s); }
@keyframes nodehl { 0%, 14%, 100% { transform: scale(1); } 5%, 9% { transform: scale(1.16); background: var(--g-acc); color: var(--creme); } }
.g-node em { font-style: normal; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* app / dashboard (ref. casemaestro screenshots) */
.g-app { position: relative; border-radius: 14px; background: var(--g-card); border: 1px solid var(--g-line); box-shadow: 0 40px 80px -40px rgba(28,7,16,.55); color: var(--g-ink); text-align: left; font-family: var(--fb); }
.g-app__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--g-line); font-size: 11.5px; color: var(--g-mut); }
.g-app__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--g-line); }
.g-app__bar span { margin-left: 8px; font-family: var(--fm); }
.g-app__bar em { margin-left: auto; font-style: italic; }
.g-app__body { display: grid; grid-template-columns: 170px 1fr; min-height: 300px; }
.g-app__side { border-right: 1px solid var(--g-line); padding: 14px 10px; }
.g-app__side .logo { margin: 0 6px 14px; color: var(--g-acc); }
.g-app__side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.g-app__side li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; color: var(--g-mut); }
.g-app__side li.on { background: rgba(73,15,27,.1); background: color-mix(in srgb, var(--g-acc) 10%, transparent); color: var(--g-acc); font-weight: 600; }
.g-app__main { padding: 16px 18px; }
.g-app__date { font-size: 12px; color: var(--g-mut); margin: 0; }
.g-app__main h4, .g-app__h { font-size: 20px; margin: 2px 0 12px; font-family: var(--fb); font-weight: 700; letter-spacing: -.01em; }
.g-app__row { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 10px; }
.g-app__card { border: 1px solid var(--g-line); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.g-app__card b { font-size: 15px; }
.g-app__card span { color: var(--g-mut); }
.g-app__lbl { font-size: 10.5px !important; letter-spacing: .1em; text-transform: uppercase; }
.g-app__ring { align-items: center; text-align: center; position: relative; }
.g-app__ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.g-app__ring circle { fill: none; stroke: var(--g-line); stroke-width: 7; }
.g-app__ring .g-ring { stroke: var(--g-acc); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s .4s; }
.in .g-app__ring .g-ring { stroke-dashoffset: 20; }
.g-app__ring b { position: absolute; top: 31px; left: 0; right: 0; font-size: 14px; }
.g-spark { width: 100%; height: 34px; margin-top: 4px; }
.g-spark path { fill: none; stroke: var(--g-acc); stroke-width: 2.5; stroke-linecap: round; }
.g-app__steps { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; font-size: 13px; }
.g-app__steps li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: rgba(137,99,107,.07); background: color-mix(in srgb, var(--g-mut) 7%, transparent); }
.g-app__steps i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--g-mut); display: grid; place-items: center; font-style: normal; font-size: 11px; }
.g-app__steps li.done i { background: var(--g-acc); border-color: var(--g-acc); color: var(--creme); }
.g-app__steps em { font-style: normal; color: var(--g-mut); font-family: var(--fm); font-size: 11.5px; }
.g-chip { position: absolute; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--g-card); border: 1px solid var(--g-line); box-shadow: 0 18px 40px -16px rgba(28,7,16,.5); font-size: 12px; animation: bob 5s ease-in-out infinite; z-index: 2; }
.g-chip .ic { color: var(--creme); background: var(--g-acc); border-radius: 8px; padding: 6px; width: 30px; height: 30px; }
.g-chip b { display: block; font-size: 13px; }
.g-chip span { color: var(--g-mut); }
.g-chip--1 { left: -28px; top: 36%; }
.g-chip--2 { right: -26px; bottom: 16%; animation-delay: -2.5s; }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* documento sendo escrito (ref. mentory · dapp) */
.g-doc { border-radius: 10px; background: var(--creme-2); color: #2b1a1d; box-shadow: 0 40px 80px -40px rgba(28,7,16,.6); border: 1px solid rgba(73,15,27,.12); text-align: left; font-family: var(--fb); overflow: hidden; }
.g-doc__bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(73,15,27,.1); font-size: 12px; color: var(--malva); }
.g-doc__bar .logo { color: var(--vinho); }
.g-doc__live { margin-left: auto; font-style: normal; color: var(--vinho-claro); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.g-doc__body { display: grid; grid-template-columns: 150px 1fr; }
.g-doc__toc { list-style: none; margin: 0; padding: 16px 12px; border-right: 1px solid rgba(73,15,27,.1); display: grid; gap: 4px; align-content: start; font-size: 13px; color: var(--malva); }
.g-doc__toc li { padding: 6px 8px; border-radius: 6px; } .g-doc__toc li.on { background: rgba(73,15,27,.07); color: var(--vinho); font-weight: 600; }
.g-doc__toc em { font-style: normal; font-size: 11px; margin-right: 8px; opacity: 1; color: var(--g-mut); } .g-doc__toc li.on em { color: inherit; }
.g-doc__page { padding: 18px 22px; }
.g-doc__k { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--malva); margin: 0; }
.g-doc__page h4, .g-doc__h { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 28px; margin: 4px 0 12px; color: var(--vinho); }
.g-doc__f { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 9px 0; border-top: 1px dashed rgba(73,15,27,.16); font-size: 13.5px; }
.g-doc__f span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--malva); padding-top: 3px; }
.g-doc__f p { margin: 0; min-height: 1.4em; }
.g-caret { display: inline-block; width: 1.5px; height: 1em; background: var(--vinho); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
.g-doc__btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.g-doc__btns span { padding: 9px 14px; border: 1px solid rgba(73,15,27,.2); }
.g-doc__btns .on { background: var(--vinho); color: var(--creme); border-color: var(--vinho); }
.g-doc__prog { height: 3px; background: rgba(73,15,27,.1); margin-top: 14px; }
.g-doc__prog i { display: block; height: 100%; width: 100%; background: var(--vinho); transform: scaleX(0); transform-origin: left; transition: transform 6s linear .5s; }
.in .g-doc__prog i { transform: scaleX(1); }

/* notificações (ref. Maré · "venda aprovada" → aqui: entregas do seu sábado) */
.g-notifs { display: grid; gap: 8px; width: min(100%, 360px); }
.g-notif { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(28,7,16,.94); color: var(--creme); box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); opacity: 0; transform: translateY(14px) scale(.96); transition: all .55s cubic-bezier(.3,1.4,.5,1); transition-delay: calc(var(--i) * 260ms + 200ms); font-size: 12.5px; }
.in .g-notif, .g-notifs.in .g-notif { opacity: 1; transform: none; }
.g-notif__ic { width: 36px; height: 36px; border-radius: 9px; background: var(--vinho); color: var(--rose-2); display: grid; place-items: center; font-size: 19px; }
.g-notif b { display: block; font-size: 13px; }
.g-notif span { opacity: .75; }
.g-notif em { font-style: normal; font-size: 11px; opacity: .6; align-self: start; }

/* conversa */
.g-chat { width: min(100%, 360px); border-radius: 22px; overflow: hidden; background: #EFE6DC; box-shadow: 0 30px 60px -30px rgba(28,7,16,.6); font-family: var(--fb); text-align: left; color: #2b1a1d; }
.g-chat__head { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: var(--vinho); color: var(--creme); }
.g-chat__av { width: 34px; height: 34px; border-radius: 50%; background: var(--rose); color: var(--vinho); display: grid; place-items: center; font-weight: 700; }
.g-chat__head b { display: block; font-size: 14px; } .g-chat__head span { font-size: 11px; opacity: .7; }
.g-chat__body { padding: 14px; display: grid; gap: 8px; min-height: 220px; align-content: end; }
.g-msg { max-width: 82%; padding: 8px 10px 4px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; opacity: 0; transform: translateY(10px); transition: all .5s; transition-delay: calc(var(--i) * 700ms + 300ms); }
.in .g-msg { opacity: 1; transform: none; }
.g-msg p { margin: 0; } .g-msg em { display: block; text-align: right; font-style: normal; font-size: 10px; opacity: .78; }
.g-msg--me { justify-self: end; background: #F7E1E2; border-top-right-radius: 3px; }
.g-msg--you { justify-self: start; background: #fff; border-top-left-radius: 3px; }

/* ingresso (ref. VIP · bilhete) */
.g-ticket { display: grid; grid-template-columns: 110px 1fr 92px; width: min(100%, 520px); min-height: 190px; border-radius: 14px; background: linear-gradient(135deg, var(--vinho-2), var(--vinho-4)); color: var(--creme); box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); position: relative; overflow: hidden; font-family: var(--fb); text-align: left; }
.g-ticket::before { content: "LUCRO"; position: absolute; right: 70px; bottom: -36px; font: 900 140px/1 var(--fb); color: rgba(195,154,156,.08); letter-spacing: -.04em; pointer-events: none; }
.g-ticket__ph { height: 100%; filter: grayscale(.2) sepia(.15); }
.g-ticket__main { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.g-ticket__k { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--rose); }
.g-ticket__main .logo { color: var(--creme); }
.g-ticket dl { display: flex; gap: 16px; margin: 4px 0 0; }
.g-ticket dt { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.g-ticket dd { margin: 0; font-weight: 700; font-size: 15px; }
.g-ticket__price { margin-top: auto; font-weight: 800; font-size: 22px; color: var(--rose-2); }
.g-ticket__stub { border-left: 2px dashed rgba(242,234,224,.3); padding: 14px 10px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; background: var(--creme); color: var(--vinho); }
.g-ticket__stub::before, .g-ticket__stub::after { content: ""; position: absolute; right: 80px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); }
.g-ticket__stub::before { top: -11px; } .g-ticket__stub::after { bottom: -11px; }
.g-barcode { width: 70px; height: 70px; fill: var(--vinho); }
.g-ticket__stub span { font-size: 9.5px; font-family: var(--fm); }
.g-ticket__stub b { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

/* kit (ref. Maré/Império/VIP · stack de produto) */
.g-kit { position: relative; width: min(100%, 640px); aspect-ratio: 16/10.5; margin: 0 auto; }
.g-kit__laptop { position: absolute; left: 10%; top: 4%; width: 74%; }
.g-kit__screen { position: relative; aspect-ratio: 16/10; border: 9px solid #1a0b10; border-bottom-width: 12px; border-radius: 12px 12px 0 0; background: #1a0b10; overflow: hidden; }
.g-kit__screen .ph { height: 100%; }
.g-kit__ov { position: absolute; inset: auto 0 0 0; padding: 14px; background: linear-gradient(transparent, rgba(28,7,16,.9)); color: var(--creme); display: flex; justify-content: space-between; align-items: end; font-size: 11px; letter-spacing: .14em; }
.g-kit__base { height: 12px; margin: 0 -7%; border-radius: 0 0 14px 14px; background: linear-gradient(#cfc4bd, #9b8d86); }
.g-kit__phone { position: absolute; right: 2%; bottom: 4%; width: 21%; aspect-ratio: 9/19; border-radius: 20px; border: 5px solid #1a0b10; background: #EFE6DC; overflow: hidden; box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); }
.g-kit__notch { width: 40%; height: 9px; margin: 3px auto 0; border-radius: 99px; background: #1a0b10; }
.g-kit__wa { padding: 6px; display: grid; gap: 5px; font-size: 7.5px; color: #2b1a1d; }
.g-kit__wa b { background: var(--vinho); color: var(--creme); padding: 5px; border-radius: 5px; font-size: 7.5px; }
.g-kit__wa span { background: #F7E1E2; padding: 5px; border-radius: 6px; }
.g-kit__wa i { height: 18px; border-radius: 6px; background: #fff; } .g-kit__wa i.s { width: 60%; justify-self: end; background: #F7E1E2; }
.g-kit__tablet { position: absolute; left: 0; bottom: 2%; width: 30%; aspect-ratio: 3/4; border-radius: 14px; border: 6px solid #1a0b10; background: var(--creme-2); box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); transform: rotate(-6deg); }
.g-kit__doc { padding: 12%; display: grid; gap: 6px; }
.g-kit__doc em { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(11px, 2vw, 16px); color: var(--vinho); }
.g-kit__doc i { height: 5px; border-radius: 3px; background: rgba(73,15,27,.18); } .g-kit__doc i.s { width: 60%; }
.g-kit__cards { position: absolute; left: 26%; right: 22%; bottom: -6%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.g-kit__card { aspect-ratio: 3/4; border-radius: 8px; padding: 8px 7px; background: linear-gradient(160deg, var(--vinho-claro), var(--vinho-3)); color: var(--creme); display: flex; flex-direction: column; gap: 4px; box-shadow: 0 12px 24px -10px rgba(0,0,0,.6); transform: rotate(calc(-6deg + var(--i) * 4deg)) translateY(calc(var(--i) * -3px)); font-size: clamp(7px, 1.3vw, 10.5px); line-height: 1.2; }
.g-kit__card .ic { width: 16px; height: 16px; color: var(--rose-2); }
.g-kit__card b { font-size: 1.08em; } .g-kit__card span { opacity: .75; }

/* medalhas (ref. Launchpad · gamificação) */
.g-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 22px; }
.g-badge { position: relative; width: 112px; text-align: center; opacity: 0; transform: translateY(18px) scale(.9); transition: all .6s cubic-bezier(.3,1.5,.5,1); transition-delay: calc(var(--i) * 140ms); }
.in .g-badge, .g-badges.in .g-badge { opacity: 1; transform: none; }
.g-badge > svg { width: 92px; height: 103px; display: block; margin: 0 auto; filter: drop-shadow(0 12px 18px rgba(28,7,16,.35)); }
.g-badge__ic { position: absolute; left: 0; right: 0; top: 36px; margin: auto; color: #fff; display: flex; justify-content: center; }
.g-badge__ic svg { width: 30px; height: 30px; }
.g-badge b { display: block; margin-top: 8px; font-size: 14px; }
.g-badge em { font-style: normal; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--g-mut); }

/* régua do dia */
.g-track { position: relative; padding-top: 6px; }
.g-track__line { position: absolute; left: 6%; right: 6%; top: 15px; height: 3px; background: var(--g-line); border-radius: 3px; }
.g-track__line i { display: block; height: 100%; width: 0; background: var(--g-acc); border-radius: inherit; transition: width 2.4s cubic-bezier(.4,.1,.2,1) .2s; }
.in .g-track__line i { width: 100%; }
.g-track ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); text-align: center; position: relative; }
.g-track li i { display: block; width: 20px; height: 20px; margin: 0 auto 10px; border-radius: 50%; background: var(--g-card); border: 3px solid var(--g-line); transition: all .4s; transition-delay: calc(var(--i) * 400ms + 200ms); }
.g-track.in li i, .in .g-track li i { border-color: var(--g-acc); background: var(--g-acc); box-shadow: 0 0 0 6px rgba(73,15,27,.18); box-shadow: 0 0 0 6px color-mix(in srgb, var(--g-acc) 18%, transparent); }
.g-track b { display: block; font-size: 15px; }
.g-track span { font-size: 12.5px; color: var(--g-mut); }

/* setas à mão */
.g-handarrow { width: 110px; height: 82px; color: var(--g-acc2); overflow: visible; }

/* prova */
.g-cases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.g-case { border: 1px solid var(--g-line); border-radius: var(--r); overflow: hidden; background: var(--g-card); }
.g-case__ph { aspect-ratio: 4/5; }
.g-case__ph.arch { border-radius: 999px 999px 0 0; margin: 12px 12px 0; }
.g-case__b { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.g-case__n { font-size: 22px; color: var(--g-acc); }
.g-case__l { font-size: 13px; color: var(--g-mut); line-height: 1.35; min-height: 2.7em; }
.g-case__who { font-weight: 700; font-size: 14px; margin-top: 8px; }
.g-case__area { font-size: 12px; color: var(--g-mut); }
.g-prints { columns: 3 220px; column-gap: 14px; }
.g-print { break-inside: avoid; margin-bottom: 14px; border-radius: 10px; border: 1px solid var(--g-line); background: none; }
.g-print img { height: auto; object-fit: contain; }
.g-print::before { display: none; }
.g-avatars { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; color: var(--g-mut); }
.g-avatars__row { display: flex; }
.g-av { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -10px; }
.g-av:first-child { margin-left: 0; }

/* faixa rolante (ref. lp-slide / marquee) */
.g-mq { overflow: hidden; white-space: nowrap; }
.g-mq__track { display: inline-flex; gap: 28px; align-items: center; padding: 14px 0; animation: mq 38s linear infinite; }
.g-mq__sep { opacity: .5; }
@keyframes mq { to { transform: translateX(-50%); } }

/* assinatura */
.g-sign { font-family: "Allura", "Cormorant Garamond", cursive; font-size: 40px; line-height: 1; color: var(--g-acc); }

/* contagem em caixas */
.cdb { display: inline-grid; grid-template-columns: repeat(4, minmax(56px, 1fr)); gap: 8px; }
.cdb div { border-radius: 10px; padding: 10px 6px 8px; text-align: center; }
.cdb b { display: block; font-size: 28px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cdb span { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; opacity: .86; }

/* selos */
.g-seals { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; padding: 0; margin: 16px 0 0; font-size: 12.5px; color: var(--g-mut); }
.g-seals li { display: inline-flex; align-items: center; gap: 6px; }
.g-pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0 0; }
.g-pay span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 4px 8px; border-radius: 5px; border: 1px solid var(--g-line); color: var(--g-mut); }
.g-quote { width: 46px; height: 34px; color: var(--g-acc2); }

/* rodapé e CTA flutuante */
.footer { padding: 44px 0 120px; text-align: center; font-size: 13px; }
.footer .logo { margin-bottom: 14px; }
.footer .disclaimer { max-width: 700px; margin: 12px auto 0; opacity: .7; }
.float-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 16px; max-width: 520px; margin: 0 auto; background: var(--vinho-3); color: var(--creme); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.float-cta[hidden] { display: none; }
.float-cta b { display: block; font-size: 20px; line-height: 1; }
.float-cta > div span { font-size: 12px; opacity: .7; }

@media (max-width: 860px) {
  .g-cases { grid-template-columns: repeat(2, 1fr); }
  .g-app__body { grid-template-columns: 1fr; } .g-app__side { display: none; }
  .g-app__row { grid-template-columns: 1fr 1fr; } .g-app__ring { grid-row: span 2; }
  .g-chip--1 { left: 8px; top: auto; bottom: -26px; } .g-chip--2 { display: none; }
  .g-doc__body { grid-template-columns: 1fr; } .g-doc__toc { display: none; }
  .g-track ol { grid-template-columns: repeat(3, 1fr); row-gap: 18px; } .g-track__line { display: none; }
}
@media (max-width: 560px) {
  .w { padding: 0 16px; }
  .g-vol__cols { grid-template-columns: 1fr; } .g-vol__eq { display: none; }
  .g-bar { grid-template-columns: 112px 1fr 44px; font-size: 13px; }
  .g-ticket { grid-template-columns: 1fr 84px; }
  .g-ticket::before { display: none; } .g-ticket__ph { display: none; } .g-ticket__stub::before, .g-ticket__stub::after { right: 73px; }
  .g-app__row { grid-template-columns: 1fr; } .g-app__ring { grid-row: auto; flex-direction: row; text-align: left; } .g-app__ring b { position: static; }
  .g-cases { grid-template-columns: 1fr 1fr; gap: 10px; } .g-case__n { font-size: 18px; }
  .g-node em { font-size: 11px; } .g-node .ic { width: 34px; height: 34px; padding: 8px; }
  .cdb b { font-size: 22px; }
}

/* sem JavaScript: gráficos aparecem no estado final */
.no-js .g-draw { stroke-dashoffset: 0; }
.no-js .g-pop, .no-js .g-area, .no-js .g-node, .no-js .g-notif, .no-js .g-msg, .no-js .g-badge { opacity: 1; transform: none; }
.no-js .g-vol__grid i { opacity: .6; transform: none; }
.no-js .g-vol__grid--b i { opacity: 1; }
.no-js .g-bar i { width: var(--w); }
.no-js .g-track__line i { width: 100%; }
.no-js .g-app__ring .g-ring { stroke-dashoffset: 20; }

/* contraste AA (Lighthouse): textos secundários dos gráficos puxados para a cor do texto */
.g-head em, .g-legend, .g-foot, .g-legal, .g-case__l, .g-case__area, .g-track span, .g-badge em, .g-app__date, .g-app__card span, .g-app__steps em, .g-app__bar, .g-vol__cols span, .g-seals, .g-pay span, .g-avatars { color: color-mix(in srgb, var(--g-mut) 55%, var(--g-ink)); }
.g-lbl, .g-lbl--lim { fill: color-mix(in srgb, var(--g-mut) 55%, var(--g-ink)); }

/* rede de proteção (dobráveis de 280px, ex.: Galaxy Fold fechado): brilhos e enfeites que passam da borda
   não criam rolagem lateral. "clip" não cria área de rolagem, então sticky e sombras verticais seguem iguais. */
.st main > section, .st main > header, .st main > div > section, .st main > div > header { overflow-x: clip; }

/* contagem regressiva: até o main.js ligar (classe .is-live), mostra a data do evento, nunca "00 00 00 00"
   (quem não roda JS, prévias de link e robôs viam um relógio zerado) */
[data-countdown-boxes] .cdb__fb, [data-countdown-boxes] .cd-fb { display: none; }
.cdb[data-countdown-boxes] { position: relative; }
[data-countdown-boxes]:not(.is-live) .cdb__fb { display: grid; place-items: center; position: absolute; inset: 0; font-weight: 700; text-align: center; letter-spacing: .02em; }
[data-countdown-boxes]:not(.is-live) > div { visibility: hidden; }
[data-countdown-boxes]:not(.is-live) .cd-fb { display: inline; }
[data-countdown-boxes]:not(.is-live) .cd-live { display: none; }

/* Deep Audit, em todos os layouts: ponte depois dos sintomas e frase-síntese depois da tabela */
.pain-close { margin-top: 22px; }
.mech-close { max-width: 760px; margin: 30px auto 0; text-align: center; font-size: clamp(19px, 2vw, 25px); line-height: 1.35; font-weight: 600; text-wrap: balance; }
.mech-close em { font-style: normal; color: var(--rose); }