/* RevolucionaT, the app (jonathan/SPEC.md section 6). Every class starts with "ja-", every token "--ja-", everything
   is scoped to .ja-root except the icon (.ja-icon*) and the keyword chip (.ja-kw), which the page may draw too.
   The host sets --ja-w / --ja-h on the mount; app.js writes --ja-spIcon. Fonts are declared here (urls relative to
   this file): Montserrat 800 / 900 (titles, numbers, his keywords), Inter 400 / 600 (text and UI).
   His world at night: deep plum, warm cream text, one magenta accent (his keyword bands). Light screens: 20 px side
   margins, an 8 px grid, one title, one central element, one button. No text under 13 px.
   Motion: transform, opacity and stroke-dashoffset only. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("media/fonts/montserrat-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 900; font-display: swap; src: url("media/fonts/montserrat-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("media/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("media/fonts/inter-latin-600-normal.woff2") format("woff2"); }

/* ------------------------------------------------------------------ his keyword chip (Montserrat 900 caps, magenta over
   a 3 px #0B0710 stroke painted under the fill, on a plum tag) and the icon; both work inside and outside the app */
.ja-kw, .ja-root .ja-kw {
  display: inline-flex; align-items: center; justify-content: center; flex: none; height: 36px; padding: 1px 12px 0;
  border-radius: 10px; background: #24132A; box-shadow: inset 0 0 0 1px #3A2442;
  font: 900 16px/1 "Montserrat", "Arial Black", sans-serif; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap;
  color: #E23A76; -webkit-text-stroke: 3px #0B0710; paint-order: stroke fill; font-synthesis: none;
}
.ja-icon {
  position: relative; display: flex; align-items: center; justify-content: center; flex: none;
  width: var(--t, 56px); height: var(--t, 56px); overflow: hidden; border-radius: calc(var(--t, 56px) * .2237);
  background: radial-gradient(120% 100% at 50% 0%, #3A2442 0%, #24132A 40%, #160C19 80%);
  box-shadow: inset 0 0 0 max(.5px, calc(var(--t, 56px) * .008)) rgba(246, 239, 230, .12);
}
.ja-icon__k {
  display: block; padding: calc(var(--t, 56px) * .07) calc(var(--t, 56px) * .075) calc(var(--t, 56px) * .055);
  border-radius: calc(var(--t, 56px) * .09); background: #24132A; box-shadow: 0 0 0 max(.5px, calc(var(--t, 56px) * .01)) #3A2442;
  font: 900 calc(var(--t, 56px) * .24)/1 "Montserrat", "Arial Black", sans-serif; letter-spacing: .01em; color: #E23A76;
  -webkit-text-stroke: max(1px, calc(var(--t, 56px) * .03)) #0B0710; paint-order: stroke fill; font-synthesis: none;
}
.ja-icon--sm .ja-icon__k { padding: 0; background: none; box-shadow: none; font-size: calc(var(--t, 56px) * .3); -webkit-text-stroke: max(.8px, calc(var(--t, 56px) * .04)) #0B0710; }

/* ------------------------------------------------------------------ root */
.ja-root {
  --ja-night: #160C19; --ja-plum: #24132A; --ja-plum2: #2E1A35; --ja-line: #3A2442; --ja-cream: #F6EFE6; --ja-mute: #B3A6B5;
  --ja-veil: rgba(22, 12, 25, .72); --ja-magenta: #E23A76; --ja-mag-soft: rgba(226, 58, 118, .16); --ja-ink: #0B0710;
  --ja-ios: cubic-bezier(.32, .72, 0, 1); --ja-out: cubic-bezier(.22, 1, .36, 1);
  --ja-display: "Montserrat", "Arial Black", -apple-system, "Segoe UI", sans-serif;
  --ja-sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ja-hl: 1px;
  /* the vertical rhythm (852; .ja-short below for 780) */
  --ja-top: 60px; --ja-tab: 83px; --ja-ctaB: 99px; --ja-freeB: 48px;
  --ja-ringD: 224px; --ja-tileH: 196px; --ja-coHd: 300px; --ja-ingH: 44px;
  --ja-canH: 236px; --ja-canD: 96px; --ja-vpT: 24px; --ja-gsH: 86px; --ja-bk: 168px;
  position: relative; display: block; overflow: hidden; overflow: clip;
  width: var(--ja-w, 393px); height: var(--ja-h, 852px);
  background: var(--ja-night); color: var(--ja-cream);
  font: 400 15px/1.4 var(--ja-sans); letter-spacing: 0; text-align: left;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; font-kerning: normal;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  touch-action: pan-y; isolation: isolate; contain: layout paint style;
}
.ja-root.ja-short { --ja-top: 56px; --ja-ringD: 184px; --ja-tileH: 156px; --ja-coHd: 236px; --ja-ingH: 38px; --ja-canH: 224px; --ja-canD: 88px; --ja-vpT: 16px; --ja-gsH: 78px; --ja-bk: 140px; }
@media (min-resolution: 2dppx) { .ja-root { --ja-hl: .5px; } }
.ja-root :where(*), .ja-root :where(*)::before, .ja-root :where(*)::after { box-sizing: border-box; touch-action: pan-y; }
.ja-root :where(button) { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; }
.ja-root :where(h2, h3, p, ul, ol, li) { margin: 0; padding: 0; font: inherit; list-style: none; }
.ja-root :where(img, video, svg) { display: block; max-width: none; }
.ja-root :where(img) { -webkit-user-drag: none; }
.ja-root :where(b, strong) { font-weight: inherit; }
.ja-root :where(i, em) { font-style: normal; }
.ja-story { pointer-events: none; }
.ja-root :focus { outline: none; }
.ja-root :focus-visible { outline: 2px solid var(--ja-magenta); outline-offset: 3px; border-radius: 12px; }
.ja-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ glass, layers, chrome */
.ja-glass { position: absolute; inset: 0; overflow: hidden; background: var(--ja-night); }
.ja-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--ja-night); contain: layout style size; }
.ja-layer:not(.is-on):not(.is-leaving) { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.ja-layer.is-moving { box-shadow: -14px 0 38px -10px rgba(0, 0, 0, .6); }
.ja-l-start { z-index: 2; } .ja-l-guias { z-index: 3; } .ja-l-carro { z-index: 4; } .ja-l-splash { z-index: 9; }
.ja-status { position: absolute; left: 0; right: 0; top: 0; height: 47px; z-index: 20; pointer-events: none; color: var(--ja-cream); }
.ja-status__t { position: absolute; left: 0; width: 132px; top: 15px; text-align: center; font: 600 17px/1 var(--ja-sans); letter-spacing: -.012em; font-variant-numeric: tabular-nums; }
.ja-status__r { position: absolute; right: 26px; top: 17px; display: flex; align-items: center; gap: 6px; }
.ja-homeind { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: rgba(246, 239, 230, .9); z-index: 20; pointer-events: none; }
.ja-full .ja-status, .ja-full .ja-homeind { display: none; }
.ja-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ja-tab); z-index: 5; display: flex; padding: 0 8px 34px; background: #1B0F1F; box-shadow: inset 0 var(--ja-hl) 0 var(--ja-line); }
.ja-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding-top: 7px; color: #85778A; font: 600 13px/1.1 var(--ja-sans); }
.ja-tab svg { width: 25px; height: 25px; }
.ja-tab.is-on { color: var(--ja-magenta); }
.ja-touch { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 21; pointer-events: none; opacity: 0; background: rgba(246, 239, 230, .22); box-shadow: 0 0 0 1.5px rgba(246, 239, 230, .9), 0 6px 18px rgba(0, 0, 0, .4); }
.ja-ripple { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 21; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1.5px rgba(246, 239, 230, .7); }

