/* ════════════════════════════════════════════════════════════════
   GPS PORTUGAL — Reskin do site "José em Portugal"
   Linguagem visual GPS aplicada ao site de conteúdo do José.
   Base .jr = tema claro (paper/editorial). data-theme="ink" = preto (opcional).
   ════════════════════════════════════════════════════════════════ */

/* ── Reset leve ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; } /* cinto de segurança: nenhum elemento decorativo gera scroll lateral no mobile */

/* ════════ TEMA — variáveis ════════ */
.jr {
  --bg:        var(--paper);
  --bg-alt:    #F2F1E8;
  --surface:   #fff;
  --surface-2: #fff;
  --text:      var(--text-900);
  --soft:      var(--text-500);
  --faint:     var(--text-400);
  --head:      var(--forest-900);
  --border:    var(--line);
  --border-2:  var(--line-2);
  --chip-bg:   #fff;
  --num:       var(--forest-700);
  --glow:      rgba(var(--gold-rgb), .14);
  --deep:      var(--forest-900);
  --feature-bg:   var(--forest-900);
  --feature-text: #EBF1E9;
  --feature-soft: var(--forest-300);
  --feature-surface: rgba(255,255,255,.045);
  --feature-border:  rgba(255,255,255,.10);

  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
  line-height: 1.55;
}

.jr[data-theme="ink"] {
  --bg:        #0C0D0B;
  --bg-alt:    #131410;
  --surface:   rgba(255,255,255,.038);
  --surface-2: #17180F;
  --text:      #ECEAE1;
  --soft:      #9C9C90;
  --faint:     #66675D;
  --head:      #FBFAF5;
  --border:    rgba(255,255,255,.085);
  --border-2:  rgba(255,255,255,.17);
  --chip-bg:   rgba(255,255,255,.04);
  --num:       var(--gold-bright);
  --glow:      rgba(var(--gold-rgb), .19);
  --deep:      #060604;
  --feature-bg:   #060604;
  --feature-text: #ECEAE1;
  --feature-soft: #9C9C90;
  --feature-surface: rgba(255,255,255,.045);
  --feature-border:  rgba(255,255,255,.10);
}

/* ════════ LAYOUT ════════ */
.jr-wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }
.jr-section { padding: 92px 0; }
.jr-section.is-tight { padding: 64px 0; }
.jr-alt { background: var(--bg-alt); }

/* ════════ TIPOGRAFIA ════════ */
.jr h1, .jr h2, .jr h3, .jr h4 {
  font-family: var(--font-display); color: var(--head);
  margin: 0; letter-spacing: -.02em; line-height: 1.04; font-weight: 800;
  text-wrap: balance;
}
.jr .num { font-family: var(--font-num); font-feature-settings: "tnum" 1; }

.jr .jp-ico { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.jr .jp-ico-fill { fill: currentColor; stroke: none; }

.jr-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--forest-600);
}
.jr[data-theme="ink"] .jr-eyebrow { color: var(--gold-bright); }
.jr-eyebrow .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--gold); }

.jr-head { max-width: 680px; }
.jr-head.is-center { max-width: 720px; margin-inline: auto; text-align: center; }
.jr-h2 { font-size: clamp(30px, 4vw, 46px); margin-top: 16px; }
.jr-h2 em { font-style: normal; color: var(--gold-deep); }
.jr[data-theme="ink"] .jr-h2 em { color: var(--gold-bright); }
.jr-lead { color: var(--soft); font-size: 18px; line-height: 1.6; margin-top: 18px; }
.jr-head.is-center .jr-lead { margin-inline: auto; }

/* ════════ BOTÕES ════════ */
.jr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 600; font-size: 16px;
  padding: 15px 26px; border-radius: 99px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
  white-space: nowrap;
}
.jr-btn svg { width: 19px; height: 19px; }
.jr-btn:active { transform: scale(.98); }
.jr-btn-gold {
  background: var(--gold); color: var(--forest-900);
  box-shadow: 0 8px 22px rgba(var(--gold-rgb), .30);
}
.jr-btn-gold:hover { background: var(--gold-bright); }
.jr-btn-ghost {
  background: transparent; color: var(--head);
  border-color: var(--border-2);
}
.jr-btn-ghost:hover { border-color: var(--forest-600); color: var(--forest-600); }
.jr[data-theme="ink"] .jr-btn-ghost:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.jr-btn-wa { background: #25D366; color: #06311A; box-shadow: 0 8px 22px rgba(37,211,102,.28); }
.jr-btn-wa:hover { background: #2BE675; }

/* ════════ NAV ════════ */
.jr-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.jr-nav-in { display: flex; align-items: center; gap: 28px; height: 72px; }
.jr-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.jr-logo { height: 50px; width: auto; display: block; }
.jr-logo.is-foot { height: 60px; }
.jr-brand-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--forest-900);
  display: grid; place-items: center; flex: none; }
