/* ==========================================================================
   JCF · Parado × Rodando
   Gramática: palco dividido. Duas colunas a página toda, a divisória é o menu.
   Esquerda = PARADO (noite, vermelho JCF). Direita = RODANDO (dia, aço).
   Não reestiliza o mecanismo do engine; só a marcação própria da página.
   ========================================================================== */

:root {
  --sc-canvas:     #0B0B0C;
  --sc-surface:    #151517;
  --sc-ink:        #F4F1EC;
  --sc-ink-soft:   #ABA7A0;
  --sc-accent:     #E3221C;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --sc-font-text:    "Archivo", system-ui, sans-serif;
  --sc-font-mono:    ui-monospace, "Cascadia Mono", "Consolas", monospace;
  --sc-shadow-color: 10 20% 3%;

  --jcf-red:      #E3221C;
  --jcf-red-text: #FF4A3F;     /* vermelho para TEXTO sobre fundo escuro (≥4.5:1) */
  --jcf-steel:    #9FB0BC;
  --g-l: #150E0D;              /* chão PARADO */
  --g-r: #0C1216;              /* chão RODANDO */
  --div-w: 92px;
  --bar-h: 58px;
  --collapse: 0;
  --clean: 0;
  --sc-r-sm: 4px; --sc-r-md: 8px; --sc-r-lg: 12px;
}

body { font-weight: 400; letter-spacing: 0; }
.sc-display { font-weight: 700; letter-spacing: -0.012em; line-height: 0.98; }
.sc-display--xl { font-size: clamp(3.2rem, 1.8rem + 6vw, 7rem); }
.sc-lede { line-height: 1.5; }
h3 { margin: 0; }
p { margin: 0; }

.jcf-skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  background: var(--sc-ink); color: var(--sc-canvas); padding: .6rem 1rem; border-radius: var(--sc-r-sm);
  transition: top var(--sc-d-fast) var(--sc-ease-out);
}
.jcf-skip:focus { top: 1rem; }