/* ------------------------------------------------------------------ shared parts */
.ja-scr { position: absolute; inset: 0; padding: var(--ja-top) 20px 0; }
.ja-ah { font: 900 26px/1.05 var(--ja-display); letter-spacing: -.01em; color: var(--ja-cream); }
.ja-big { font: 900 36px/1 var(--ja-display); letter-spacing: -.02em; color: var(--ja-cream); }
.ja-cue { font: 400 14px/1.4 var(--ja-sans); color: var(--ja-mute); }
.ja-ov { display: block; font: 800 13px/1.2 var(--ja-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ja-mute); }
.ja-card { position: relative; background: var(--ja-plum); border-radius: 18px; box-shadow: inset 0 0 0 var(--ja-hl) var(--ja-line); }
.ja-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ja-av { position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; background: var(--ja-line); box-shadow: 0 0 0 2px var(--ja-night), 0 0 0 3.5px var(--ja-magenta); }
.ja-vs { position: relative; display: block; overflow: hidden; background: var(--ja-plum2); }
.ja-vs__p, .ja-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ja-video { opacity: 0; transition: opacity .2s linear; pointer-events: none; }
.ja-vs.is-playing .ja-video { opacity: 1; }
.ja-src { display: inline-flex; align-items: center; gap: 6px; font: 400 13px/16px var(--ja-sans); color: var(--ja-mute); white-space: nowrap; }
.ja-src__ic { width: 13px; height: 13px; flex: none; color: var(--ja-magenta); }
.ja-draft { display: inline-flex; align-items: center; height: 18px; padding: 1px 6px 0; border-radius: 5px; box-shadow: inset 0 0 0 1px #6E5E73; font: 800 13px/1 var(--ja-display); letter-spacing: .06em; color: var(--ja-mute); white-space: nowrap; vertical-align: 1px; }
.ja-calc { display: inline-block; font: 400 13px/1 var(--ja-sans); color: #8E7F93; white-space: nowrap; }
.ja-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--ja-plum); box-shadow: inset 0 0 0 var(--ja-hl) var(--ja-line); font: 600 13px/1 var(--ja-sans); color: var(--ja-cream); white-space: nowrap; }
.ja-chip svg { width: 14px; height: 14px; flex: none; }
.ja-ic-check { width: 14px; height: 14px; }
.ja-ic-chev { width: 16px; height: 16px; flex: none; color: #85778A; }
.ja-brand { display: flex; align-items: center; gap: 10px; height: 28px; font: 900 17px/1 var(--ja-display); letter-spacing: -.005em; }
.ja-wm b { color: var(--ja-magenta); }
/* the pill: magenta is the action (cream Montserrat 800 at 19 px: large text, AA), plum is waiting */
.ja-pill { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; border-radius: 28px; background: var(--ja-magenta); color: var(--ja-cream); font: 800 19px/1 var(--ja-display); letter-spacing: -.005em; box-shadow: 0 16px 30px -18px rgba(226, 58, 118, .85); transition: transform .16s var(--ja-out), background-color .22s linear, color .22s linear, box-shadow .22s linear; }
.ja-pill svg { width: 18px; height: 18px; flex: none; }
.ja-pill.is-press, .ja-live .ja-pill:active { transform: scale(.97); }
.ja-pill.is-off { background: var(--ja-plum2); color: var(--ja-mute); box-shadow: none; }
.ja-story .ja-pill { transition: none; }
.ja-cta { position: absolute; left: 20px; right: 20px; bottom: var(--ja-ctaB); }
.ja-cta--free { bottom: var(--ja-freeB); }
.ja-ib { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ja-cream); background: rgba(36, 19, 42, .8); box-shadow: inset 0 0 0 var(--ja-hl) var(--ja-line); }
.ja-ib::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.ja-pulse { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: 0 0 0 0 rgba(226, 58, 118, .6); }
@keyframes ja-pulse { 0% { box-shadow: 0 0 0 0 rgba(226, 58, 118, .6); } 70% { box-shadow: 0 0 0 14px rgba(226, 58, 118, 0); } 100% { box-shadow: 0 0 0 0 rgba(226, 58, 118, 0); } }