.jr[data-theme="ink"] .jr-brand-ic { background: rgba(255,255,255,.06); }
.jr-brand-wm { font-family: var(--font-display); font-weight: 800; font-size: 19px;
  color: var(--head); letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.jr-brand-wm span { color: var(--gold); }
.jr-nav-links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.jr-nav-links a { color: var(--soft); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: color .15s; white-space: nowrap; }
.jr-nav-links a:hover { color: var(--head); }
.jr-nav-app { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 8px;
  border-radius: 99px; border: 1px solid var(--border-2); color: var(--head) !important;
  font-weight: 600; transition: .15s; white-space: nowrap; }
.jr-nav-app:hover { border-color: var(--gold); color: var(--gold) !important; }
.jr-nav-app-ic { width: 24px; height: 24px; border-radius: 7px; background: var(--deep);
  display: grid; place-items: center; flex: none; }
.jr-nav-cta { display: flex; align-items: center; gap: 6px; }
.jr-burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border-2);
  background: var(--chip-bg); color: var(--head); place-items: center; cursor: pointer; margin-left: auto; }
.jr-drawer { display: flex; flex-direction: column; gap: 4px; padding: 10px 24px 22px;
  border-top: 1px solid var(--border); background: var(--bg); }
.jr-drawer[hidden] { display: none; }
.jr-drawer > a { color: var(--soft); text-decoration: none; font-size: 16px; font-weight: 500; padding: 12px 2px; border-bottom: 1px solid var(--border); }
.jr-drawer > a:hover { color: var(--head); }
.jr-drawer .jr-nav-app { align-self: flex-start; margin-top: 14px; border-bottom: 1px solid var(--border-2); }
.jr-drawer .jr-btn { margin-top: 12px; justify-content: center; border-bottom: none; }
@media (max-width: 1080px) {
  .jr-nav-links, .jr-nav-cta { display: none; }
  .jr-burger { display: grid; }
}

/* ════════ HERO ════════ */
.jr-hero { position: relative; overflow: hidden; padding: 64px 0 36px; }
.jr-hero-glow { position: absolute; top: -160px; right: -120px; width: 620px; height: 620px;
  background: radial-gradient(circle, var(--glow), transparent 66%); pointer-events: none; }
.jr-hero-in { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.jr-hero-h1 { font-size: clamp(32px, 8vw, 72px); margin-top: 22px; letter-spacing: -.035em; }
.jr-hero-h1 em { font-style: normal; color: var(--gold-deep); }
.jr[data-theme="ink"] .jr-hero-h1 em { color: var(--gold-bright); }
.jr-hero-sub { color: var(--soft); font-size: 19px; line-height: 1.6; margin-top: 22px; max-width: 480px; }
.jr-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* route motif (BR → PT) */
.jr-route { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  font-size: 13.5px; font-weight: 500; color: var(--soft); }
.jr-route .line { width: 54px; height: 2px; background-image: linear-gradient(90deg, currentColor 40%, transparent 0);
  background-size: 9px 2px; color: var(--gold); opacity: .9; }

/* hero stats */
.jr-hero-stats { display: grid; grid-template-columns: repeat(2, auto); gap: 20px 44px;
  margin-top: 38px; justify-content: start; }
.jr-stat-n { font-family: var(--font-num); font-weight: 700; font-size: 32px; color: var(--num); line-height: 1; }
.jr-stat-l { font-size: 13px; color: var(--soft); margin-top: 5px; text-transform: uppercase; letter-spacing: .06em; }

/* hero media */
.jr-hero-media { position: relative; }
.jr-hero-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 26px; object-fit: cover;
  box-shadow: var(--sh-md, 0 24px 60px rgba(16,37,22,.22)); }
.jr-tag-float {
  position: absolute; left: -14px; bottom: 28px; z-index: 3;
  background: var(--gold); color: var(--forest-900);
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  padding: 9px 16px; border-radius: 14px; box-shadow: 0 10px 24px rgba(var(--gold-rgb), .35);
  letter-spacing: -.01em;
}
.jr-tag-float small { display: block; font-family: var(--font-sans); font-weight: 600;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .72; margin-top: 1px; }