.jcf-kicker {
  font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: var(--sc-t-sm); color: var(--jcf-red-text);
}
.jcf-fine { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.jcf-fine a { color: var(--sc-ink); }

/* ------------------------------------------------------------- buttons -- */
.jcf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .8rem 1.35rem;
  font-family: var(--sc-font-display); font-weight: 700; font-size: 1.12rem;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: var(--sc-accent-ink); background: var(--jcf-red);
  border: 1px solid var(--jcf-red); border-radius: var(--sc-r-sm);
  text-decoration: none; cursor: pointer;
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / .18);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.jcf-btn:active { transform: translateY(1px) scale(.98); }
.jcf-btn[disabled] { opacity: .55; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .jcf-btn:hover { background: #C81B16; border-color: #C81B16; }
  .jcf-btn--ghost:hover, .jcf-btn--line:hover { background: rgb(255 255 255 / .06); }
}
.jcf-btn--ghost { background: color-mix(in oklab, var(--sc-canvas) 55%, transparent); color: var(--sc-ink); border-color: color-mix(in oklab, var(--sc-ink) 48%, transparent); box-shadow: none; }
.jcf-btn--line { background: transparent; color: var(--sc-ink); border-color: var(--jcf-red); box-shadow: none; }
.jcf-btn--xl { min-height: 60px; font-size: 1.4rem; padding: 1rem 2rem; }
.jcf-btn--sm { min-height: 40px; font-size: .98rem; padding: .5rem .95rem; }

/* ================================================================ HOME == */

/* ------------------------------------------------------ the divider ----- */
.jcf-divider {
  position: fixed; top: 0; bottom: 0; left: 50%; z-index: var(--sc-z-chrome);
  width: var(--div-w); margin-left: calc(var(--div-w) / -2);
  background: var(--sc-canvas);
  box-shadow: inset 1px 0 0 var(--sc-hairline), inset -1px 0 0 var(--sc-hairline), var(--sc-e3);
  transform: translate3d(calc(var(--collapse) * (var(--div-w) / 2 - 50vw)), 0, 0);
  will-change: transform;
}
.jcf-mark { position: absolute; top: 14px; left: 50%; translate: -50% 0; display: block; width: 60px; height: 60px; border-radius: 50%; }
.jcf-mark img { width: 100%; height: 100%; }

.jcf-side {
  position: absolute; top: 126px;
  font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .22em; font-size: .78rem; writing-mode: vertical-rl;
}
.jcf-side--l { left: 9px; color: var(--jcf-red-text); rotate: 180deg; }
.jcf-side--r { right: 9px; color: var(--jcf-steel); }

.jcf-trace { position: absolute; left: 0; top: 236px; bottom: 90px; width: 100%; height: calc(100% - 326px); overflow: visible; pointer-events: none; }
.jcf-trace path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.jcf-trace__line {
  stroke: color-mix(in oklab, var(--jcf-red-text) calc((1 - var(--clean)) * 100%), var(--sc-ink));
  stroke-width: 1.6;
}
.jcf-trace__ghost { stroke: color-mix(in oklab, var(--sc-ink) 9%, transparent); stroke-width: 1; }

.jcf-codes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.jcf-codes li {
  position: absolute; left: 50%; translate: -50% 0;
  font: 600 10.5px/1 var(--sc-font-mono); letter-spacing: .02em; white-space: nowrap;
  color: var(--sc-ink); background: var(--sc-canvas);
  padding: 5px 7px; border-radius: var(--sc-r-sm);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--jcf-red-text) 55%, transparent), var(--sc-e1);
  transition: opacity 320ms var(--sc-ease-out), color 320ms var(--sc-ease-out), box-shadow 320ms var(--sc-ease-out);
}
.jcf-codes li:nth-child(1) { top: 26%; }
.jcf-codes li:nth-child(2) { top: 41%; }
.jcf-codes li:nth-child(3) { top: 57%; }
.jcf-codes li:nth-child(4) { top: 72%; }
.jcf-codes li.is-cleared {
  color: var(--sc-ink-soft); text-decoration: line-through; text-decoration-color: var(--sc-ink);
  box-shadow: inset 0 0 0 1px var(--sc-hairline); opacity: .0;
}
.jcf-codes li.is-reading { box-shadow: inset 0 0 0 1px var(--jcf-red-text), var(--sc-e2); }

.jcf-menu { position: absolute; top: 82px; left: 50%; translate: -50% 0; }
.jcf-menu summary {
  list-style: none; cursor: pointer; display: grid; place-items: center;
  min-width: 64px; min-height: 30px; padding: 0 .5rem; border-radius: var(--sc-r-sm);
  font: 700 .8rem/1 var(--sc-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft);
  box-shadow: inset 0 0 0 1px var(--sc-hairline);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.jcf-menu summary::-webkit-details-marker { display: none; }
.jcf-menu[open] summary, .jcf-menu summary:hover { color: var(--sc-ink); }
.jcf-menu nav {
  position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; width: 250px;
  display: grid; padding: .4rem; background: var(--sc-surface); border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e3), var(--sc-edge);
}
.jcf-menu nav a { padding: .65rem .8rem; text-decoration: none; border-radius: var(--sc-r-sm); font-size: var(--sc-t-sm); }
.jcf-menu nav a:hover { background: rgb(255 255 255 / .06); }

.jcf-wa-dot {
  position: absolute; bottom: 18px; left: 50%; translate: -50% 0;
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--jcf-red); color: #fff; box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / .2);
  transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.jcf-wa-dot svg { width: 26px; height: 26px; fill: currentColor; }
.jcf-wa-dot:active { transform: scale(.96); }

