/* Landing da Jornada: visual alinhado ao app (Plus Jakarta, tiffany, trilha). */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap");

:root{
  --jr-bg:#f5f6f8;
  --jr-paper:#ffffff;
  --jr-ink:#171b20;
  --jr-ink-2:#2f353c;
  --jr-muted:#6B7075;
  --jr-line:#E4E6EA;
  --jr-tiffany:#81D8D0;
  --jr-tiffany-ink:#1E8C82;
  --jr-tiffany-tint:#DDF3F0;
  --jr-ceu:#0369A1;
  --jr-azul:#1D4ED8;
  --jr-violeta:#6D28D9;
  --jr-ambar:#B45309;
  --jr-coral:#C2410C;
  --jr-radius:22px;
  --jr-font:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --jr-shadow:0 18px 48px rgba(20,30,24,.12);
}

body.jornada-landing{background:var(--jr-bg)}
body.jornada-landing .page-nav{background:rgba(245,246,248,.92);border-bottom-color:var(--jr-line)}

/* Hero: produto em primeiro plano */
.jr-hero{
  position:relative;
  overflow:hidden;
  padding:120px 0 48px;
  background:
    radial-gradient(1200px 520px at 78% 12%, rgba(129,216,208,.35), transparent 60%),
    radial-gradient(900px 480px at 8% 80%, rgba(224,240,250,.7), transparent 55%),
    linear-gradient(180deg, #eef6f5 0%, var(--jr-bg) 48%, var(--jr-bg) 100%);
}
.jr-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.95fr);
  gap:48px;
  align-items:end;
}
.jr-hero-copy{padding-bottom:28px;max-width:560px}
.jr-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 22px;
  font-family:var(--jr-font);
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--jr-tiffany-ink);
}
.jr-brand-mark{
  width:22px;height:38px;object-fit:contain;flex:0 0 auto;
  display:block;
}
.jr-hero h1{
  margin:0 0 16px;
  font-family:var(--jr-font);
  font-size:clamp(36px,4.8vw,56px);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:800;
  color:var(--jr-ink);
  max-width:14ch;
}
.jr-hero .jr-lead{
  margin:0 0 28px;
  font-family:var(--jr-font);
  font-size:18px;
  line-height:1.55;
  color:var(--jr-muted);
  max-width:42ch;
}
.jr-cta{display:flex;flex-wrap:wrap;gap:12px}
.jr-btn{
  min-height:48px;padding:0 22px;border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--jr-font);font-size:14px;font-weight:700;
  border:1.5px solid transparent;transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.jr-btn:hover{transform:translateY(-1px)}