/* ════════ TOPICS STRIP ════════ */
.jr-topics { border-block: 1px solid var(--border); }
.jr-topics-in { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px 0; align-items: center; }
.jr-topics-lbl { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-right: 6px; }
.jr-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--chip-bg); color: var(--soft);
  font-size: 13.5px; font-weight: 500; text-decoration: none; transition: .15s; }
.jr-chip:hover { border-color: var(--forest-600); color: var(--head); }
.jr-chip .num { color: var(--gold); font-weight: 700; }

/* ════════ ARTICLE GRID ════════ */
.jr-arts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.jr-art {
  display: flex; flex-direction: column; gap: 12px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 24px; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.jr-art:hover { transform: translateY(-3px); border-color: var(--forest-300); box-shadow: var(--sh-sm, 0 10px 26px rgba(16,37,22,.10)); }
.jr[data-theme="ink"] .jr-art:hover { border-color: rgba(255,255,255,.22); }
.jr-art-cat { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--forest-600); }
.jr[data-theme="ink"] .jr-art-cat { color: var(--gold-bright); }
.jr-art-cat svg { width: 14px; height: 14px; }
.jr-art-h { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--head);
  line-height: 1.18; letter-spacing: -.01em; }
.jr-art-d { font-size: 14.5px; color: var(--soft); line-height: 1.5; flex: 1; }
.jr-art-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600;
  color: var(--gold-deep); }
.jr[data-theme="ink"] .jr-art-more { color: var(--gold-bright); }
.jr-art-more svg { width: 16px; height: 16px; }

/* featured (checklist) card */
.jr-art.is-feat { grid-column: span 1; background: var(--deep); border-color: transparent; }
.jr-art.is-feat .jr-art-h, .jr-art.is-feat .jr-art-d { color: #EBF1E9; }
.jr-art.is-feat .jr-art-cat { color: var(--gold-bright); }
.jr-art.is-feat .jr-art-d { color: var(--forest-300); }
.jr-art.is-feat .jr-art-more { color: var(--gold-bright); }
.jr-art-check { width: 48px; height: 48px; border-radius: 14px; background: var(--gold);
  display: grid; place-items: center; color: var(--forest-900); }
.jr-art-check svg { width: 26px; height: 26px; }

.jr-arts-foot { display: flex; justify-content: center; margin-top: 36px; }

/* ════════ BLOG ════════ */
.jr-blog { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
.jr-post { display: flex; flex-direction: column; gap: 10px; text-decoration: none; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 24px; transition: transform .15s, border-color .15s; }
.jr-post:hover { transform: translateY(-3px); border-color: var(--forest-300); box-shadow: var(--sh-sm, 0 10px 26px rgba(16,37,22,.10)); }
.jr[data-theme="ink"] .jr-post:hover { border-color: rgba(255,255,255,.22); }
.jr-post-meta { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; gap: 10px; font-size: 12.5px; color: var(--faint); }
.jr-post-meta span { white-space: nowrap; }
.jr-post-meta .sep { width: 3px; height: 3px; border-radius: 99px; background: var(--faint); }
.jr-post-cat { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--forest-600); }
.jr[data-theme="ink"] .jr-post-cat { color: var(--gold-bright); }
.jr-post-h { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--head); line-height: 1.18; letter-spacing: -.01em; }
.jr-post-d { font-size: 14.5px; color: var(--soft); line-height: 1.5; flex: 1; }
.jr-foot-blog { font-size: 14px; font-weight: 600; color: var(--gold-deep); text-decoration: none; align-self: center; margin-right: 6px; }