/* ------------------------------------------------------- split stages --- */
.jcf-split {
  display: grid;
  grid-template-columns: 1fr var(--div-w) 1fr;
  grid-template-rows: 1fr;
}
.jcf-half { position: relative; overflow: hidden; grid-row: 1 / -1; }
.jcf-half--l { grid-column: 1; background: var(--g-l); }
.jcf-half--r { grid-column: 3; background: var(--g-r); }
.jcf-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jcf-half--l .jcf-media:not(video) { object-position: 60% 50%; }
.jcf-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 66%, transparent) 26%,
    color-mix(in oklab, var(--sc-canvas) 18%, transparent) 50%,
    transparent 66%);
}
.jcf-half--r video[data-sc-scrub] { z-index: 0; }
.jcf-copy { position: relative; z-index: 20; }

/* 1 · hero */
.jcf-hero .jcf-split { grid-template-rows: 1fr auto auto clamp(2rem, 7vh, 4.5rem); }
.jcf-hero__h1 { display: contents; }
.jcf-hero__a, .jcf-hero__b {
  position: relative; z-index: 20; display: block; grid-row: 2;
  font-size: clamp(3rem, 1.2rem + 4.6vw, 6.4rem); line-height: .94;
  padding-inline: var(--sc-gutter) clamp(1rem, 3vw, 3rem);
  text-wrap: balance;
}
.jcf-hero__a { grid-column: 1; color: var(--sc-ink); align-self: end; }
.jcf-hero__b { align-self: end; }
.jcf-hero__b { grid-column: 3; }
.jcf-hero__l, .jcf-hero__r {
  grid-row: 3; display: grid; gap: var(--sc-4); align-content: start; justify-items: start;
  padding: var(--sc-5) clamp(1rem, 3vw, 3rem) 0 var(--sc-gutter);
}
.jcf-hero__l { grid-column: 1; }
.jcf-hero__r { grid-column: 3; }
.jcf-hero__r .sc-lede { max-width: 30ch; }

/* 2 · sintomas (flow) */
.jcf-flow { background: linear-gradient(90deg, var(--g-l) 0 50%, var(--g-r) 50% 100%); }
.jcf-rows { padding-block: clamp(4rem, 9vh, 7rem) clamp(4rem, 10vh, 8rem); }
.jcf-flow__head, .jcf-rowlist li {
  display: grid; grid-template-columns: 1fr var(--div-w) 1fr;
}
.jcf-flow__head { margin-bottom: var(--sc-6); }
.jcf-l { grid-column: 1; text-align: right; padding-inline: var(--sc-gutter) clamp(1.25rem, 3vw, 3rem); }
.jcf-r { grid-column: 3; text-align: left;  padding-inline: clamp(1.25rem, 3vw, 3rem) var(--sc-gutter); }
.jcf-flow__head .jcf-l { color: var(--jcf-red-text); }
.jcf-rowlist { list-style: none; margin: 0; padding: 0; }
.jcf-rowlist li { border-top: 1px solid var(--sc-hairline); }
.jcf-rowlist li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.jcf-rowlist span { display: block; padding-block: clamp(1rem, 2.4vh, 1.6rem); }
.jcf-rowlist .jcf-l { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-xl); line-height: 1.08; }
.jcf-rowlist .jcf-r { color: var(--sc-ink); font-size: var(--sc-t-lg); line-height: 1.4; align-self: center; max-width: 42ch; }
.jcf-rowlist .jcf-r[data-sc-in] { transition-delay: 140ms; }

/* 3 · como funciona */
.jcf-how__h {
  position: absolute; z-index: 20; left: var(--sc-gutter); right: clamp(1rem, 3vw, 3rem); bottom: clamp(2rem, 8vh, 5rem);
  font-size: clamp(2.4rem, 1rem + 3.6vw, 4.8rem);
}
.jcf-half--plain { display: grid; align-content: center; padding: var(--sc-7) var(--sc-gutter) var(--sc-7) clamp(1.25rem, 3vw, 3rem); }
.jcf-half--l.jcf-half--plain { padding: var(--sc-7) clamp(1.25rem, 3vw, 3rem) var(--sc-7) var(--sc-gutter); }
.jcf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.1rem, 3.2vh, 2rem); max-width: 34rem; }
.jcf-steps li { display: grid; grid-template-columns: 2.6rem 1fr; gap: var(--sc-4); align-items: start; }
.jcf-steps__n {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  font: 700 1.2rem/1 var(--sc-font-display); color: var(--sc-ink);
  box-shadow: inset 0 0 0 1px var(--jcf-steel);
}
.jcf-steps h3 { font: 700 var(--sc-t-xl)/1.05 var(--sc-font-display); margin-bottom: .3rem; }
.jcf-steps p { color: var(--sc-ink-soft); max-width: 44ch; }

