/* =====================================================================
   JuntaPlay · Página inicial "leve" (proposta)
   Carregado apenas no index.php, depois dos demais estilos.
   Objetivo: tons claros, contornos suaves, menos blocos escuros,
   tipografia da marca (Figtree/Fredoka) realmente carregada.
   Textos e links da página não são alterados por este arquivo.
   ===================================================================== */

@font-face{font-family:'JuntaPlay Figtree';src:url('font-figtree.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:'JuntaPlay Fredoka';src:url('font-fredoka.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --jl-ink:#0b2b3c;
  --jl-muted:#557080;
  --jl-line:#e2eef0;
  --jl-line-strong:#d3e6e9;
  --jl-bg:#f8fbfb;
  --jl-soft:#f2f9f8;
  --jl-paper:#ffffff;
  --jl-teal:#007f78;
  --jl-teal-text:#00726c;
  --jl-turq:#00c4b8;
  --jl-turq-2:#22d3c5;
  --jl-shadow-sm:0 1px 2px rgba(11,43,60,.04),0 6px 18px rgba(11,43,60,.04);
  --jl-shadow-md:0 2px 6px rgba(11,43,60,.04),0 18px 44px rgba(11,43,60,.07);
  --jl-radius:22px;
}

body{background:var(--jl-bg);font-family:'JuntaPlay Figtree',Figtree,Inter,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:'JuntaPlay Fredoka',Fredoka,'JuntaPlay Figtree',Figtree,'Segoe UI',Arial,sans-serif}
h2{font-weight:500;letter-spacing:-.02em;color:var(--jl-ink)}
h3{font-weight:500;letter-spacing:-.01em}
.eyebrow{color:var(--jl-teal-text);font-weight:700;letter-spacing:.16em}
.section-heading p,.lead{color:var(--jl-muted)}

/* ---------- Botões: um só destaque por bloco, demais suaves ---------- */
.btn{border-radius:14px;font-weight:700;transition:transform .2s,background .2s,box-shadow .2s,border-color .2s,color .2s}
.btn.primary{background:linear-gradient(135deg,var(--jl-turq),var(--jl-turq-2));color:#06303a;box-shadow:0 8px 20px rgba(0,196,184,.18)}
.btn.primary:hover{box-shadow:0 12px 26px rgba(0,196,184,.26)}
.btn.outline{background:var(--jl-paper);border-color:var(--jl-line-strong);color:var(--jl-teal-text)}
.btn.outline:hover{background:#effaf8;border-color:#b5ebe6}

/* ---------- HERO ---------- */
.hero{background:var(--jl-paper);color:var(--jl-ink);border-bottom:1px solid var(--jl-line)}
.hero:before{background:
  radial-gradient(48% 62% at 82% 32%,rgba(0,204,192,.13),transparent 70%),
  radial-gradient(36% 50% at 8% 92%,rgba(0,204,192,.08),transparent 70%),
  linear-gradient(180deg,#ffffff 0%,#f6fbfb 100%)}
.hero:after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(11,43,60,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(11,43,60,.035) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 70% at 70% 40%,#000 0%,transparent 75%);mask-image:radial-gradient(70% 70% at 70% 40%,#000 0%,transparent 75%)}
.hero-grid{position:relative;z-index:1}
.hero .eyebrow.light{background:var(--jl-paper);border:1px solid var(--jl-line-strong);color:var(--jl-ink);border-radius:999px;padding:7px 14px 7px 11px;box-shadow:var(--jl-shadow-sm);font-size:11.5px;letter-spacing:.02em;font-weight:650}
.hero .eyebrow.light .icon{color:var(--jl-teal)}
.hero h1{font-weight:500;letter-spacing:-.03em;line-height:1.05;color:var(--jl-ink)}
.hero h1 em{background:linear-gradient(92deg,#008a82 0%,#00a99f 60%,#13b9ad 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy>p{color:var(--jl-muted)}
.hero .search-bar{background:var(--jl-paper);border:1px solid var(--jl-line-strong);box-shadow:0 14px 36px rgba(11,43,60,.07)}
.hero .search-bar>.icon{color:#7a93a0}
.hero .search-bar .btn.dark{background:linear-gradient(135deg,var(--jl-turq),var(--jl-turq-2));color:#06303a;box-shadow:none}
.hero-points{color:var(--jl-muted);font-weight:600}
.hero-points .icon{color:var(--jl-teal)}

/* Painel de categorias (substitui a imagem 3D) */
.hero-art.jl-art{max-width:520px;width:100%}
.jl-panel{position:relative;padding:22px 22px 18px;border-radius:30px;background:rgba(255,255,255,.72);border:1px solid var(--jl-line);box-shadow:var(--jl-shadow-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.jl-panel .orbit-label{background:var(--jl-paper);border:1px solid var(--jl-line-strong);color:var(--jl-ink);font-size:12px;font-weight:650;box-shadow:var(--jl-shadow-sm)}
.jl-cats{list-style:none;margin:18px 0 16px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.jl-cat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:92px;padding:12px 6px;border-radius:18px;background:var(--jl-paper);border:1px solid var(--jl-line);transition:transform .25s,border-color .25s,box-shadow .25s}
.jl-cat:hover{transform:translateY(-3px);border-color:var(--jl-line-strong);box-shadow:var(--jl-shadow-sm)}
.jl-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:13px}
.jl-ico svg{width:21px;height:21px}
.jl-nome{font-size:12.5px;font-weight:650;color:var(--jl-ink);letter-spacing:-.005em;text-align:center;line-height:1.15}
.jl-mint .jl-ico{background:#e7faf7;color:#007f78}
.jl-sky .jl-ico{background:#e9f1f5;color:#0b3c5a}
.jl-lilac .jl-ico{background:#e3f2f1;color:#007f78}
.jl-peach .jl-ico{background:#fff1ef;color:#e23d4e}
.jl-panel .floating-note{background:var(--jl-soft);border:1px solid var(--jl-line);box-shadow:none;color:var(--jl-ink);font-size:12px;font-weight:600}
.jl-panel .floating-note .icon{color:var(--jl-teal)}

/* ---------- "Do seu jeito" ---------- */
.journey .card{background:var(--jl-paper);border:1px solid var(--jl-line);box-shadow:var(--jl-shadow-sm);border-radius:var(--jl-radius);transition:transform .25s,box-shadow .25s,border-color .25s}
.journey .card:hover{transform:translateY(-3px);box-shadow:var(--jl-shadow-md);border-color:var(--jl-line-strong)}
.journey .illustration{width:92px;height:76px;border-radius:26px 32px 28px 20px}
.journey .illustration>.icon{width:40px;height:40px;stroke-width:1.5}
.journey .illustration.mint{background:#e7faf7}
.journey .illustration.blue{background:#eef4f7}
.journey .illustration.blue>.icon{color:#0b3c5a}
.journey .illustration.coral{background:#fff1ef}
.journey .illustration.coral>.icon{color:#ff4858}
.journey .mini-badge{background:var(--jl-paper)!important;color:var(--jl-teal)!important;border:1px solid var(--jl-line-strong);box-shadow:var(--jl-shadow-sm)}
.journey .illustration.blue .mini-badge{color:#0b3c5a!important}
.journey .illustration.coral .mini-badge{color:#ff4858!important}
.journey .overline{color:#6d8794;letter-spacing:.16em}
.journey .card h3{color:var(--jl-ink)}
.journey .card .btn.primary{background:#effaf8;color:var(--jl-teal-text);border:1px solid #c6f1ed;box-shadow:none}
.journey .card .btn.primary:hover{background:linear-gradient(135deg,var(--jl-turq),var(--jl-turq-2));color:#06303a;border-color:transparent}

/* ---------- Exemplos de grupos ---------- */
.example-card{border-color:var(--jl-line);box-shadow:var(--jl-shadow-sm);border-radius:var(--jl-radius);transition:transform .25s,box-shadow .25s}
.example-card:hover{transform:translateY(-3px);box-shadow:var(--jl-shadow-md)}

/* ---------- Categorias: blocos claros no lugar do azul-marinho ---------- */
.category-section{background:var(--jl-soft);border-color:var(--jl-line)}
.category-card{background:var(--jl-paper);color:var(--jl-ink);border:1px solid var(--jl-line);box-shadow:var(--jl-shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s}
.category-card:hover{transform:translateY(-3px);box-shadow:var(--jl-shadow-md);border-color:#bdeeea}
.category-card>span:first-child{background:#e7faf7;border:1px solid #d3f5f2;color:#007f78}
.category-card h3{color:var(--jl-ink)}
.category-card .category-link{color:var(--jl-teal-text)}
.category-card .category-link .icon{color:var(--jl-teal-text)}

/* ---------- Passo a passo ---------- */
.process-card{border-color:var(--jl-line);box-shadow:var(--jl-shadow-md)}
.tile-icon{background:#e7faf7}

/* ---------- Convite: faixa clara no lugar do bloco escuro ---------- */
.invite{position:relative;overflow:hidden;background:linear-gradient(115deg,#e7faf7 0%,#eef4f7 100%);color:var(--jl-ink);border:1px solid #d6ecea}
.invite:before,.invite:after{content:'';position:absolute;border-radius:50%;pointer-events:none}
.invite:before{width:320px;height:320px;right:-80px;top:-150px;background:radial-gradient(circle,rgba(0,204,192,.16),transparent 70%)}
.invite:after{width:240px;height:240px;left:38%;bottom:-170px;background:radial-gradient(circle,rgba(0,204,192,.14),transparent 70%)}
.invite>*{position:relative;z-index:1}
.invite h2{color:var(--jl-ink)}
.invite p{color:var(--jl-muted)}
.invite .eyebrow,.invite .eyebrow.light{color:var(--jl-teal-text)}

/* Guia logo abaixo: mesma largura do convite e respiro entre os blocos */
.jph-home-guides{width:min(1220px,calc(100% - 48px));margin-top:18px;background:var(--jl-paper);border-color:var(--jl-line);box-shadow:var(--jl-shadow-sm)}
@media(max-width:1100px){.jph-home-guides{width:calc(100% - 44px)}}
@media(max-width:560px){.jph-home-guides{width:calc(100% - 36px)}}

/* ---------- Perguntas ---------- */
.faq-list details summary span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#effaf8;border:1px solid #d3f5f2;color:var(--jl-teal);font-size:18px;line-height:1;flex:0 0 auto}

/* ---------- Aviso de privacidade mais discreto ---------- */
html body #jp-cookie-consent .jp-cookie-banner{width:min(760px,calc(100% - 32px));min-height:0;margin:0 auto 16px;padding:14px 18px;gap:14px;border-radius:18px;border:1px solid var(--jl-line);box-shadow:0 18px 50px rgba(11,43,60,.12)}
html body #jp-cookie-consent .jp-cookie-copy h2{font-size:14.5px;color:var(--jl-ink)}
html body #jp-cookie-consent .jp-cookie-copy>p{margin-top:3px;font-size:13px;color:var(--jl-muted)}
html body #jp-cookie-consent .jp-cookie-button{min-width:0;min-height:40px;padding:9px 16px;border-radius:11px;font-size:14px}
html body #jp-cookie-consent .jp-cookie-button svg{width:16px;height:16px}
html body #jp-cookie-consent .jp-cookie-actions>.jp-cookie-link-button{min-height:40px;font-size:14px}
html body #jp-cookie-consent .jp-cookie-button--terms{background:var(--jl-paper);color:var(--jl-ink);border:1px solid var(--jl-line-strong)}

/* ---------- Responsivo ---------- */
@media(max-width:800px){
  .hero-art.jl-art{max-width:560px;margin:8px auto 0}
  .jl-panel{padding:16px 14px 14px;border-radius:24px}
  .jl-cats{gap:8px;margin:14px 0 12px}
  .jl-cat{min-height:78px;padding:10px 4px;border-radius:15px;gap:6px}
  .jl-ico{width:34px;height:34px;border-radius:11px}
  .jl-ico svg{width:18px;height:18px}
  .jl-nome{font-size:11px}
}
@media(max-width:560px){
  .hero h1{letter-spacing:-.03em}
  .jl-panel .orbit-label{font-size:11px;padding:7px 12px}
  .jl-panel .floating-note{font-size:11px;padding:8px 12px}
  .jl-cat{min-height:70px}
  .jl-nome{font-size:10.5px}
  html body #jp-cookie-consent .jp-cookie-banner{width:100%;margin:0;padding:14px;gap:10px 12px}
  html body #jp-cookie-consent .jp-cookie-button,html body #jp-cookie-consent .jp-cookie-actions>.jp-cookie-link-button{min-height:42px}
}
@media(prefers-reduced-motion:reduce){.jl-cat,.journey .card,.category-card,.example-card{transition:none}.jl-cat:hover,.journey .card:hover,.category-card:hover,.example-card:hover{transform:none}}

/* ---------- Tema escuro: mantém a mesma leveza, em tons noturnos ---------- */
:is(html[data-theme=dark],body[data-theme=dark]) .hero,body[data-theme=dark] .hero{background:#0a2536;color:#e9f5fa;border-color:#1d3e51}
:is(html[data-theme=dark],body[data-theme=dark]) .hero:before{background:radial-gradient(48% 62% at 82% 32%,rgba(0,204,192,.14),transparent 70%),linear-gradient(180deg,#0a2536,#0b2a3c)}
:is(html[data-theme=dark],body[data-theme=dark]) .hero:after{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px)}
:is(html[data-theme=dark],body[data-theme=dark]) .hero h1,:is(html[data-theme=dark],body[data-theme=dark]) .hero .eyebrow.light{color:#e9f5fa}
:is(html[data-theme=dark],body[data-theme=dark]) .hero h1 em{background:linear-gradient(92deg,#3fe0d3,#8cf0e8);-webkit-background-clip:text;background-clip:text;color:transparent}
:is(html[data-theme=dark],body[data-theme=dark]) .hero-copy>p,:is(html[data-theme=dark],body[data-theme=dark]) .hero-points{color:#a9c2cf}
:is(html[data-theme=dark],body[data-theme=dark]) .hero .eyebrow.light,:is(html[data-theme=dark],body[data-theme=dark]) .hero .search-bar,:is(html[data-theme=dark],body[data-theme=dark]) .jl-panel .orbit-label{background:#0f3246;border-color:#25495d}
:is(html[data-theme=dark],body[data-theme=dark]) .hero .search-bar input{color:#e9f5fa}
:is(html[data-theme=dark],body[data-theme=dark]) .jl-panel{background:rgba(13,48,70,.72);border-color:#25495d}
:is(html[data-theme=dark],body[data-theme=dark]) .jl-cat{background:#0f3246;border-color:#25495d}
:is(html[data-theme=dark],body[data-theme=dark]) .jl-nome,:is(html[data-theme=dark],body[data-theme=dark]) .jl-panel .orbit-label,:is(html[data-theme=dark],body[data-theme=dark]) .jl-panel .floating-note{color:#e9f5fa}
:is(html[data-theme=dark],body[data-theme=dark]) .jl-panel .floating-note{background:#123a50;border-color:#25495d}
:is(html[data-theme=dark],body[data-theme=dark]) .jl-ico{background:#16405a!important;color:#7fe9df!important}
:is(html[data-theme=dark],body[data-theme=dark]) .journey .card,:is(html[data-theme=dark],body[data-theme=dark]) .category-card,:is(html[data-theme=dark],body[data-theme=dark]) .jph-home-guides{background:var(--paper);border-color:var(--line)}
:is(html[data-theme=dark],body[data-theme=dark]) .journey .card h3,:is(html[data-theme=dark],body[data-theme=dark]) .category-card h3,:is(html[data-theme=dark],body[data-theme=dark]) h2{color:var(--ink)}
:is(html[data-theme=dark],body[data-theme=dark]) .category-card>span:first-child,:is(html[data-theme=dark],body[data-theme=dark]) .journey .illustration{background:#124b4b;border-color:#1f5c5c}
:is(html[data-theme=dark],body[data-theme=dark]) .journey .card .btn.primary{background:#124b4b;color:#8cf0e8;border-color:#1f5c5c}
:is(html[data-theme=dark],body[data-theme=dark]) .category-section{background:#0c2d40}
:is(html[data-theme=dark],body[data-theme=dark]) .invite{background:linear-gradient(115deg,#0f3a46,#12304a);border-color:#25495d;color:#e9f5fa}
:is(html[data-theme=dark],body[data-theme=dark]) .invite h2{color:#e9f5fa}
:is(html[data-theme=dark],body[data-theme=dark]) .invite p{color:#a9c2cf}
:is(html[data-theme=dark],body[data-theme=dark]) .invite .eyebrow{color:#71dbd3}
:is(html[data-theme=dark],body[data-theme=dark]) .btn.outline{background:transparent;border-color:var(--line);color:var(--teal)}
:is(html[data-theme=dark],body[data-theme=dark]) .faq-list details summary span{background:#124b4b;border-color:#1f5c5c;color:#8cf0e8}

/* ---------- Fontes da marca também nos blocos com fonte própria ---------- */
.jph-home-guides__intro h2{font-family:'JuntaPlay Fredoka',Fredoka,'JuntaPlay Figtree',Arial,sans-serif;font-weight:500;letter-spacing:-.02em}
.jph-home-guides,.jph-home-guides__link strong,.footer,.footer *,html body #jp-cookie-consent{font-family:'JuntaPlay Figtree',Figtree,Inter,'Segoe UI',Arial,sans-serif}
.footer h2,.footer h3,.footer strong{letter-spacing:-.01em}

:is(html[data-theme=dark],body[data-theme=dark]) .hero .search-bar .btn.dark{background:linear-gradient(135deg,var(--jl-turq),var(--jl-turq-2));color:#06303a}

/* =====================================================================
   Ilustrações dos cards "Do seu jeito" (SVG em linha, traço fino)
   ===================================================================== */
.jl-ill{--ji-tint:#e7faf7;--ji-acc:#007f78;--ji-acc-soft:#bdeeea;--ji-paper:#fff;--ji-line:#d8e8ea;--ji-bar:#dfeaed;--ji-bar-soft:#edf3f5;
  width:100%;max-width:248px;margin:0 auto 4px;line-height:0}
.jl-ill--par{--ji-tint:#e9f1f5;--ji-acc:#0b3c5a;--ji-acc-soft:#c6d7e1}
.jl-ill--ide{--ji-tint:#fff1ef;--ji-acc:#ff4858;--ji-acc-soft:#f8cfcc}
.jl-ill-svg{display:block;width:100%;height:auto;overflow:visible}
.jl-ill .ji-blob{fill:var(--ji-tint)}
.jl-ill .ji-paper{fill:var(--ji-paper);stroke:var(--ji-line);stroke-width:1.4}
.jl-ill .ji-paper--back{opacity:.85}
.jl-ill .ji-tint{fill:var(--ji-tint)}
.jl-ill .ji-bar{fill:var(--ji-bar)}
.jl-ill .ji-bar--soft{fill:var(--ji-bar-soft)}
.jl-ill .ji-acc-fill{fill:var(--ji-acc)}
.jl-ill .ji-acc-stroke{stroke:var(--ji-acc);stroke-width:1.7;fill:none}
.jl-ill .ji-w2{stroke-width:2.1}
.jl-ill .ji-flow path{stroke:var(--ji-acc-soft);stroke-width:1.6;stroke-dasharray:3 5}
.jl-ill .ji-flow .ji-flow-acc{stroke:var(--ji-acc);opacity:.55}
.jl-ill .ji-seat{stroke:#fff;stroke-width:2.5}
.jl-ill .ji-open{fill:var(--ji-paper);stroke:var(--ji-acc);stroke-width:1.6;stroke-dasharray:3.2 3.2}
.jl-ill .ji-open--sm{stroke-width:1.4;stroke-dasharray:2.4 2.4}
.jl-ill .ji-mint{fill:#e7faf7}.jl-ill .ji-sky{fill:#e4eef3}.jl-ill .ji-lilac{fill:#e3f2f1}.jl-ill .ji-peach{fill:#fff1ef}
.jl-ill [class*=ji-glyph-]{fill:none;stroke-width:1.6}
.jl-ill .ji-glyph-mint{stroke:#007f78}.jl-ill .ji-glyph-sky{stroke:#0b3c5a}.jl-ill .ji-glyph-lilac{stroke:#007f78}.jl-ill .ji-glyph-peach{stroke:#e23d4e}
.jl-ill .ji-glyph-fill{fill:#0b3c5a;stroke:none}
.jl-ill .ji-tile{stroke:#fff;stroke-width:1.5}
.jl-ill .ji-slot{fill:var(--ji-paper);stroke:var(--ji-acc);stroke-width:1.5;stroke-dasharray:3 3}
.jl-ill .ji-lens{fill:rgba(255,255,255,.62);stroke:var(--ji-acc);stroke-width:2.3}
.jl-ill .ji-found{fill:#e7faf7;stroke:#7fdcd4;stroke-width:1.3}
.jl-ill .ji-found-mark{fill:none;stroke:#007f78;stroke-width:2.2}
.jl-ill .ji-handle{stroke-width:5.5}
.jl-ill .ji-trail{fill:none;stroke:var(--ji-acc);stroke-width:1.6;stroke-dasharray:2 5;opacity:.75}
.jl-ill .ji-glow{fill:#fff8f7;opacity:.9}
.jl-ill .ji-bulb-body{fill:#fff;stroke:var(--ji-acc);stroke-width:1.7}
.jl-ill .ji-ray{stroke:#00ccc0;stroke-width:1.8;fill:none}
.jl-ill .ji-spark{fill:var(--ji-acc);opacity:.55}
.jl-ill .ji-spark--b{opacity:.3}

/* Movimento leve: flutuação lenta do elemento principal; tracejados "andam" ao passar o mouse */
.jl-ill .ji-float{transform-box:fill-box;transform-origin:center;animation:jiFloat 5.5s ease-in-out infinite}
.jl-ill--par .ji-float{animation-duration:6.5s}
.jl-ill--ide .ji-bulb{animation-duration:6s}
.jl-ill--ide .ji-float--slot{animation:none}
@keyframes jiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes jiDash{to{stroke-dashoffset:-32}}
@keyframes jiGlow{0%,100%{opacity:.75}50%{opacity:1}}
.jl-ill--ide .ji-glow{animation:jiGlow 3.2s ease-in-out infinite}
.journey .card:hover .jl-ill .ji-flow path,.journey .card:hover .jl-ill .ji-trail{animation:jiDash 1.6s linear infinite}
.journey .card:hover .jl-ill--ide .ji-float--slot{animation:jiFloat 1.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.jl-ill *{animation:none!important}}
@media(max-width:560px){.jl-ill{max-width:220px}}

/* Tema escuro */
:is(html[data-theme=dark],body[data-theme=dark]) .jl-ill{--ji-tint:#103f47;--ji-acc:#6fe3d8;--ji-acc-soft:#2b6a6c;--ji-paper:#0f3246;--ji-line:#2a4e62;--ji-bar:#24485c;--ji-bar-soft:#1b3d50}
:is(html[data-theme=dark],body[data-theme=dark]) .jl-ill--par{--ji-tint:#123a50;--ji-acc:#a9c8d8;--ji-acc-soft:#2a4e62}
:is(html[data-theme=dark],body[data-theme=dark]) .jl-ill--ide{--ji-tint:#3f1f26;--ji-acc:#ff8c96;--ji-acc-soft:#6b3a45}
:is(html[data-theme=dark],body[data-theme=dark]) .jl-ill .ji-seat,:is(html[data-theme=dark],body[data-theme=dark]) .jl-ill .ji-tile{stroke:#0f3246}
:is(html[data-theme=dark],body[data-theme=dark]) .jl-ill .ji-lens{fill:rgba(15,50,70,.55)}
:is(html[data-theme=dark],body[data-theme=dark]) .jl-ill .ji-glow{fill:#3f1f26;opacity:.6}
:is(html[data-theme=dark],body[data-theme=dark]) .jl-ill .ji-bulb-body{fill:#0f3246}
.jl-ill .ji-dot{stroke:none}
.jl-ill .ji-glyph-mint.ji-dot{fill:#007f78}.jl-ill .ji-glyph-peach.ji-dot{fill:#e23d4e}
.jl-ill--par .ji-sky{fill:#d6e4eb}.jl-ill--par .ji-mint{fill:#c6f1ed}.jl-ill--par .ji-lilac{fill:#c8e4e1}
:is(html[data-theme=dark],body[data-theme=dark]) .jl-ill--par :is(.ji-sky,.ji-mint,.ji-lilac){fill:#2a5872}

/* =====================================================================
   Cards "Qual grupo combina com você?" — tons pastel por categoria
   (mesma paleta do painel do topo: menta, azul, lilás, pêssego)
   ===================================================================== */
.example-card.ex-mint{--ex-tint:#e7faf7;--ex-tint2:#f3fcfb;--ex-line:#c6f1ed;--ex-ink:#006f69;--ex-acc:#007f78;--ex-sh:0,127,120}
.example-card.ex-sky{--ex-tint:#e9f1f5;--ex-tint2:#f5f8fa;--ex-line:#d2e0e8;--ex-ink:#042940;--ex-acc:#0b3c5a;--ex-sh:4,41,64}
.example-card.ex-lilac{--ex-tint:#e3f2f1;--ex-tint2:#f2f9f8;--ex-line:#c8e4e1;--ex-ink:#006760;--ex-acc:#007f78;--ex-sh:0,127,120}
.example-card.ex-peach{--ex-tint:#e7faf7;--ex-tint2:#f3fcfb;--ex-line:#c6f1ed;--ex-ink:#006f69;--ex-acc:#007f78;--ex-sh:0,127,120}
.example-card[class*=ex-]{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--ex-tint) 0%,var(--ex-tint2) 46%,#fff 100%);
  border:1px solid var(--ex-line);
  box-shadow:0 1px 2px rgba(var(--ex-sh),.06),0 12px 30px rgba(var(--ex-sh),.10)}
.example-card[class*=ex-]::before{content:"";position:absolute;z-index:-1;top:-62px;right:-58px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--ex-sh),.13) 0%,rgba(var(--ex-sh),.05) 45%,rgba(var(--ex-sh),0) 70%)}
.example-card[class*=ex-]:hover{box-shadow:0 2px 6px rgba(var(--ex-sh),.08),0 22px 46px rgba(var(--ex-sh),.16);border-color:rgba(var(--ex-sh),.32)}
.example-card[class*=ex-] .service-icon{background:#fff;color:var(--ex-acc);border:1px solid var(--ex-line);box-shadow:0 6px 16px rgba(var(--ex-sh),.14)}
.example-card[class*=ex-] .badge.muted{background:rgba(255,255,255,.78);color:var(--ex-ink);border:1px solid var(--ex-line)}
.example-card[class*=ex-]>small{color:#5d7280}
.example-card[class*=ex-] .vacancy-label{color:var(--ex-ink)}
.example-card[class*=ex-] .btn.outline{background:#fff;border-color:var(--ex-line);color:var(--ex-ink)}
.example-card[class*=ex-] .btn.outline:hover{background:var(--ex-tint);border-color:rgba(var(--ex-sh),.38)}
.example-card[class*=ex-] .btn.outline:focus-visible{outline:2px solid var(--ex-acc);outline-offset:2px}
:is(html[data-theme=dark],body[data-theme=dark]) .example-card[class*=ex-]{background:linear-gradient(180deg,rgba(var(--ex-sh),.20) 0%,rgba(var(--ex-sh),.07) 50%,#0f3246 100%),#0f3246;border-color:rgba(var(--ex-sh),.34);box-shadow:0 14px 34px rgba(0,0,0,.22)}
:is(html[data-theme=dark],body[data-theme=dark]) .example-card[class*=ex-]::before{background:radial-gradient(circle,rgba(var(--ex-sh),.22) 0%,rgba(var(--ex-sh),0) 70%)}
:is(html[data-theme=dark],body[data-theme=dark]) .example-card.ex-mint{--ex-ink:#7fe6dc;--ex-acc:#6fe3d8}
:is(html[data-theme=dark],body[data-theme=dark]) .example-card.ex-sky{--ex-ink:#b6d0dd;--ex-acc:#a9c8d8}
:is(html[data-theme=dark],body[data-theme=dark]) .example-card.ex-lilac{--ex-ink:#9fdcd5;--ex-acc:#7fcfc7}
:is(html[data-theme=dark],body[data-theme=dark]) .example-card.ex-peach{--ex-ink:#7fe6dc;--ex-acc:#6fe3d8}
:is(html[data-theme=dark],body[data-theme=dark]) .example-card[class*=ex-] :is(.service-icon,.badge.muted,.btn.outline){background:rgba(10,36,52,.55);border-color:rgba(var(--ex-sh),.38)}
:is(html[data-theme=dark],body[data-theme=dark]) .example-card[class*=ex-]>small{color:#a4b9c5}
:is(html[data-theme=dark],body[data-theme=dark]) .example-card[class*=ex-] .btn.outline:hover{background:rgba(var(--ex-sh),.20)}

/* =====================================================================
   Botões de direcionamento em tons leves (cada um na cor do seu card)
   ===================================================================== */
.journey .card.jl-step--org{--st-a:#e7faf7;--st-b:#d3f5f2;--st-c:#b8eeea;--st-line:#ade9e4;--st-ink:#00625c;--st-sh:0,127,120}
.journey .card.jl-step--par{--st-a:#e4eef3;--st-b:#d6e4eb;--st-c:#c9dae4;--st-line:#b8cdd9;--st-ink:#042940;--st-sh:4,41,64}
.journey .card.jl-step--ide{--st-a:#e7faf7;--st-b:#d3f5f2;--st-c:#b8eeea;--st-line:#ade9e4;--st-ink:#00625c;--st-sh:0,127,120}
.journey .card.jl-step .btn.primary{background:linear-gradient(180deg,var(--st-a) 0%,var(--st-b) 100%);color:var(--st-ink);border:1px solid var(--st-line);
  font-weight:700;box-shadow:0 1px 2px rgba(var(--st-sh),.08),0 6px 16px rgba(var(--st-sh),.12);transition:background .2s,box-shadow .2s,transform .2s,border-color .2s}
.journey .card.jl-step .btn.primary .icon{transition:transform .2s}
.journey .card.jl-step .btn.primary:hover{background:linear-gradient(180deg,var(--st-b) 0%,var(--st-c) 100%);color:var(--st-ink);border-color:rgba(var(--st-sh),.45);
  box-shadow:0 2px 4px rgba(var(--st-sh),.10),0 10px 22px rgba(var(--st-sh),.18);transform:translateY(-1px)}
.journey .card.jl-step .btn.primary:hover .icon{transform:translateX(3px)}
.journey .card.jl-step .btn.primary:focus-visible{outline:2px solid rgba(var(--st-sh),.7);outline-offset:2px}

.example-card[class*=ex-] .btn.outline{background:linear-gradient(180deg,var(--ex-tint2) 0%,var(--ex-tint) 100%);border-color:rgba(var(--ex-sh),.26);color:var(--ex-ink);
  box-shadow:0 1px 2px rgba(var(--ex-sh),.06),0 6px 14px rgba(var(--ex-sh),.10);transition:background .2s,box-shadow .2s,transform .2s}
.example-card[class*=ex-] .btn.outline .icon{transition:transform .2s}
.example-card[class*=ex-] .btn.outline:hover{background:var(--ex-tint);border-color:rgba(var(--ex-sh),.42);box-shadow:0 2px 4px rgba(var(--ex-sh),.08),0 10px 20px rgba(var(--ex-sh),.16);transform:translateY(-1px)}
.example-card[class*=ex-] .btn.outline:hover .icon{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.journey .card.jl-step .btn.primary,.example-card[class*=ex-] .btn.outline,.journey .card.jl-step .btn .icon,.example-card[class*=ex-] .btn .icon{transition:none;transform:none!important}}

:is(html[data-theme=dark],body[data-theme=dark]) .journey .card.jl-step--org{--st-ink:#8cf0e8}
:is(html[data-theme=dark],body[data-theme=dark]) .journey .card.jl-step--par{--st-ink:#bcd4e0}
:is(html[data-theme=dark],body[data-theme=dark]) .journey .card.jl-step--ide{--st-ink:#8cf0e8}
:is(html[data-theme=dark],body[data-theme=dark]) .journey .card.jl-step .btn.primary{background:rgba(var(--st-sh),.16);border-color:rgba(var(--st-sh),.45);box-shadow:none}
:is(html[data-theme=dark],body[data-theme=dark]) .journey .card.jl-step .btn.primary:hover{background:rgba(var(--st-sh),.26);border-color:rgba(var(--st-sh),.6)}
:is(html[data-theme=dark],body[data-theme=dark]) .example-card[class*=ex-] .btn.outline{background:rgba(var(--ex-sh),.16);border-color:rgba(var(--ex-sh),.42);box-shadow:none}
:is(html[data-theme=dark],body[data-theme=dark]) .example-card[class*=ex-] .btn.outline:hover{background:rgba(var(--ex-sh),.26)}

/* =====================================================================
   Sombreamento leve e singelo nos contornos de todos os cards da home
   (tom derivado do azul-marinho da marca #042940)
   ===================================================================== */
:root{--jl-shadow-xs:0 1px 2px rgba(4,41,64,.05),0 3px 10px rgba(4,41,64,.05);
  --jl-shadow-sm:0 1px 2px rgba(4,41,64,.05),0 5px 16px rgba(4,41,64,.065);
  --jl-shadow-md:0 2px 6px rgba(4,41,64,.06),0 16px 36px rgba(4,41,64,.095)}
.jl-cat{box-shadow:var(--jl-shadow-xs)}
.jl-cat:hover{box-shadow:var(--jl-shadow-sm)}
.jl-panel .floating-note{box-shadow:var(--jl-shadow-xs)}
.journey .card,.category-card,.process-card,.jph-home-guides,.invite,.jp-brand-notice{box-shadow:var(--jl-shadow-sm)}
.jph-home-guides__link{box-shadow:var(--jl-shadow-xs)}
.process-card,.jl-panel{box-shadow:var(--jl-shadow-md)}
:is(html[data-theme=dark],body[data-theme=dark]){--jl-shadow-xs:0 1px 2px rgba(0,0,0,.18),0 3px 10px rgba(0,0,0,.16);
  --jl-shadow-sm:0 1px 2px rgba(0,0,0,.20),0 6px 18px rgba(0,0,0,.20);--jl-shadow-md:0 2px 6px rgba(0,0,0,.22),0 16px 36px rgba(0,0,0,.26)}

/* =====================================================================
   Ícones com sombreado harmônico (tons derivados da marca)
   turquesa #00ccc0 · azul-marinho #042940 · petróleo #007f78 · coral #ff4858
   ===================================================================== */
.jl-ic-turq,.jl-cat.jl-mint,.category-grid>a:nth-child(1),.category-grid>a:nth-child(6),.split-section .feature-line:nth-of-type(1),.process-step:nth-of-type(1),.process-foot,.jph-home-guides__link:nth-child(1){
  --ic-a:#f3fdfb;--ic-b:#d3f5f0;--ic-ring:rgba(0,204,192,.30);--ic-ink:#007f78;--ic-sh:0,160,150}
.jl-cat.jl-sky,.category-grid>a:nth-child(2),.category-grid>a:nth-child(4),.split-section .feature-line:nth-of-type(2),.process-step:nth-of-type(2),.jph-home-guides__link:nth-child(2){
  --ic-a:#f2f8fc;--ic-b:#d5e6f1;--ic-ring:rgba(4,41,64,.13);--ic-ink:#0b3c5a;--ic-sh:4,41,64}
.jl-cat.jl-lilac,.category-grid>a:nth-child(3),.category-grid>a:nth-child(5){
  --ic-a:#f1f9f8;--ic-b:#d2eae7;--ic-ring:rgba(0,127,120,.24);--ic-ink:#006760;--ic-sh:0,127,120}
.jl-cat.jl-peach,.process-step:nth-of-type(3),.jph-home-guides__link:nth-child(3){
  --ic-a:#fff8f7;--ic-b:#ffe0dd;--ic-ring:rgba(255,72,88,.22);--ic-ink:#d63445;--ic-sh:255,72,88}

.jl-cat .jl-ico,.category-card>span:first-child,.split-section .tile-icon,.process-step b,.jph-home-guides__icon{
  background:linear-gradient(145deg,var(--ic-a) 0%,var(--ic-b) 100%)!important;color:var(--ic-ink)!important;border:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px var(--ic-ring),0 6px 14px -5px rgba(var(--ic-sh),.32)!important}
.process-step b{font-weight:800;letter-spacing:.02em}
.jl-cat:hover .jl-ico,.category-card:hover>span:first-child{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px var(--ic-ring),0 9px 18px -6px rgba(var(--ic-sh),.42)!important}
.process-foot svg,.hero-points span svg{box-sizing:border-box;border-radius:50%;flex:none;
  background:linear-gradient(145deg,#f3fdfb 0%,#d3f5f0 100%);color:#007f78;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(0,204,192,.30),0 4px 10px -4px rgba(0,160,150,.35)}
.process-foot svg{width:28px;height:28px;padding:6px}
.hero-points span svg{width:22px!important;height:22px!important;padding:4px}
.jp-brand-notice__icon{background:linear-gradient(145deg,#4fdcd2 0%,#00bfb3 100%)!important;color:#042940!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px -5px rgba(0,160,150,.45)}

/* Destaques suaves: brilhos radiais nas cores da marca, contidos em cada seção */
.examples-section,.split-section,.faq-home{position:relative;isolation:isolate}
main>section.section.wrap:has(.journey){position:relative;isolation:isolate}
main>section.section.wrap:has(.journey)::before,.examples-section::before,.split-section::before,.faq-home::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
main>section.section.wrap:has(.journey)::before{background:radial-gradient(closest-side at 24% 38%,rgba(0,204,192,.10),transparent),radial-gradient(closest-side at 80% 72%,rgba(255,72,88,.055),transparent)}
.examples-section::before{background:radial-gradient(closest-side at 76% 30%,rgba(0,204,192,.09),transparent),radial-gradient(closest-side at 22% 76%,rgba(4,41,64,.045),transparent)}
.split-section::before{background:radial-gradient(closest-side at 72% 50%,rgba(0,204,192,.12),transparent),radial-gradient(closest-side at 22% 70%,rgba(4,41,64,.04),transparent)}
.faq-home::before{background:radial-gradient(closest-side at 24% 40%,rgba(0,204,192,.07),transparent)}
.process-card{background:radial-gradient(120% 80% at 100% 0%,rgba(0,204,192,.07),transparent 55%),#fff}

/* Tema escuro */
:is(html[data-theme=dark],body[data-theme=dark]) :is(.jl-cat.jl-mint,.category-grid>a:nth-child(1),.category-grid>a:nth-child(6),.split-section .feature-line:nth-of-type(1),.process-step:nth-of-type(1),.jph-home-guides__link:nth-child(1)){--ic-a:rgba(0,204,192,.22);--ic-b:rgba(0,204,192,.10);--ic-ring:rgba(0,204,192,.34);--ic-ink:#7fe9df}
:is(html[data-theme=dark],body[data-theme=dark]) :is(.jl-cat.jl-sky,.category-grid>a:nth-child(2),.category-grid>a:nth-child(4),.split-section .feature-line:nth-of-type(2),.process-step:nth-of-type(2),.jph-home-guides__link:nth-child(2)){--ic-a:rgba(169,200,216,.18);--ic-b:rgba(169,200,216,.07);--ic-ring:rgba(169,200,216,.28);--ic-ink:#bcd4e0}
:is(html[data-theme=dark],body[data-theme=dark]) :is(.jl-cat.jl-lilac,.category-grid>a:nth-child(3),.category-grid>a:nth-child(5)){--ic-a:rgba(0,127,120,.34);--ic-b:rgba(0,127,120,.16);--ic-ring:rgba(0,170,160,.34);--ic-ink:#9fdcd5}
:is(html[data-theme=dark],body[data-theme=dark]) :is(.jl-cat.jl-peach,.process-step:nth-of-type(3),.jph-home-guides__link:nth-child(3)){--ic-a:rgba(255,72,88,.20);--ic-b:rgba(255,72,88,.08);--ic-ring:rgba(255,72,88,.32);--ic-ink:#ffa3ab}
:is(html[data-theme=dark],body[data-theme=dark]) :is(.jl-cat .jl-ico,.category-card>span:first-child,.split-section .tile-icon,.process-step b,.jph-home-guides__icon){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px var(--ic-ring),0 6px 14px -5px rgba(0,0,0,.45)!important}
:is(html[data-theme=dark],body[data-theme=dark]) :is(.process-foot svg,.hero-points span svg){background:rgba(0,204,192,.16);color:#7fe9df;box-shadow:0 0 0 1px rgba(0,204,192,.32)}
:is(html[data-theme=dark],body[data-theme=dark]) .process-card{background:radial-gradient(120% 80% at 100% 0%,rgba(0,204,192,.08),transparent 55%),#0d3046;border-color:#294759}
:is(html[data-theme=dark],body[data-theme=dark]) :is(main>section.section.wrap:has(.journey),.examples-section,.split-section,.faq-home)::before{opacity:.7}

/* Ilustração discreta na seção de transparência. */
.jp-transparency-card{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:32px}
.jp-transparency-art{display:flex;align-items:center;justify-content:center}
.jp-transparency-art img{display:block;width:160px;max-width:100%;height:auto}
.jp-transparency-content{min-width:0}
.jp-transparency-content .btn{margin-top:8px}
@media(max-width:760px){.jp-transparency-card{grid-template-columns:120px minmax(0,1fr);gap:20px}.jp-transparency-art img{width:120px}}
@media(max-width:560px){.jp-transparency-card{grid-template-columns:minmax(0,1fr);gap:16px}.jp-transparency-art{justify-content:flex-start}.jp-transparency-art img{width:112px}}