/* ════════ FEATURE / SIMULAÇÕES (bloco escuro) ════════ */
.jr-feature { background: var(--feature-bg); color: var(--feature-text); position: relative; overflow: hidden; }
.jr-feature .jr-eyebrow { color: var(--gold-bright); }
.jr-feature h2 { color: #F6FAF4; }
.jr-feature .jr-lead { color: var(--feature-soft); }
.jr-feature h2 em { color: var(--gold-bright); }
.jr-feature-glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 760px; height: 480px; background: radial-gradient(circle, rgba(var(--gold-rgb), .16), transparent 64%); pointer-events: none; }
.jr-sims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; position: relative; }
.jr-sim { background: var(--feature-surface); border: 1px solid var(--feature-border); border-radius: 20px;
  padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.jr-sim-top { display: flex; align-items: center; gap: 12px; }
.jr-sim-av { display: flex; }
.jr-sim-av svg { width: 26px; height: 26px; color: var(--gold-bright); }
.jr-sim-cat { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--feature-soft); }
.jr-sim-h { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #F6FAF4; line-height: 1.2; }
.jr-sim-d { font-size: 13.5px; color: var(--feature-soft); line-height: 1.5; flex: 1; }
.jr-sim-val { font-family: var(--font-num); font-weight: 700; font-size: 40px; color: var(--gold-bright); line-height: 1;
  display: flex; align-items: baseline; gap: 4px; }
.jr-sim-val small { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--feature-soft); }
.jr-sim-more { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600;
  color: var(--gold-bright); text-decoration: none; margin-top: 2px; }
.jr-sim-more svg { width: 16px; height: 16px; }
.jr-sim-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.10); overflow: hidden; }
.jr-sim-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }

/* ════════ APP GPS PORTUGAL (banner de destaque) ════════ */
.jr-app {
  position: relative; overflow: hidden; border-radius: 30px;
  background: linear-gradient(150deg, var(--deep), color-mix(in srgb, var(--deep) 86%, var(--gold) 14%));
  border: 1px solid var(--feature-border);
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center;
  padding: 56px 52px;
}
.jr-app-glow { position: absolute; top: -140px; right: -80px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(var(--gold-rgb), .22), transparent 64%); pointer-events: none; }
.jr-app-copy { position: relative; }
.jr-app .jr-eyebrow { color: var(--gold-bright); }
.jr-app h2 { color: #F8FAF4; }
.jr-app h2 em { color: var(--gold-bright); font-style: normal; }
.jr-app .jr-lead { color: var(--feature-soft); }
.jr-app-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; margin-top: 28px; }
.jr-app-feat { display: flex; gap: 12px; align-items: flex-start; }
.jr-app-feat-ic { width: 38px; height: 38px; flex: none; border-radius: 11px;
  background: rgba(var(--gold-rgb), .14); color: var(--gold-bright); display: grid; place-items: center; }
.jr-app-feat-ic svg { width: 20px; height: 20px; }
.jr-app-feat b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
  color: #F2F5EE; letter-spacing: -.01em; }
.jr-app-feat > div span { display: block; font-size: 13px; color: var(--feature-soft); line-height: 1.45; margin-top: 3px; }

.jr-stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.jr-store { display: inline-flex; align-items: center; gap: 11px; height: 54px; padding: 0 20px 0 17px;
  border-radius: 14px; background: #fff; color: var(--forest-900); text-decoration: none; transition: .15s; }
.jr-store:hover { transform: translateY(-2px); }
.jr-store-ic { display: grid; place-items: center; }
.jr-store-tx small { display: block; font-size: 10.5px; letter-spacing: .04em; opacity: .7; }
.jr-store-tx b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.1; letter-spacing: -.01em; }
.jr-app-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px;
  font-size: 14.5px; font-weight: 600; color: var(--gold-bright); text-decoration: none; }
.jr-app-link svg { width: 16px; height: 16px; }

.jr-app-media { position: relative; display: grid; place-items: center; min-height: 360px; }
.jr-app-icon { position: absolute; top: 8px; left: 14px; z-index: 3; }
.jr-phone { position: relative; width: 250px; aspect-ratio: 250 / 510; border-radius: 38px;
  background: #07140C; border: 8px solid #0a0a0a; box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.05); overflow: hidden; }
.jr-phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 4;
  width: 120px; height: 24px; background: #0a0a0a; border-radius: 0 0 16px 16px; }
.jr-phone-screen { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 940px) {
  .jr-app { grid-template-columns: 1fr; gap: 36px; padding: 44px 30px; }
  .jr-app-media { min-height: auto; }
}
@media (max-width: 640px) {
  .jr-app-feats { grid-template-columns: 1fr; }
}

/* ════════ BIO ════════ */
.jr-bio-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.jr-bio-media { position: relative; }
.jr-bio-photo { width: 100%; height: auto; aspect-ratio: 4 / 4.9; border-radius: 24px; object-fit: cover; box-shadow: var(--sh-md, 0 24px 60px rgba(16,37,22,.20)); }
.jr-bio-text { color: var(--soft); font-size: 17px; line-height: 1.62; margin-top: 18px; }
.jr-bio-list { margin-top: 26px; border-top: 1px solid var(--border); }
.jr-bio-link { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 4px; border-bottom: 1px solid var(--border); color: var(--head); text-decoration: none;
  font-weight: 600; font-size: 15.5px; transition: .15s; }
.jr-bio-link:hover { padding-left: 12px; color: var(--gold-deep); }
.jr-bio-link svg { width: 18px; height: 18px; color: var(--faint); }
.jr-bio-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }
.jr-bio-stat-n { font-family: var(--font-num); font-weight: 700; font-size: 26px; color: var(--num); line-height: 1; }
.jr-bio-stat-l { font-size: 12px; color: var(--soft); margin-top: 5px; }
.jr-bio-social { display: flex; gap: 12px; margin-top: 28px; }
.jr-social { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 99px;
  font-weight: 600; font-size: 14.5px; text-decoration: none; transition: .15s; }