/* 4 · pico */
.jcf-peak__l, .jcf-peak__r {
  position: absolute; left: var(--sc-gutter); right: clamp(1rem, 3vw, 3rem); bottom: clamp(2rem, 8vh, 5rem);
  display: grid; gap: var(--sc-4);
}
.jcf-peak__l .sc-body { color: var(--sc-ink); max-width: 38ch; }
.jcf-peak .sc-display--lg { font-size: clamp(2.6rem, 1rem + 3.8vw, 5rem); }

/* 5 · serviços */
.jcf-services__col { display: grid; gap: var(--sc-5); justify-items: start; max-width: 36rem; }
.jcf-half--l .jcf-services__col { justify-self: end; justify-items: end; text-align: right; }
.jcf-half--l .jcf-services__col h2 { color: var(--jcf-red-text); }
.jcf-links { list-style: none; margin: 0; padding: 0; width: 100%; }
.jcf-links li + li { border-top: 1px solid var(--sc-hairline); }
.jcf-links a {
  display: grid; gap: .1rem; padding: .8rem 0; text-decoration: none;
  transition: color var(--sc-d-fast) var(--sc-ease-out), translate var(--sc-d-fast) var(--sc-ease-out);
}
.jcf-links a span { font: 700 var(--sc-t-xl)/1.05 var(--sc-font-display); }
.jcf-links a small { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
@media (hover: hover) and (pointer: fine) {
  .jcf-links a:hover span { color: var(--jcf-red-text); }
}

/* 6 · quem atende + faq (flow) */
.jcf-who { padding-block: var(--sc-section); }
.jcf-who__grid, .jcf-faq { display: grid; grid-template-columns: 1fr var(--div-w) 1fr; align-items: start; }
.jcf-who__fig { margin: 0; display: grid; justify-items: end; }
.jcf-who__frame {
  width: min(100%, 30rem); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e3); background: var(--sc-surface);
}
.jcf-who__frame img { width: 100%; height: 118%; object-fit: cover; margin-top: -9%; }
.jcf-who__text { align-self: center; }
.jcf-who__text .sc-lede { max-width: 36ch; }
.jcf-cities { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; max-width: 40rem; }
.jcf-cities li { font: 600 var(--sc-t-lg)/1.3 var(--sc-font-display); }
.jcf-cities li::after { content: "·"; margin-left: .9rem; color: var(--sc-ink-soft); }
.jcf-cities li:last-child::after { content: none; }
.jcf-faq { margin-top: var(--sc-section); }
.jcf-faq .jcf-l { position: sticky; top: var(--sc-7); color: var(--jcf-red-text); }

.jcf-q { border-top: 1px solid var(--sc-hairline); max-width: 44rem; }
.jcf-q:last-child { border-bottom: 1px solid var(--sc-hairline); }
.jcf-q summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 1.5rem; gap: var(--sc-4); align-items: center;
  padding: var(--sc-5) 0;
}
.jcf-q summary::-webkit-details-marker { display: none; }
.jcf-q summary h3 { font: 600 var(--sc-t-lg)/1.3 var(--sc-font-text); }
.jcf-q summary::after {
  content: ""; width: 12px; height: 12px; justify-self: end;
  border-right: 2px solid var(--sc-ink-soft); border-bottom: 2px solid var(--sc-ink-soft);
  rotate: 45deg; translate: 0 -3px; transition: rotate var(--sc-d-base) var(--sc-ease-out);
}
.jcf-q[open] summary::after { rotate: 225deg; translate: 0 3px; }
.jcf-q p { padding-bottom: var(--sc-5); color: var(--sc-ink-soft); max-width: 62ch; }

