/* Filosofia (cartões de comparação), quatro dimensões (colagem fixada no scroll) e método (jornada em caminho). */

/* ---------- Filosofia ---------- */
.vision__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--signal); }
.vision__title { font-size: clamp(36px, 5.6vw, 80px); font-weight: 400; line-height: 1.02; letter-spacing: -.06em; color: var(--forest); }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1040px; margin-inline: auto; }
.ccard { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 32px); border-radius: var(--r-16); transform-origin: center; }
.ccard--without { background: var(--paper); }
.ccard--with { background: var(--forest); color: #fff; }
.js .ccard--with.is-in:hover { transform: scale(1.03); }
.ccard__kicker { font-size: 12px; font-weight: 600; line-height: 16px; }
.ccard__title { margin-top: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.ccard--with .ccard__title { border-color: rgba(255, 255, 255, .45); }
.ccard__text { margin-top: 20px; color: var(--on-dark-muted); }
.ccard__list { display: grid; gap: 12px; margin-block: 20px 28px; }
.ccard__list li { display: flex; align-items: flex-start; gap: 12px; }
.ccard__list .ic { width: 20px; height: 20px; margin-top: 1px; }
.ccard--without .ccard__list { color: var(--muted); }
.ccard--with .ccard__list .ic { color: var(--neon); }
.ccard__result { margin-top: auto; padding: 14px 16px; border-radius: var(--r-8); background: var(--stone); font-size: 15px; font-weight: 600; line-height: 1.3; }
.ccard__result--accent { background: var(--mint); color: var(--forest); }

/* ---------- Quatro dimensões ----------
   Tela larga: bloco fixado. O título começa ampliado e encolhe, os cartões chegam de fora da tela, um após o outro,
   e por fim surgem as linhas de conexão, o texto e o botão. Tela menor (ou sem js): pilha simples. */
.dims { position: relative; background: var(--stone); }
.dims__pin { position: relative; display: grid; justify-items: center; gap: 36px; padding: var(--sec) max(var(--pad), env(safe-area-inset-right, 0px)) var(--sec) max(var(--pad), env(safe-area-inset-left, 0px)); }
.dims__center { display: contents; }
.dims__head { order: 1; display: grid; justify-items: center; gap: 18px; max-width: 640px; text-align: center; }
.dims__cards { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 760px; }
.dims__actions { order: 3; display: grid; justify-items: center; gap: 16px; text-align: center; }
.dims__note { max-width: 30em; color: var(--muted); }
.dims__links { display: none; }
.dcard { display: grid; align-content: start; gap: 12px; padding: 24px; border-radius: var(--r-12); background: var(--forest); color: #fff; }
.dcard__top { display: flex; align-items: center; justify-content: space-between; }
.dcard__top .ic { width: 28px; height: 28px; color: var(--neon); }
.dcard__n { font-size: 12px; opacity: .6; }
.dcard__title { font-size: 20px; line-height: 24px; letter-spacing: -.02em; }
.dcard__desc { font-size: 15px; line-height: 1.35; }
.dcard__chip { width: fit-content; padding: 5px 11px; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--r-full); font-size: 11px; color: var(--on-dark-muted); }

.dims.is-pinned .dims__track { height: 290vh; }
.dims.is-pinned .dims__pin { position: sticky; top: min(0px, calc(50vh - 340px)); display: block; height: 100vh; min-height: 680px; padding: 0; overflow: hidden; --ring-m: max(24px, calc(50vw - 640px)); }
.dims.is-pinned .dims__center { position: absolute; left: 50%; top: 46%; display: grid; justify-items: center; gap: 28px; width: 600px; transform: translate(-50%, -50%); }
.dims.is-pinned .dims__head .label, .dims.is-pinned .dims__head .lead { opacity: var(--acta, 1); }
.dims.is-pinned .dims__title { transform: scale(var(--tscale, 1)); transform-origin: 50% 50%; will-change: transform; }
.dims.is-pinned .dims__actions { opacity: var(--acta, 1); transform: translateY(calc((1 - var(--acta, 1)) * 24px)); pointer-events: var(--act-pe, auto); }
.dims.is-pinned .dims__cards { display: block; max-width: none; }
.dims.is-pinned .dcard { position: absolute; width: 300px; will-change: transform; }
.dims.is-pinned .dcard--tl { left: var(--ring-m); top: 16%; }
.dims.is-pinned .dcard--tr { right: var(--ring-m); top: 16%; }
.dims.is-pinned .dcard--bl { left: var(--ring-m); top: 56%; }
.dims.is-pinned .dcard--br { right: var(--ring-m); top: 56%; }
.dims.is-pinned .dims__links { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dims__links ellipse { fill: none; stroke: var(--forest); stroke-opacity: .32; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--orbit, 0)); }
.dims__links circle { fill: var(--signal); opacity: var(--acta, 0); }

/* ---------- Método: jornada ---------- */
.journey { position: relative; padding-top: 96px; }
.journey__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.journey__dots { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 7; animation: journey-flow .4s linear infinite; }
.journey__prog { fill: none; stroke: var(--signal); stroke-width: 5; stroke-linecap: round; }
.journey__list { position: relative; display: grid; }
.jstep { position: relative; display: grid; grid-template-columns: minmax(0, 400px) minmax(150px, 1fr) minmax(0, 400px); align-items: center; }
.jstep + .jstep { margin-top: -36px; }
.jstep .jcard { grid-column: 1; grid-row: 1; }
.jstep .jnode { grid-column: 2; grid-row: 1; justify-self: start; margin-left: 20%; }
.jstep:nth-child(even) .jcard { grid-column: 3; }
.jstep:nth-child(even) .jnode { justify-self: end; margin: 0 20% 0 0; }
.jnode { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #A9B5AD; color: #fff; transition: background-color .4s ease, color .4s ease; }
.jstep.is-done .jnode, .jstep.is-active .jnode { background: var(--forest); color: var(--neon); }
.jnode .ic { width: 28px; height: 28px; }
.jmarker { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; transition: opacity .35s ease; }
.jmarker.is-hidden { opacity: 0; }
.jmarker i { position: absolute; left: -64px; top: -64px; width: 128px; height: 128px; border: 2px solid var(--forest); border-radius: 50%; opacity: 0; animation: journey-pulse 2.4s ease-out infinite; }
.jmarker i:nth-child(2) { animation-delay: .5s; }
.jmarker i:nth-child(3) { animation-delay: 1s; }
.jcard { position: relative; z-index: 1; display: grid; gap: 12px; padding: 8px; border-radius: var(--r-12); background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .06); }
.js .jcard[data-rise] { transition: box-shadow .6s ease, opacity 1s var(--rise-ease), transform 1s var(--rise-ease); }
.jstep.is-active .jcard { box-shadow: var(--halo); }
.jcard__art { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 18px; border-radius: var(--r-8); background: var(--ivory); overflow: hidden; }
.jcard__art--dark { background: var(--forest); color: #fff; }
.jcard__text { display: grid; gap: 8px; padding: 8px 16px 16px; }
.jcard__n { font-size: 12px; color: var(--muted); }
.jcard__d { color: var(--muted); }

/* Miniaturas dos cartões da jornada (esquemas, sem números de desempenho) */
.art { display: grid; gap: 9px; width: 100%; max-width: 290px; font-size: 13px; line-height: 1.2; }
.art__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: var(--r-8); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.art__cap { font-size: 10px; opacity: .65; }
.art__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-full); background: var(--stone); color: var(--ink); font: 500 10.5px/1.4 var(--mono); font-style: normal; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; }
.chip--ok { background: var(--mint); color: var(--forest); }
.chip--live { background: var(--forest); color: #fff; }
.chip--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neon); animation: blink 1.4s ease-in-out infinite; }
.chip--neon { background: var(--neon); color: var(--graphite); }
.chip--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.prio { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 8px; font: 500 11px var(--mono); }
.prio span { height: 8px; width: var(--w); border-radius: var(--r-full); background: var(--neon); transform-origin: 0 50%; animation: prio-grow 3.6s var(--ui-ease) infinite; }
.prio:nth-child(3) span { animation-delay: .15s; opacity: .7; }
.prio:nth-child(4) span { animation-delay: .3s; opacity: .45; }
.art--link { justify-items: center; gap: 0; }
.hub { padding: 8px 14px; border-radius: var(--r-8); background: var(--forest); color: #fff; font-weight: 600; }
.art--link .stem { width: 1px; height: 18px; background: var(--forest); }
.art--link .rail { width: 78%; height: 9px; border: 1px solid var(--forest); border-bottom: 0; border-radius: 8px 8px 0 0; }
.art--link .art__chips { justify-content: center; margin-top: 6px; }
.revs { position: relative; display: flex; align-items: center; justify-content: space-between; height: 22px; }
.revs::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; translate: 0 -50%; background: var(--sand); }
.revs i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--forest); }
.revs i.is-now { width: 16px; height: 16px; background: var(--signal); box-shadow: 0 0 0 5px rgba(0, 169, 87, .2); animation: blink 1.6s ease-in-out infinite; }
.revs i.is-next { background: var(--ivory); box-shadow: inset 0 0 0 2px var(--sand); }

@keyframes journey-flow { to { stroke-dashoffset: -8; } }
@keyframes journey-pulse { 0% { transform: scale(.5); opacity: 0; } 30% { opacity: .9; } 100% { transform: scale(1.1); opacity: 0; } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes prio-grow { 0% { transform: scaleX(0); } 22%, 100% { transform: scaleX(1); } }

@media (max-width: 900px) {
  .compare { grid-template-columns: minmax(0, 1fr); }
  .journey { padding-top: 24px; }
  .jstep, .jstep:nth-child(even) { grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 14px; }
  .jstep + .jstep { margin-top: 28px; }
  .jstep .jcard, .jstep:nth-child(even) .jcard { grid-column: 2; }
  .jstep .jnode, .jstep:nth-child(even) .jnode { grid-column: 1; justify-self: center; width: 48px; height: 48px; margin: 10px 0 0; }
  .jnode .ic { width: 22px; height: 22px; }
  .jmarker i { left: -44px; top: -44px; width: 88px; height: 88px; }
  .journey__prog { stroke-width: 3; }
}
@media (max-width: 560px) {
  .dims__cards { grid-template-columns: minmax(0, 1fr); }
}