.jr-social svg { width: 18px; height: 18px; }
.jr-social.yt { background: #FF0000; color: #fff; }
.jr-social.ig { background: linear-gradient(120deg, #F58529, #DD2A7B 55%, #8134AF); color: #fff; }
.jr-social:hover { transform: translateY(-2px); }

/* ════════ TOOLS GRID ════════ */
.jr-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; }
.jr-tool { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px;
  display: flex; flex-direction: column; gap: 12px; text-decoration: none; transition: .15s; }
.jr-tool:hover { transform: translateY(-3px); border-color: var(--forest-300); box-shadow: var(--sh-sm, 0 10px 26px rgba(16,37,22,.10)); }
.jr[data-theme="ink"] .jr-tool:hover { border-color: rgba(255,255,255,.22); }
.jr-tool-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--forest-50); color: var(--forest-600);
  display: grid; place-items: center; }
.jr[data-theme="ink"] .jr-tool-ic { background: rgba(255,255,255,.06); color: var(--gold-bright); }
.jr-tool-ic svg { width: 24px; height: 24px; }
.jr-tool-cat { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.jr-tool-h { font-family: var(--font-display); font-weight: 700; font-size: 18.5px; color: var(--head); line-height: 1.18; }
.jr-tool-d { font-size: 14px; color: var(--soft); line-height: 1.5; flex: 1; }
.jr-tool-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--gold-deep); }
.jr-tool-more svg { width: 15px; height: 15px; }

/* ════════ FAQ ════════ */
.jr-faq { max-width: 820px; margin: 44px auto 0; border-top: 1px solid var(--border); }
.jr-faq-item { border-bottom: 1px solid var(--border); }
.jr-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; cursor: pointer; text-align: left; padding: 22px 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--head); letter-spacing: -.01em; }
.jr-faq-q-ic { width: 30px; height: 30px; flex: none; border-radius: 99px; border: 1px solid var(--border-2);
  display: grid; place-items: center; color: var(--head); transition: .2s; }
.jr-faq-q-ic svg { width: 17px; height: 17px; }
.jr-faq-item.is-open .jr-faq-q-ic { background: var(--gold); border-color: var(--gold); color: var(--forest-900); transform: rotate(45deg); }
.jr-faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.jr-faq-item.is-open .jr-faq-a { max-height: 320px; }
.jr-faq-a-in { padding: 0 4px 24px; color: var(--soft); font-size: 16px; line-height: 1.6; max-width: 680px; }

/* ════════ CTA FINAL ════════ */
.jr-cta { position: relative; overflow: hidden; border-radius: 32px; background: var(--deep);
  padding: 76px 40px; text-align: center; }
.jr-cta-glow { position: absolute; inset: 0; background:
  radial-gradient(620px 420px at 50% -10%, rgba(var(--gold-rgb), .22), transparent 60%); pointer-events: none; }
.jr-cta-in { position: relative; max-width: 640px; margin-inline: auto; }
.jr-cta h2 { color: #F6FAF4; font-size: clamp(30px, 4.5vw, 50px); }
.jr-cta h2 em { font-style: normal; color: var(--gold-bright); }
.jr-cta-sub { color: var(--forest-300); font-size: 18px; line-height: 1.6; margin-top: 18px; }
.jr-cta-actions { display: flex; justify-content: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.jr-cta-fine { color: var(--forest-300); font-size: 13.5px; margin-top: 20px; opacity: .8; }

/* ════════ FOOTER ════════ */
.jr-foot { border-top: 1px solid var(--border); padding: 48px 0 40px; }
.jr-foot-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.jr-foot-tag { color: var(--soft); font-size: 14px; margin-top: 10px; max-width: 320px; }
.jr-foot-social { display: flex; gap: 10px; }
.jr-foot-social a { width: 40px; height: 40px; border-radius: 99px; border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--head); transition: .15s; }
.jr-foot-social a svg { width: 18px; height: 18px; }
.jr-foot-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--forest-900); }
.jr-foot-bot { color: var(--faint); font-size: 13px; }
.jr-foot-credit { display: block; margin-top: 6px; opacity: .8; }