.jr-btn-primary{background:var(--jr-tiffany-ink);color:#fff}
.jr-btn-primary:hover{background:#17766e}
.jr-btn-ghost{background:var(--jr-paper);border-color:var(--jr-line);color:var(--jr-ink)}
.jr-btn-ghost:hover{border-color:var(--jr-tiffany-ink);color:var(--jr-tiffany-ink)}

.jr-hero-visual{position:relative;min-height:520px}
.jr-phone{
  position:relative;z-index:2;
  width:min(320px,86%);
  margin:0 auto;
  background:#111417;
  border-radius:36px;
  padding:12px 10px 14px;
  box-shadow:var(--jr-shadow);
  animation:jrRise .8s ease both;
}
.jr-phone-notch{
  width:96px;height:22px;margin:0 auto 8px;border-radius:0 0 14px 14px;background:#111417;
}
.jr-phone img{
  width:100%;display:block;border-radius:26px;background:var(--jr-paper);
}
.jr-desk{
  position:absolute;right:-4%;top:8%;z-index:1;
  width:min(520px,78%);
  border-radius:18px;overflow:hidden;
  border:1.5px solid var(--jr-line);
  box-shadow:0 24px 60px rgba(20,30,24,.14);
  background:var(--jr-paper);
  animation:jrRise .9s .12s ease both;
}
.jr-desk img{width:100%;display:block}

@keyframes jrRise{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}

/* Stages trail */
.jr-section{padding:88px 0;font-family:var(--jr-font)}
.jr-section h2{
  margin:0 0 12px;
  font-size:clamp(28px,3.4vw,40px);
  letter-spacing:-.03em;font-weight:800;color:var(--jr-ink);line-height:1.15;
}
.jr-kicker{
  margin:0 0 12px;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--jr-tiffany-ink);
}
.jr-section-lead{
  margin:0 0 36px;max-width:52ch;
  font-size:16px;line-height:1.55;color:var(--jr-muted);
}
.jr-stages-section{background:var(--jr-paper);border-top:1px solid var(--jr-line);border-bottom:1px solid var(--jr-line)}
.jr-trail{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  position:relative;
}
.jr-trail:before{
  content:"";position:absolute;left:8%;right:8%;top:34px;height:2px;
  background:linear-gradient(90deg,var(--jr-tiffany),var(--jr-ceu),var(--jr-azul),var(--jr-violeta),var(--jr-ambar),var(--jr-coral));
  opacity:.35;z-index:0;
}
.jr-stage{
  position:relative;z-index:1;
  text-align:center;padding:8px 4px 0;
  animation:jrRise .7s ease both;
}
.jr-stage:nth-child(2){animation-delay:.05s}
.jr-stage:nth-child(3){animation-delay:.1s}
.jr-stage:nth-child(4){animation-delay:.15s}
.jr-stage:nth-child(5){animation-delay:.2s}
.jr-stage:nth-child(6){animation-delay:.25s}
.jr-node{
  width:68px;height:68px;margin:0 auto 12px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;font-size:13px;font-weight:800;
  box-shadow:0 6px 0 rgba(0,0,0,.12);
}
.jr-stage[data-fam="tiffany"] .jr-node{background:var(--jr-tiffany-ink)}
.jr-stage[data-fam="ceu"] .jr-node{background:var(--jr-ceu)}
.jr-stage[data-fam="azul"] .jr-node{background:var(--jr-azul)}
.jr-stage[data-fam="violeta"] .jr-node{background:var(--jr-violeta)}
.jr-stage[data-fam="ambar"] .jr-node{background:var(--jr-ambar)}
.jr-stage[data-fam="coral"] .jr-node{background:var(--jr-coral)}
.jr-stage h3{margin:0 0 6px;font-size:15px;font-weight:800;color:var(--jr-ink)}
.jr-stage p{margin:0;font-size:13px;line-height:1.4;color:var(--jr-muted)}
.jr-moments{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;justify-content:center}
.jr-moments span{
  border:1.5px solid var(--jr-line);background:var(--jr-bg);
  border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700;color:var(--jr-ink-2);
}

/* Feature rows with phone */
.jr-feature{padding:72px 0;background:var(--jr-bg)}
.jr-feature:nth-of-type(even){background:var(--jr-paper)}
.jr-feature-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
.jr-feature-grid.reverse .jr-feature-copy{order:2}
.jr-feature-grid.reverse .jr-feature-media{order:1}
.jr-feature-copy h3{
  margin:0 0 12px;font-family:var(--jr-font);
  font-size:clamp(26px,3vw,34px);letter-spacing:-.03em;font-weight:800;color:var(--jr-ink);line-height:1.15;
}
.jr-feature-copy p{
  margin:0 0 20px;font-family:var(--jr-font);
  font-size:16px;line-height:1.55;color:var(--jr-muted);max-width:40ch;
}
.jr-feature-media{display:flex;justify-content:center}
.jr-feature-media .jr-phone{width:min(300px,100%);animation:none}
.jr-feature-media .jr-wide{
  width:100%;max-width:560px;border-radius:18px;overflow:hidden;
  border:1.5px solid var(--jr-line);box-shadow:var(--jr-shadow);background:var(--jr-paper);
}
.jr-feature-media .jr-wide img{width:100%;display:block}
.jr-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--jr-font);font-size:14px;font-weight:800;color:var(--jr-tiffany-ink);
}
.jr-link:after{content:"→";font-size:16px}

.jr-close{
  padding:88px 0 100px;
  background:
    radial-gradient(700px 280px at 50% 0%, rgba(129,216,208,.28), transparent 70%),
    var(--jr-ink);
  color:#fff;text-align:center;
}
.jr-close h2{
  margin:0 auto 12px;max-width:16ch;
  font-family:var(--jr-font);font-size:clamp(28px,3.6vw,42px);
  letter-spacing:-.03em;font-weight:800;line-height:1.15;color:#fff;
}
.jr-close p{
  margin:0 auto 28px;max-width:40ch;
  font-family:var(--jr-font);font-size:16px;line-height:1.55;color:rgba(255,255,255,.78);
}
.jr-close .jr-cta{justify-content:center}
.jr-close .jr-btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.jr-close .jr-btn-ghost:hover{border-color:#fff;color:#fff}

@media (max-width:980px){
  .jr-hero{padding:108px 0 36px}
  .jr-hero-grid{grid-template-columns:1fr;gap:36px}
  .jr-hero-copy{padding-bottom:0;text-align:center;margin:0 auto}
  .jr-hero h1{max-width:none;margin-left:auto;margin-right:auto}
  .jr-hero .jr-lead{margin-left:auto;margin-right:auto}
  .jr-cta{justify-content:center}
  .jr-brand{justify-content:center}
  .jr-hero-visual{min-height:0}
  .jr-desk{display:none}
  .jr-trail{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .jr-trail:before{display:none}
  .jr-feature-grid,.jr-feature-grid.reverse{grid-template-columns:1fr;gap:28px}
  .jr-feature-grid.reverse .jr-feature-copy,
  .jr-feature-grid.reverse .jr-feature-media{order:initial}
  .jr-feature-copy{text-align:center}
  .jr-feature-copy p{margin-left:auto;margin-right:auto}
  .jr-section{padding:64px 0}
  .jr-feature{padding:56px 0}
}

@media (prefers-reduced-motion:reduce){
  .jr-phone,.jr-desk,.jr-stage{animation:none!important}
  .jr-btn:hover{transform:none}
}