/* 7 · fechamento: colapso */
.jcf-close__stage { background: var(--g-r); }
.jcf-close__lose {
  position: absolute; z-index: 5; top: 0; bottom: 0; left: 0; width: calc(50% - var(--div-w) / 2);
  display: grid; align-content: center; justify-items: end; padding-inline: var(--sc-gutter) clamp(1.25rem, 3vw, 3rem);
  background: var(--g-l); text-align: right;
  transform: translate3d(calc(var(--collapse) * -100%), 0, 0);
  will-change: transform;
}
.jcf-close__lose p { color: var(--jcf-red-text); opacity: calc(1 - var(--collapse)); }
.jcf-close__win {
  position: absolute; z-index: 4; top: 0; bottom: 0; left: 0; right: 0;
  display: grid; align-content: center; gap: var(--sc-5); justify-items: start;
  padding: var(--sc-7) var(--sc-gutter) 7rem calc(var(--div-w) + var(--sc-gutter));
  transform: translate3d(calc((1 - var(--collapse)) * (50vw - var(--div-w) / 2 - var(--sc-gutter) * .5)), 0, 0);
  will-change: transform;
}
.jcf-close__win .sc-lede { max-width: 40ch; }
.jcf-close__cta { display: flex; flex-wrap: wrap; gap: var(--sc-4); align-items: center; }
.jcf-nap { font-style: normal; display: grid; gap: .15rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.jcf-nap strong { color: var(--sc-ink); font-weight: 600; }
.jcf-nap a { color: var(--sc-ink); }
.jcf-foot {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; align-items: center;
  padding: 1rem var(--sc-gutter) 1.2rem calc(var(--div-w) + var(--sc-gutter));
  border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
  opacity: var(--collapse);
}
.jcf-foot nav { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.jcf-foot a { text-decoration: none; }
.jcf-foot a:hover { color: var(--sc-ink); }

/* --------------------------------------------------- home · mobile ------ */
@media (max-width: 860px) {
  .jcf-divider {
    top: 0; bottom: auto; left: 0; right: 0; width: auto; height: var(--bar-h); margin: 0;
    transform: none; box-shadow: inset 0 -1px 0 var(--sc-hairline), var(--sc-e2);
  }
  .jcf-mark { top: 8px; left: 12px; translate: none; width: 42px; height: 42px; }
  .jcf-side, .jcf-codes { display: none; }
  .jcf-trace { top: 0; bottom: 0; left: 64px; width: calc(100% - 190px); height: 100%; }
  .jcf-menu { top: 12px; left: auto; right: 72px; translate: none; }
  .jcf-menu summary { min-height: 34px; }
  .jcf-menu nav { left: auto; right: -60px; translate: none; width: min(80vw, 280px); }
  .jcf-wa-dot { top: 7px; bottom: auto; left: auto; right: 12px; translate: none; width: 44px; height: 44px; }
  .jcf-wa-dot svg { width: 22px; height: 22px; }

  .jcf-split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; padding-top: var(--bar-h); }
  .jcf-half { grid-row: auto; }
  .jcf-half--l { grid-column: 1; grid-row: 1; }
  .jcf-half--r { grid-column: 1; grid-row: 2; box-shadow: 0 -1px 0 var(--sc-hairline-strong); }

  .jcf-hero .jcf-split { grid-template-rows: 1fr auto auto .6rem 1fr auto auto 1.1rem; }
  .jcf-hero .jcf-half--l { grid-row: 1 / 5; }
  .jcf-hero .jcf-half--r { grid-row: 5 / 9; }
  .jcf-hero__a, .jcf-hero__b { font-size: clamp(2.5rem, 11vw, 3.4rem); padding-inline: var(--sc-gutter); }
  .jcf-hero__a { grid-row: 2; grid-column: 1; }
  .jcf-hero__l { grid-row: 3; grid-column: 1; padding: .6rem var(--sc-gutter) 0; gap: .5rem; }
  .jcf-hero__b { grid-row: 6; grid-column: 1; }
  .jcf-hero__r { grid-row: 7; grid-column: 1; padding: .6rem var(--sc-gutter) 0; gap: .7rem; }
  .jcf-hero__r .sc-lede { font-size: var(--sc-t-base); }
  .jcf-hero__l .jcf-fine { display: none; }
  .jcf-hero .jcf-btn { min-height: 44px; font-size: 1rem; }

  .jcf-flow { background: var(--sc-canvas); }
  .jcf-flow__head { display: none; }
  .jcf-rows { padding-block: 3.5rem 4rem; }
  .jcf-rows::before {
    content: "O que você está vendo, e o que a JCF faz ali mesmo"; display: block;
    font: 700 var(--sc-t-2xl)/1 var(--sc-font-display); padding: 0 var(--sc-gutter) var(--sc-5);
  }
  .jcf-rowlist li { grid-template-columns: 1fr; padding: 1rem var(--sc-gutter); }
  .jcf-rowlist .jcf-l, .jcf-rowlist .jcf-r { grid-column: 1; text-align: left; padding: 0; }
  .jcf-rowlist .jcf-l { color: var(--jcf-red-text); font-size: var(--sc-t-lg); }
  .jcf-rowlist .jcf-r { font-size: var(--sc-t-base); padding-top: .3rem; }

  .jcf-how .jcf-split { grid-template-rows: 36fr 64fr; }
  .jcf-how__h { font-size: clamp(1.8rem, 8vw, 2.4rem); bottom: 1rem; left: var(--sc-gutter); right: var(--sc-gutter); }
  .jcf-half--plain, .jcf-half--l.jcf-half--plain { padding: 1rem var(--sc-gutter); }
  .jcf-steps { gap: .8rem; }
  .jcf-steps li { grid-template-columns: 2rem 1fr; gap: .7rem; }
  .jcf-steps__n { width: 2rem; height: 2rem; font-size: 1rem; }
  .jcf-steps h3 { font-size: var(--sc-t-lg); }
  .jcf-steps p { font-size: var(--sc-t-sm); line-height: 1.4; }

  .jcf-peak__l, .jcf-peak__r { left: var(--sc-gutter); right: var(--sc-gutter); bottom: 1rem; gap: .4rem; }
  .jcf-peak .sc-display--lg { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .jcf-peak__l .sc-body { font-size: var(--sc-t-sm); }

  .jcf-services .jcf-split { grid-template-rows: 60fr 40fr; }
  .jcf-half--l .jcf-services__col { justify-self: start; justify-items: start; text-align: left; }
  .jcf-services__col { gap: .5rem; }
  .jcf-services__col .sc-display--md { font-size: var(--sc-t-xl); }
  .jcf-links a { padding: .42rem 0; }
  .jcf-links a span { font-size: var(--sc-t-lg); }
  .jcf-links a small, .jcf-services .sc-body { display: none; }
  .jcf-services .jcf-btn { min-height: 42px; font-size: .95rem; margin-top: .3rem; }

  .jcf-who__grid, .jcf-faq { grid-template-columns: 1fr; gap: var(--sc-6); }
  .jcf-who__grid > *, .jcf-faq > * { grid-column: 1; text-align: left; padding-inline: var(--sc-gutter); }
  .jcf-who__fig { justify-items: start; }
  .jcf-who__frame { width: 72%; }
  .jcf-faq .jcf-l { position: static; }

  .jcf-close__lose {
    width: auto; right: 0; bottom: auto; height: 50%; top: var(--bar-h);
    justify-items: start; text-align: left; transform: translate3d(0, calc(var(--collapse) * -120%), 0);
  }
  .jcf-close__win { padding: calc(var(--bar-h) + 1.5rem) var(--sc-gutter) 9rem; transform: translate3d(0, calc((1 - var(--collapse)) * 22vh), 0); align-content: center; }
  .jcf-close__win .sc-display--xl { font-size: clamp(3rem, 14vw, 4.2rem); }
  .jcf-close__cta { flex-direction: column; align-items: stretch; width: 100%; }
  .jcf-btn--xl { font-size: 1.2rem; min-height: 54px; }
  .jcf-foot { padding: .8rem var(--sc-gutter) 1rem; }
  .jcf-foot nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jcf-divider, .jcf-close__lose, .jcf-close__win { transition: none; }
}

/* ======================================================== INNER PAGES == */
.jcf-bar {
  position: sticky; top: 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; gap: 1rem; justify-content: space-between;
  min-height: var(--bar-h); padding: .45rem var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 94%, transparent);
  box-shadow: inset 0 -1px 0 var(--sc-hairline);
}
.jcf-bar__mark { display: flex; align-items: center; gap: .6rem; text-decoration: none; font: 700 1.3rem/1 var(--sc-font-display); letter-spacing: .04em; }
.jcf-bar__nav { margin-right: auto; }
.jcf-menu--bar { position: relative; top: auto; left: auto; translate: none; }
.jcf-menu--bar nav { left: 0; translate: none; width: 300px; }
.jcf-crumbs { display: flex; gap: .5rem; padding-top: var(--sc-5); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.jcf-crumbs a { color: var(--sc-ink-soft); }

.jcf-svc-hero { padding-block: var(--sc-6) var(--sc-8); }
.jcf-svc-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.jcf-svc-hero__text { display: grid; gap: var(--sc-5); justify-items: start; }
.jcf-svc-hero__text .sc-display--lg { font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4.6rem); }
.jcf-svc-hero__text .sc-lede { max-width: 46ch; color: var(--sc-ink); }
.jcf-svc-hero--text .sc-wrap { display: grid; gap: var(--sc-5); justify-items: start; }
.jcf-svc-hero--text .sc-lede { max-width: 60ch; }
.jcf-svc-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sc-4); }
.jcf-svc-hero__fig { margin: 0; aspect-ratio: 4 / 5; max-height: 72vh; border-radius: var(--sc-r-md); overflow: hidden; box-shadow: var(--sc-e3); background: var(--sc-surface); }
.jcf-svc-hero__fig img { width: 100%; height: 100%; object-fit: cover; }