/* ------------------------------------------------------------------ splash */
.ja-sp { position: absolute; inset: 0; }
.ja-sp__light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 46% at 50% 0%, rgba(246, 239, 230, .06) 0%, rgba(246, 239, 230, 0) 70%), radial-gradient(64% 30% at 50% 42%, rgba(226, 58, 118, .16) 0%, rgba(226, 58, 118, 0) 70%); }
.ja-sp__icon { position: absolute; left: 50%; top: var(--ja-spIcon, 280px); width: 112px; height: 112px; margin-left: -56px; }
.ja-sp__icon .ja-icon { box-shadow: inset 0 0 0 1px rgba(246, 239, 230, .12), 0 26px 48px -20px rgba(226, 58, 118, .55); }
.ja-sp__wm { position: absolute; left: 20px; right: 20px; top: calc(var(--ja-spIcon, 280px) + 144px); height: 46px; overflow: hidden; text-align: center; }
.ja-sp__wf { display: inline-block; font: 900 38px/46px var(--ja-display); letter-spacing: -.02em; color: var(--ja-cream); }
.ja-sp__by { position: absolute; left: 20px; right: 20px; top: calc(var(--ja-spIcon, 280px) + 206px); display: flex; align-items: center; justify-content: center; gap: 10px; font: 400 15px/20px var(--ja-sans); color: var(--ja-mute); }
.ja-sp__bar { position: absolute; left: 50%; bottom: 120px; width: 120px; height: 4px; margin-left: -60px; border-radius: 2px; background: var(--ja-line); overflow: hidden; }
.ja-sp__bar > i { position: absolute; inset: 0; border-radius: 2px; background: var(--ja-magenta); transform: scaleX(0); transform-origin: 0 50%; }