/* ════════ CONTINUE APRENDENDO (seção fixa das matérias) ════════ */
.jr-follow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.jr-fw { display: flex; flex-direction: column; gap: 12px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 26px 24px; transition: transform .15s, border-color .15s; }
.jr-fw:hover { transform: translateY(-3px); border-color: var(--gold); }
.jr-fw-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--deep); color: var(--gold-bright);
  display: grid; place-items: center; }
.jr-fw-ic svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.jr-fw-logo { width: 46px; height: 46px; border-radius: 99px; object-fit: cover; border: 1px solid var(--border-2); }
.jr-fw-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.jr:not([data-theme="ink"]) .jr-fw-k { color: var(--gold-deep); }
.jr-fw-tx b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--head); margin-top: 6px; letter-spacing: -.01em; }
.jr-fw-tx p { font-size: 14px; line-height: 1.55; color: var(--soft); margin-top: 6px; }
.jr-fw-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; font-size: 14px; font-weight: 600; color: var(--head); }
.jr-fw-cta svg { width: 15px; height: 15px; transition: transform .15s; }
.jr-fw:hover .jr-fw-cta svg { transform: translateX(3px); }
@media (max-width: 860px) { .jr-follow { grid-template-columns: 1fr; } }

/* ════════ RESPONSIVE ════════ */
@media (max-width: 940px) {
  .jr-hero-in, .jr-bio-in { grid-template-columns: 1fr; gap: 36px; }
  .jr-hero-media, .jr-bio-media { max-width: 420px; }
  .jr-arts, .jr-sims, .jr-tools, .jr-blog { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .jr-section { padding: 64px 0; }
  .jr-arts, .jr-sims, .jr-tools, .jr-bio-stats, .jr-blog { grid-template-columns: 1fr; }
  .jr-bio-stats { grid-template-columns: 1fr 1fr; }
  /* Botões: deixar quebrar e ocupar a largura (evita corte por overflow:hidden nos cartões). */
  .jr-btn { white-space: normal; text-align: center; }
  .jr-hero-actions .jr-btn, .jr-cta-actions .jr-btn { width: 100%; }
  /* Largura fixa do mockup e paddings grandes estouravam em telas estreitas. */
  .jr-cta { padding: 48px 22px; }
  .jr-app { padding: 32px 20px; }
  .jr-phone { width: min(250px, 72vw); }
}

/* Wrapper de páginas de ferramenta (template ferramenta.php) */
.jt-page{background:var(--paper);min-height:60vh}
.jt-wrap{padding:44px 0 72px}

/* Âncoras de seção (ex.: nav "App GPS Portugal" -> /#app) não ficam sob o header sticky (73px) */
.jr-section[id]{scroll-margin-top:88px}

/* ════════ Submenu / dropdown do menu principal ════════ */
.jr-has-sub { position: relative; }
.jr-has-sub > .jr-sub-parent { display: inline-flex; align-items: center; gap: 5px; }
.jr-caret { transition: transform .2s; opacity: .65; }
.jr-has-sub:hover .jr-caret { transform: rotate(180deg); }
/* ponte invisível p/ o hover não se perder no gap até o dropdown */
.jr-has-sub::after { content: ""; position: absolute; top: 100%; left: -8px; right: -8px; height: 14px; }
.jr-sub {
  position: absolute; top: 100%; left: 0; margin-top: 12px; z-index: 60;
  min-width: 232px; list-style: none; padding: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--sh-md);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.jr-has-sub:hover .jr-sub, .jr-has-sub:focus-within .jr-sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.jr-sub a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--soft);
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: .12s; }
.jr-sub a:hover { background: var(--bg-alt); color: var(--head); }
/* subitem no drawer (mobile) — sem hover */
.jr-drawer-sub { padding-left: 22px !important; font-size: 15px !important; color: var(--faint) !important; }
.jr-drawer-sub:hover { color: var(--head) !important; }