.jcf-svc-split { background: linear-gradient(90deg, var(--g-l) 0 50%, var(--g-r) 50% 100%); }
.jcf-svc-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--div-w); }
.jcf-svc-split__l { text-align: right; justify-self: end; }
.jcf-svc-split__l h2 { color: var(--jcf-red-text); }
.jcf-svc-split__l .jcf-ticks li { padding-right: 1.6rem; padding-left: 0; }
.jcf-svc-split__l .jcf-ticks li::before { left: auto; right: 0; }
.jcf-ticks { list-style: none; margin: var(--sc-5) 0 0; padding: 0; display: grid; gap: .1rem; max-width: 34rem; }
.jcf-ticks li { position: relative; padding: .7rem 0 .7rem 1.6rem; border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-lg); line-height: 1.35; }
.jcf-ticks li::before {
  content: ""; position: absolute; left: 0; top: 1.25rem; width: .7rem; height: .7rem;
  border-right: 2px solid var(--jcf-steel); border-bottom: 2px solid var(--jcf-steel); rotate: 45deg; translate: 0 -40%;
  width: .38rem; height: .7rem;
}
.jcf-ticks--x li::before { border: 0; width: .8rem; height: 2px; background: var(--jcf-red-text); rotate: 0deg; translate: 0 0; top: 1.4rem; }