/* ------------------------------------------------------------------ start */
.ja-st__body { position: absolute; left: 20px; right: 20px; top: calc(var(--ja-top) + 40px); bottom: calc(var(--ja-freeB) + 72px); display: flex; flex-direction: column; justify-content: center; }
.ja-st__t { flex: none; }
.ja-st__grid { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.ja-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: var(--ja-tileH); padding: 18px; border-radius: 20px; background: var(--ja-plum); box-shadow: inset 0 0 0 var(--ja-hl) var(--ja-line); color: var(--ja-cream); transition: transform .16s var(--ja-out); }
.ja-tile__ring { position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 0 0 0 2px var(--ja-magenta); background: var(--ja-mag-soft); opacity: 0; }
.ja-tile__ic { position: relative; display: block; width: 36px; height: 36px; color: var(--ja-mute); }
.ja-tile__ic svg { width: 36px; height: 36px; }
.ja-tile.is-on .ja-tile__ic { color: var(--ja-magenta); }
.ja-tile__l { position: relative; font: 900 22px/1 var(--ja-display); letter-spacing: -.01em; }
.ja-tile__ck { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ja-magenta); color: var(--ja-cream); opacity: 0; }
.ja-tile.is-press, .ja-live .ja-tile:active { transform: scale(.97); }
.ja-st__plan { flex: none; margin-top: 36px; }
.ja-st__plan .ja-big { display: block; }
.ja-st__plan .ja-big em { color: var(--ja-magenta); }
.ja-mo { display: flex; gap: 6px; height: 8px; margin-top: 18px; }
.ja-mo > i { position: relative; flex: 1; border-radius: 4px; background: var(--ja-line); overflow: hidden; }
.ja-mo > i > i { position: absolute; inset: 0; border-radius: 4px; background: var(--ja-magenta); transform: scaleX(0); transform-origin: 0 50%; }
.ja-st__src { flex: none; margin-top: 14px; }

/* ------------------------------------------------------------------ hoy */
.ja-hy__top { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.ja-hy__body { position: absolute; left: 20px; right: 20px; top: calc(var(--ja-top) + 48px); bottom: calc(var(--ja-tab) + 12px); display: flex; flex-direction: column; justify-content: center; align-items: stretch; }
.ja-hy__ring { position: relative; flex: none; align-self: center; width: var(--ja-ringD); height: var(--ja-ringD); }
.ja-wr { display: block; width: 100%; height: 100%; }
.ja-wr__s { fill: none; stroke: var(--ja-line); stroke-width: 11; stroke-linecap: butt; }
.ja-wr__s--w1 { stroke: var(--ja-magenta); }
.ja-hy__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.ja-hy__w, .ja-hy__of { font: 600 15px/1.2 var(--ja-sans); color: var(--ja-mute); }
.ja-hy__n { font: 900 64px/1 var(--ja-display); letter-spacing: -.03em; color: var(--ja-cream); }
.ja-hy__of { display: flex; align-items: baseline; gap: 6px; }
.ja-hy__chips { position: relative; flex: none; display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.ja-hy__chips .ja-chip { transition: transform .16s var(--ja-out); }
.ja-hy__chips .ja-chip.is-press, .ja-live .ja-hy__chips .ja-chip:active { transform: scale(.95); }
.ja-hy__chips .ja-chip.is-on { background: var(--ja-mag-soft); box-shadow: inset 0 0 0 1.5px var(--ja-magenta); }
.ja-hy__src { position: relative; flex: none; margin-top: 10px; text-align: center; }
.ja-today { position: relative; flex: none; display: flex; align-items: center; gap: 14px; height: 72px; margin-top: 28px; padding: 0 16px 0 12px; text-align: left; transition: transform .16s var(--ja-out); }
.ja-today.is-press, .ja-live .ja-today:active { transform: scale(.98); }
.ja-today__ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--ja-magenta); color: var(--ja-cream); }
.ja-today__ic svg { width: 26px; height: 26px; }
.ja-today b { flex: 1; min-width: 0; font: 800 18px/1.1 var(--ja-display); color: var(--ja-cream); }
.ja-team { position: relative; flex: none; display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; padding: 14px 16px 14px 12px; background: transparent; }
.ja-team__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ja-team__l { font: 400 15px/1.35 var(--ja-sans); color: var(--ja-cream); }

