/* Concierge Patrimonial — Jornada Método (4 tempos)
 * Spine vertical central + cards diagonal 3D + glow dourado.
 * Carregado APENAS em /jornada. Classes prefixadas .jm-* pra evitar conflito.
 */

:root{
  --jm-marrom-md:#1a1108;
  --jm-marfim-sub:rgba(232,230,223,0.60);
  --jm-ease:cubic-bezier(0.32,0.72,0,1);
  --jm-ease-out:cubic-bezier(0.16,1,0.3,1);
}

/* ───────── SECTION ───────── */
.jm-section{position:relative;z-index:1;padding:120px 24px 140px;max-width:1280px;margin:0 auto;perspective:2200px;perspective-origin:50% 40%;background:var(--marrom-dk)}

/* Noise overlay sutil (igual outras seções dark) */
.jm-section::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.35' numOctaves='3' seed='14' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.808  0 0 0 0 0.616  0 0 0 0 0.384  0 0 0 0.32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:320px 320px;mix-blend-mode:overlay;opacity:.18;pointer-events:none}
.jm-section>*{position:relative;z-index:1}

/* Header */
.jm-head{text-align:center;margin-bottom:100px}
.jm-tag{display:inline-flex;align-items:center;gap:14px;font-family:var(--sans);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--dourado);margin-bottom:18px}
.jm-tag::before,.jm-tag::after{content:'';display:inline-block;width:36px;height:1px;background:var(--dourado);opacity:.5}
.jm-compass{margin:0 auto 26px;display:flex;justify-content:center}
.jm-compass svg{width:56px;height:56px}
.jm-needle{transform-box:fill-box;transform-origin:center;animation:jmSpin 14s linear infinite}
.jm-pivot{transform-box:fill-box;transform-origin:center;animation:jmPulse 2.5s var(--jm-ease-out) infinite}
@keyframes jmSpin{to{transform:rotate(360deg)}}
@keyframes jmPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.jm-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(38px,5.4vw,68px);line-height:1.05;color:var(--marfim);letter-spacing:-.02em;margin:0;max-width:880px;margin-left:auto;margin-right:auto}
.jm-head h2 em{font-style:italic;color:var(--dourado)}

/* ───────── SPINE + CARDS ───────── */
.jm-spine-wrap{position:relative;transform-style:preserve-3d}

.jm-spine{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);pointer-events:none;z-index:2}
.jm-spine-line{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(206,157,98,.2) 6%,rgba(206,157,98,.2) 94%,transparent)}
.jm-spine-fill{position:absolute;left:0;right:0;top:0;height:0;background:linear-gradient(180deg,var(--dourado-lt),var(--dourado));box-shadow:0 0 18px rgba(206,157,98,.65);transition:height .6s var(--jm-ease-out)}

.jm-node{position:absolute;left:50%;width:18px;height:18px;border-radius:50%;background:var(--marrom-dk);border:1.5px solid var(--dourado);transform:translate(-50%,-50%);z-index:3;transition:all .45s var(--jm-ease-out);cursor:pointer}
.jm-node::after{content:attr(data-num);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--sans);font-size:8px;font-weight:700;color:var(--dourado);opacity:0;transition:opacity .35s var(--jm-ease-out)}
.jm-node.is-active{background:var(--dourado);box-shadow:0 0 0 7px rgba(206,157,98,.18),0 0 28px rgba(206,157,98,.7);transform:translate(-50%,-50%) scale(1.18)}
.jm-node.is-active::after{color:var(--marrom-dk);opacity:1;font-size:9px}

/* Cards em ZIGZAG DIAGONAL com 3D */
.jm-cards{position:relative;display:flex;flex-direction:column;gap:120px;transform-style:preserve-3d}
.jm-card{position:relative;width:48%;padding:48px 44px;background:rgba(22,18,14,.85);border:1px solid rgba(206,157,98,.2);transition:transform .8s var(--jm-ease-out),opacity .6s var(--jm-ease-out),border-color .5s var(--jm-ease-out),box-shadow .5s var(--jm-ease-out),background .5s var(--jm-ease-out);opacity:.4;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transform-style:preserve-3d;will-change:transform}

.jm-card:nth-child(odd){align-self:flex-start;transform:translateX(-30px) rotateY(18deg) rotateX(2deg)}
.jm-card:nth-child(even){align-self:flex-end;transform:translateX(30px) rotateY(-18deg) rotateX(2deg)}

.jm-card.is-active{opacity:1;background:rgba(28,22,16,.96);border-color:rgba(206,157,98,.55);box-shadow:0 30px 70px -28px rgba(0,0,0,.7),0 0 0 1px rgba(206,157,98,.12),0 0 60px -15px rgba(206,157,98,.22);transform:translateX(0) rotateY(0) rotateX(0) translateZ(60px) scale(1.02)}
.jm-card:hover{opacity:1;border-color:rgba(206,157,98,.45)}
.jm-card:nth-child(odd):hover{transform:translateX(-10px) rotateY(8deg) rotateX(1deg) translateZ(30px)}
.jm-card:nth-child(even):hover{transform:translateX(10px) rotateY(-8deg) rotateX(1deg) translateZ(30px)}
.jm-card:nth-child(odd).is-active,.jm-card:nth-child(even).is-active{transform:translateX(0) rotateY(0) rotateX(0) translateZ(60px) scale(1.02)}

/* Glow radial dourado atrás do card ativo */
.jm-card::before{content:'';position:absolute;inset:-1px;background:radial-gradient(ellipse at center,rgba(206,157,98,.14),transparent 70%);opacity:0;transition:opacity .5s var(--jm-ease-out);pointer-events:none;z-index:-1}
.jm-card:hover::before,.jm-card.is-active::before{opacity:1}

/* Linha horizontal conectora card → spine */
.jm-card::after{content:'';position:absolute;top:50px;width:60px;height:1px;background:linear-gradient(90deg,transparent,rgba(206,157,98,.4));transition:opacity .5s var(--jm-ease-out);opacity:.5}
.jm-card:nth-child(odd)::after{right:-60px;background:linear-gradient(90deg,rgba(206,157,98,.4),transparent)}
.jm-card:nth-child(even)::after{left:-60px}
.jm-card.is-active::after{opacity:1}

.jm-card-when{font-family:var(--sans);font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:var(--jm-marfim-sub);margin-bottom:14px;font-weight:600}
.jm-card-state{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--dourado-lt);margin-bottom:18px;letter-spacing:.02em}
.jm-card-title{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3vw,38px);line-height:1.15;color:var(--marfim);margin-bottom:18px;letter-spacing:-.01em}
.jm-card-title em{font-style:italic;color:var(--dourado)}
.jm-card-desc{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.55;color:var(--jm-marfim-sub);margin:0}

@media(max-width:900px){
  .jm-section{padding:80px 16px 100px;perspective:none}
  .jm-head{margin-bottom:60px}
  .jm-head h2{font-size:clamp(30px,8vw,46px)}
  .jm-spine{left:34px;transform:none}
  .jm-cards{gap:48px}
  .jm-card{width:calc(100% - 60px);align-self:flex-end!important;margin-left:60px;transform:none!important}
  .jm-card:hover,.jm-card.is-active{transform:none!important}
  .jm-card::after{display:none}
}

@media(prefers-reduced-motion:reduce){
  .jm-card,.jm-spine-fill,.jm-node{transition:none}
  .jm-needle,.jm-pivot{animation:none}
  .jm-card{transform:none!important;opacity:1}
}