.jcf-svc-how__grid { display: grid; gap: var(--sc-6); }
.jcf-steps--row { grid-template-columns: repeat(4, 1fr); max-width: none; gap: var(--sc-6); }
.jcf-steps--row li { grid-template-columns: 1fr; gap: var(--sc-3); align-content: start; }
.jcf-proof { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; }
.jcf-proof li { font: 600 var(--sc-t-lg)/1.3 var(--sc-font-display); padding-left: 1rem; position: relative; }
.jcf-proof li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--jcf-red); }

.jcf-svc-faq .jcf-faq { margin: 0 auto; grid-template-columns: .8fr 1.2fr; gap: var(--sc-7); }
.jcf-svc-faq .jcf-faq h2 { position: sticky; top: calc(var(--bar-h) + 2rem); color: var(--jcf-red-text); }
.jcf-svc-rel { background: var(--sc-surface); }
.jcf-svc-rel .sc-wrap { display: grid; gap: var(--sc-5); }
.jcf-links--row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--sc-6); }
.jcf-links--row li + li { border-top: 0; }
.jcf-links--row li { border-top: 1px solid var(--sc-hairline); }

.jcf-area__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--sc-8); align-items: start; }
.jcf-area__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5) var(--sc-6); }
.jcf-area__list article { border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-4); }
.jcf-area__list h2 { font: 700 var(--sc-t-xl)/1.05 var(--sc-font-display); margin: 0 0 .35rem; }
.jcf-area__list p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.jcf-area__map { position: sticky; top: calc(var(--bar-h) + 1.5rem); display: grid; gap: .6rem; }
.jcf-area__map iframe { width: 100%; aspect-ratio: 4 / 5; border: 0; border-radius: var(--sc-r-md); box-shadow: var(--sc-e3); filter: grayscale(.4) contrast(1.05); }