/* ------------------------------------------------------------------ comer */
.ja-co { position: absolute; inset: 0; }
.ja-co__hd { position: absolute; left: 0; right: 0; top: 0; height: var(--ja-coHd); }
.ja-co__vs { position: absolute; inset: 0; }
.ja-co__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(22, 12, 25, .62) 0%, rgba(22, 12, 25, 0) 26%, rgba(22, 12, 25, 0) 64%, var(--ja-night) 100%); }
.ja-co__t { position: absolute; left: 20px; right: 20px; top: calc(var(--ja-coHd) - 18px); }
.ja-ing { position: absolute; left: 20px; right: 20px; top: calc(var(--ja-coHd) + 26px); }
.ja-ing__r { display: flex; align-items: center; gap: 12px; height: var(--ja-ingH); font: 600 15px/1.2 var(--ja-sans); color: var(--ja-cream); box-shadow: inset 0 calc(-1 * var(--ja-hl)) 0 var(--ja-line); }
.ja-ing__r:last-child { box-shadow: none; }
.ja-ck { position: relative; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #6E5E73; color: var(--ja-cream); }
.ja-ck__f { position: absolute; inset: 0; border-radius: 50%; background: var(--ja-magenta); transform: scale(0); }
.ja-ck svg { position: relative; width: 14px; height: 14px; opacity: 0; }
.ja-co__l { position: absolute; left: 20px; right: 20px; top: calc(var(--ja-coHd) + 38px + 5 * var(--ja-ingH)); font: 800 17px/1.25 var(--ja-display); color: var(--ja-cream); }
.ja-co__src { position: absolute; left: 20px; top: calc(var(--ja-coHd) + 66px + 5 * var(--ja-ingH)); }

/* ------------------------------------------------------------------ fuerza */
.ja-rule { margin-top: 20px; padding: 18px 20px 16px; }
.ja-rule__q { display: block; width: 28px; height: 22px; color: var(--ja-magenta); }
.ja-rule__t { margin-top: 10px; font: 800 20px/1.2 var(--ja-display); letter-spacing: -.01em; color: var(--ja-cream); }
.ja-rule .ja-src { margin-top: 12px; }
.ja-ses { margin-top: 16px; padding: 8px 16px 6px; }
.ja-ses__hd { display: flex; justify-content: flex-end; height: 26px; padding-top: 6px; }
.ja-ex { display: flex; align-items: center; gap: 14px; height: 64px; box-shadow: inset 0 calc(-1 * var(--ja-hl)) 0 var(--ja-line); }
.ja-ex:last-child { box-shadow: none; }
.ja-ex__n { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ja-plum2); font: 900 16px/1 var(--ja-display); color: var(--ja-cream); }
.ja-ex__n > i { position: absolute; inset: 0; border-radius: 50%; background: var(--ja-magenta); opacity: 0; }
.ja-ex__n > span { position: relative; }
.ja-ex b { flex: 1; min-width: 0; font: 600 15px/1.25 var(--ja-sans); color: var(--ja-cream); }
.ja-ex__s { flex: none; font: 900 17px/1 var(--ja-display); color: var(--ja-cream); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ super (the aisle, the signature) */
.ja-su__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; }
.ja-link { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 8px 0 14px; border-radius: 17px; background: var(--ja-plum); box-shadow: inset 0 0 0 var(--ja-hl) var(--ja-line); font: 600 13px/1 var(--ja-sans); color: var(--ja-cream); white-space: nowrap; }
.ja-link svg { width: 16px; height: 16px; color: var(--ja-mute); }
.ja-su__mid { position: absolute; left: 0; right: 0; top: calc(var(--ja-top) + 48px); bottom: calc(var(--ja-ctaB) + 76px); display: flex; flex-direction: column; justify-content: center; }
.ja-shelf { position: relative; flex: none; margin: 0 16px; height: calc(var(--ja-canH) + 12px); display: flex; gap: 10px; }
.ja-shelf__edge { position: absolute; left: -16px; right: -16px; top: var(--ja-canH); height: 12px; background: linear-gradient(180deg, var(--ja-cream) 0, var(--ja-cream) 2px, var(--ja-line) 2px, #2A1730 12px); box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .7); }
.ja-can { position: relative; flex: 1; min-width: 0; height: var(--ja-canH); }
.ja-can__f, .ja-can__b { position: absolute; inset: 0 0 8px; border-radius: 16px; overflow: hidden; background: var(--ja-plum); box-shadow: inset 0 0 0 var(--ja-hl) var(--ja-line); will-change: transform; }
.ja-can__b { visibility: hidden; box-shadow: inset 0 0 0 2px var(--ja-magenta); }
.ja-can__f { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 8px 12px; text-align: center; }
.ja-can__f::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 64%; background: radial-gradient(70% 60% at 50% 30%, rgba(246, 239, 230, .08), rgba(246, 239, 230, 0) 70%); pointer-events: none; }
.ja-can__art { position: relative; flex: none; width: var(--ja-canD); height: calc(var(--ja-canD) * 1.25); }
.ja-can__art svg { width: 100%; height: 100%; overflow: visible; }
.ja-can__n { position: relative; margin-top: 10px; font: 800 15px/1.1 var(--ja-display); letter-spacing: -.01em; color: var(--ja-cream); }
.ja-can__s { position: relative; margin-top: 4px; font: 400 13px/1.25 var(--ja-sans); color: var(--ja-mute); }
.ja-can__ic { position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; color: var(--ja-mute); }
.ja-can__ic svg { width: 22px; height: 22px; }
.ja-can__b { display: flex; flex-direction: column; }
.ja-vd { flex: none; display: flex; align-items: center; justify-content: center; gap: 4px; height: 36px; font: 600 13px/1 var(--ja-sans); white-space: nowrap; background: var(--ja-magenta); color: var(--ja-cream); }
.ja-vd svg { width: 13px; height: 13px; }
.ja-vd--real { background: var(--ja-cream); color: var(--ja-night); }
.ja-can__vs { flex: none; height: calc(((var(--ja-w, 393px) - 52px) / 3 - 4px) * 1.25); margin: 0 2px; background: var(--ja-plum2); }
.ja-can__bn { flex: 1; display: flex; align-items: center; justify-content: center; font: 800 15px/1 var(--ja-display); letter-spacing: -.01em; color: var(--ja-cream); }
.ja-can__vs .ja-vs__p, .ja-can__vs .ja-video { object-fit: cover; object-position: 50% 50%; }
.ja-can .ja-pulse { inset: 0 0 8px; border-radius: 16px; }
.ja-live .ja-can.is-hint .ja-pulse { opacity: 1; animation: ja-pulse 1.6s var(--ja-out) infinite; }
.ja-osrm .ja-can.is-hint .ja-pulse, .ja-rm .ja-can.is-hint .ja-pulse { animation: none; opacity: 1; box-shadow: 0 0 0 2px var(--ja-magenta); }
.ja-vp { position: relative; flex: none; margin: var(--ja-vpT) 20px 0; height: 132px; padding: 18px 20px 16px; }
.ja-vp__caret { position: absolute; left: 0; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 3px; background: var(--ja-plum); box-shadow: inset var(--ja-hl) var(--ja-hl) 0 var(--ja-line); transform: translate3d(60px, 0, 0) rotate(45deg); }
.ja-vp__hint, .ja-vp__v { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ja-vp__v { position: absolute; left: 20px; right: 20px; top: 18px; }
.ja-vp__hint .ja-kw { height: 44px; padding: 1px 14px 0; font-size: 22px; }
.ja-vp__t { font: 800 18px/1.25 var(--ja-display); letter-spacing: -.005em; color: var(--ja-cream); }
.ja-cbar { position: absolute; left: 20px; right: 20px; bottom: var(--ja-ctaB); display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 20px 0 16px; text-align: left; }
.ja-cbar__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ja-plum2); color: var(--ja-cream); }
.ja-cbar__ic svg { width: 24px; height: 24px; }
.ja-cbar.is-full .ja-cbar__ic { background: var(--ja-magenta); }
.ja-cbar__sl { flex: 1; display: flex; gap: 8px; }
.ja-cbar__sl > i { position: relative; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #6E5E73; }
.ja-cbar__sl > i > i { position: absolute; inset: 0; border-radius: 50%; background: var(--ja-magenta); transform: scale(0); }
.ja-cbar__n { flex: none; font: 900 22px/1 var(--ja-display); letter-spacing: -.01em; color: var(--ja-cream); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ guias */
.ja-gu__top { display: flex; align-items: center; gap: 12px; height: 40px; margin-left: -4px; }
.ja-gu__body { position: absolute; left: 20px; right: 20px; top: calc(var(--ja-top) + 48px); bottom: calc(var(--ja-ctaB) + 104px); display: flex; flex-direction: column; justify-content: center; }
.ja-gs { position: relative; flex: none; }
.ja-gs__row { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 8px; height: var(--ja-gsH); padding-bottom: 10px; }
.ja-gs__row::after { content: ""; position: absolute; left: -20px; right: -20px; bottom: 0; height: 10px; background: linear-gradient(180deg, var(--ja-cream) 0, var(--ja-cream) 2px, var(--ja-line) 2px, #2A1730 10px); box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .7); }
.ja-root .ja-gk { height: 40px; }
.ja-gk { transition: transform .16s var(--ja-out), box-shadow .2s linear; }
.ja-gk.is-press, .ja-live .ja-gk:active { transform: scale(.95); }
.ja-gk.is-on { box-shadow: inset 0 0 0 2px var(--ja-magenta); }
.ja-gu__d { position: relative; flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 24px; font: 400 15px/1.4 var(--ja-sans); color: var(--ja-cream); }
.ja-gc { position: absolute; left: 20px; right: 20px; bottom: var(--ja-ctaB); display: flex; align-items: center; gap: 14px; height: 88px; padding: 0 16px; }
.ja-gc__ic { flex: none; display: grid; place-items: center; width: 52px; height: 60px; border-radius: 10px; background: var(--ja-cream); color: var(--ja-night); }
.ja-gc__ic svg { width: 26px; height: 26px; }
.ja-gc__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ja-gc__k { font: 900 24px/1 var(--ja-display); letter-spacing: -.01em; color: var(--ja-cream); }

/* ------------------------------------------------------------------ carro (the signature overlay, T6) */
.ja-ca { position: absolute; inset: 0; text-align: center; }
.ja-ca__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 34% at 50% 30%, rgba(226, 58, 118, .2) 0%, rgba(226, 58, 118, 0) 72%); }
.ja-ca__x { position: absolute; right: 20px; top: 54px; }
.ja-ca__o { position: absolute; left: 72px; right: 72px; top: 54px; line-height: 40px; }
.ja-ca__col { position: absolute; left: 20px; right: 20px; top: calc(var(--ja-top) + 48px); bottom: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ja-bk { position: relative; flex: none; width: 240px; height: calc(var(--ja-bk) + 16px); }
.ja-bk__back, .ja-bk__front { position: absolute; left: 0; bottom: 0; width: 240px; height: 180px; overflow: visible; }
.ja-bk__can { position: absolute; left: 50%; bottom: 84px; width: 100px; height: 125px; margin-left: -50px; }
.ja-bk__can svg { width: 100%; height: 100%; overflow: visible; }
.ja-short .ja-bk__back, .ja-short .ja-bk__front { transform: scale(.86); transform-origin: 50% 100%; }
.ja-short .ja-bk__can { width: 88px; height: 110px; margin-left: -44px; bottom: 70px; }
.ja-ca__n { flex: none; margin-top: 20px; height: 36px; padding: 0 16px; font-size: 15px; }
.ja-ca__n svg { color: var(--ja-magenta); }
.ja-ca__st { flex: none; display: flex; justify-content: center; margin-top: 28px; }
.ja-stamp { display: inline-block; padding: 10px 18px 8px; border-radius: 14px; box-shadow: inset 0 0 0 3px var(--ja-magenta); font: 900 36px/1 var(--ja-display); letter-spacing: -.02em; color: var(--ja-magenta); transform: rotate(-3deg); }
.ja-ca__l { flex: none; margin-top: 28px; max-width: 320px; font: 800 22px/1.2 var(--ja-display); letter-spacing: -.01em; color: var(--ja-cream); text-wrap: balance; }
.ja-ca__src { flex: none; display: flex; justify-content: center; margin-top: 12px; }
.ja-short .ja-ca__n { margin-top: 12px; } .ja-short .ja-ca__st, .ja-short .ja-ca__l { margin-top: 20px; }