.jcf-pagefoot { border-top: 1px solid var(--sc-hairline); padding-block: var(--sc-8) 6rem; display: grid; gap: var(--sc-6); }
.jcf-pagefoot__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-6); }
.jcf-pagefoot nav { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.5rem; font-size: var(--sc-t-sm); }
.jcf-pagefoot nav a { color: var(--sc-ink-soft); text-decoration: none; }
.jcf-pagefoot nav a:hover { color: var(--sc-ink); }

.jcf-sticky { display: none; }

@media (max-width: 860px) {
  .jcf-bar .jcf-btn, .jcf-bar__mark span { display: none; }
  .jcf-svc-hero__grid, .jcf-svc-split__grid, .jcf-svc-faq .jcf-faq, .jcf-area__grid, .jcf-pagefoot__grid { grid-template-columns: 1fr; gap: var(--sc-6); }
  .jcf-svc-hero__fig { order: -1; aspect-ratio: 4 / 3; max-height: none; }
  .jcf-svc-split { background: var(--sc-canvas); }
  .jcf-svc-split__l { text-align: left; justify-self: stretch; }
  .jcf-svc-split__l .jcf-ticks li { padding: .7rem 0 .7rem 1.6rem; }
  .jcf-svc-split__l .jcf-ticks li::before { left: 0; right: auto; }
  .jcf-steps--row { grid-template-columns: 1fr 1fr; }
  .jcf-links--row { grid-template-columns: 1fr; }
  .jcf-area__list { grid-template-columns: 1fr; }
  .jcf-area__map { position: static; }
  .jcf-svc-faq .jcf-faq h2 { position: static; }
  .jcf-sticky {
    display: flex; position: fixed; z-index: var(--sc-z-chrome); left: .75rem; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom));
    min-height: 52px; align-items: center; justify-content: center; border-radius: var(--sc-r-sm);
    background: var(--jcf-red); color: #fff; text-decoration: none; box-shadow: var(--sc-e3);
    font: 700 1.1rem/1 var(--sc-font-display); letter-spacing: .05em; text-transform: uppercase;
  }
}
@media (max-width: 520px) { .jcf-steps--row { grid-template-columns: 1fr; } }

/* hero: a copy desce até metade da tela, então a densidade sobe junto (medido: 2,56:1 → alvo ≥4,5:1) */
.jcf-hero .jcf-scrim {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 86%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 52%, transparent) 52%,
    color-mix(in oklab, var(--sc-canvas) 12%, transparent) 68%,
    transparent 78%);
}