/* Portfólio de Rodrigo Arraes
   Base clara; Courtvision na identidade real do app (escuro, azul, Faustina); JobHuntr em verde. */

@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/geist.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/geist-mono.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Faustina";src:url("../fonts/faustina.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --papel:#f3f0ea; --folha:#fffdf9; --tinta:#17181b; --tinta-2:#43454b; --tinta-3:#62646a; --linha:rgba(23,24,27,.13);
  --foco:#1d4ed8;
  --arco:#1f2c44; --arco-2:#2e4166;
  --cv-bg:#0F0E0D; --cv-panel:#151412; --cv-panel-2:#1B1A17; --cv-line:rgba(250,250,249,.12); --cv-fg:#FAFAF9; --cv-fg-2:#D6D4CF; --cv-fg-3:#A6A39C; --cv-acc:#82B5F5; --cv-live:#3CCB7F; --cv-warn:#E2B85A;
  --jh:#0f7a64; --jh-forte:#0b5c4c; --jh-claro:#e2f2ec; --jh-tinta:#0c2b24;
  --display:"Bricolage Grotesque","Geist",system-ui,sans-serif;
  --texto:"Geist","Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --serif:"Faustina",Georgia,serif;
  --gutter:clamp(16px,4vw,56px); --max:1240px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:17px/1.6 var(--texto);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg,video{max-width:100%}
img{display:block;height:auto}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--foco);outline-offset:3px;border-radius:6px}
.escuro{--foco:#82B5F5}
.verde{--foco:#ffffff}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:12px;top:-60px;z-index:100;background:var(--tinta);color:var(--papel);padding:10px 14px;border-radius:8px;text-decoration:none}
.pular:focus{top:12px}
.eyebrow{display:block;font:500 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
code{font-family:var(--mono);font-size:.92em}

/* ---------- topo ---------- */
.top{position:sticky;top:0;z-index:50;color:var(--tinta);--foco:#1d4ed8;background:color-mix(in srgb,var(--papel) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linha)}
.top .wrap{display:flex;align-items:center;gap:24px;height:68px}
.nome{font:700 19px/1 var(--display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{text-decoration:none;font-size:15px;color:var(--tinta-2);padding:8px 12px;border-radius:100px}
.nav a:hover{color:var(--tinta);background:var(--linha)}
.nav a[aria-current="page"]{color:var(--tinta);font-weight:600}
.li{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:15px;background:#0a66c2;color:#fff;border-radius:100px;padding:9px 16px;white-space:nowrap;transition:background .2s}
.li:hover{background:#004182}
.li svg{width:16px;height:16px;fill:currentColor}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--linha);border-radius:100px;padding:8px 14px;font-size:15px;min-height:40px}
@media (max-width:860px){
  .nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:var(--papel);border-bottom:1px solid var(--linha);padding:8px var(--gutter) 16px}
  .nav.aberto{display:flex}
  .nav a{padding:12px}
  .menu-btn{display:block}
  .li span{display:none}
  .li{padding:11px}
}

/* ---------- home: abertura ---------- */
.hero{padding:clamp(36px,5.5vw,72px) 0 28px}
.hero h1{font:700 clamp(34px,4.3vw,62px)/1.04 var(--display);letter-spacing:-.035em;margin:0;max-width:21ch}
.js .hero h1 .w{display:inline-block;opacity:0;transform:translateY(.4em);animation:sobe .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i)*55ms + 120ms)}
.hero h1 .k{position:relative;white-space:nowrap}
.hero h1 .k::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.12em;border-radius:.1em;background:var(--c);transform:scaleX(0);transform-origin:left;animation:risca .7s cubic-bezier(.6,0,.2,1) forwards;animation-delay:var(--d)}
.hero h1 .k.cv{--c:var(--cv-acc);--d:1.15s}
.hero h1 .k.jh{--c:var(--jh);--d:1.45s}
@keyframes sobe{to{opacity:1;transform:none}}
@keyframes entra{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes risca{to{transform:scaleX(1)}}
.hero-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.selo-cert{width:clamp(104px,13vw,184px);height:auto;margin-right:clamp(0px,3vw,48px)}
.js .selo-cert{opacity:0;animation:sobe .7s 1.6s ease-out forwards}
.hero-pe{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline;margin-top:22px}
.js .hero-pe{opacity:0;animation:sobe .7s .9s ease-out forwards}
.hero-pe p{margin:0;max-width:52ch;color:var(--tinta-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{font-size:14px;border:1px solid var(--linha);border-radius:100px;padding:5px 12px;color:var(--tinta-2)}

.portas{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;padding-bottom:clamp(48px,7vw,96px)}
@media (max-width:900px){.portas{grid-template-columns:1fr}}
.porta{position:relative;border-radius:24px;padding:clamp(22px,2.6vw,34px);text-decoration:none;display:flex;flex-direction:column;min-height:400px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.js .porta{animation:entra .8s cubic-bezier(.2,.7,.2,1) both}
.porta:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.14)}
.porta p{margin:12px 0 0;max-width:40ch}
.porta .ir{margin-top:auto;padding-top:18px;font-weight:600;display:inline-flex;gap:8px;align-items:center}
.porta .ir i{font-style:normal;transition:transform .2s}
.porta:hover .ir i{transform:translateX(4px)}
.porta.cv{background:var(--cv-bg);color:var(--cv-fg);animation-delay:.55s;--foco:#82B5F5}
.porta.cv p{color:var(--cv-fg-2)}
.porta.jh{background:var(--jh);color:#fff;animation-delay:.7s;--foco:#fff}
.porta.jh p{color:#eaf7f2}
.porta .rot{font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.porta .titulo-jh{font:800 clamp(40px,4.4vw,58px)/1 var(--display);letter-spacing:-.04em;margin-top:14px}
.nota{font-size:13px;line-height:1.4;opacity:.8;margin-top:10px}

/* wordmark real do Courtvision */
.wm{font:400 1em/1 var(--serif);letter-spacing:-.015em;white-space:nowrap;display:inline-flex;align-items:baseline;margin:0}
.wm .u{display:inline-block;width:.5em;height:.5em;margin:0 .02em;position:relative;top:.02em;overflow:visible}
.wm .u path{stroke:currentColor}
.wm .by{font:400 .3em/1 var(--texto);color:var(--cv-fg-3);margin-left:.6em;align-self:center}
.porta.cv .wm{font-size:clamp(40px,4.6vw,60px);margin-top:14px}
.desenha .u .a{stroke-dasharray:1;stroke-dashoffset:1;animation:traco 1.1s .9s cubic-bezier(.6,0,.2,1) forwards}
.desenha .u .b{stroke-dasharray:1;stroke-dashoffset:1;animation:traco .5s 1.8s ease-out forwards}
.desenha .u .c{opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center;animation:pinga .5s 2.1s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes traco{to{stroke-dashoffset:0}}
@keyframes pinga{to{opacity:1;transform:scale(1)}}

.spark{margin-top:18px;width:100%;max-width:460px;height:auto;overflow:visible}
.spark .esp{stroke:var(--cv-fg-3);stroke-dasharray:2 2.4;fill:none;stroke-width:.9}
.spark .real{stroke:var(--cv-acc);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:traco 2s 1.2s cubic-bezier(.5,0,.3,1) forwards}
.spark .pt{fill:var(--cv-acc);opacity:0;animation:pinga .4s 3.1s forwards;transform-box:fill-box;transform-origin:center}
.spark .anel{fill:none;stroke:var(--cv-acc);stroke-width:.8;transform-box:fill-box;transform-origin:center;opacity:0;animation:pulso 2.2s 3.3s ease-out 4}
.spark text{font:500 3.6px var(--texto);fill:var(--cv-fg-3)}
.spark .tag{fill:var(--cv-acc);font-weight:600}
@keyframes pulso{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(4)}}

.mini{position:relative;margin-top:18px;max-width:420px;display:flex;flex-direction:column;gap:6px}
.mini .mv{display:flex;align-items:center;gap:10px;background:#fff;color:var(--jh-tinta);border-radius:10px;padding:8px 10px 8px 12px;font-size:13.5px;box-shadow:0 6px 16px rgba(0,0,0,.14)}
.mini .mv b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tagp{margin-left:auto;font:600 12px/1 var(--mono);background:var(--jh-claro);color:var(--jh-forte);border-radius:6px;padding:6px 8px;letter-spacing:.03em}
.mini .tagp{font-size:11px;padding:5px 7px}
.tagp.t-res{background:#fbecc6;color:#6b4800}
.tagp.t-no{background:#f6e1de;color:#8a2b22}
.mini .m3 b{opacity:.55}
.mini .mpronto{align-self:flex-start;margin-top:4px;font:600 12.5px/1 var(--mono);color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:100px;padding:7px 12px}
.mini .mpronto i{font-style:normal}
.js .mini.roda .mv{animation:mini-vaga 6s cubic-bezier(.2,.7,.2,1) 3 both}
.js .mini.roda .m2{animation-name:mini-vaga2}.js .mini.roda .m3{animation-name:mini-vaga3}
.js .mini.roda .tagp{animation:mini-tag 6s cubic-bezier(.3,1.5,.5,1) 3 both}
.js .mini.roda .m2 .tagp{animation-name:mini-tag2}.js .mini.roda .m3 .tagp{animation-name:mini-tag3}
.js .mini.roda .mpronto{animation:mini-pronto 6s ease 3 both}
@keyframes mini-vaga{0%{opacity:0;transform:translateY(8px)}6%,100%{opacity:1;transform:none}}
@keyframes mini-vaga2{0%,8%{opacity:0;transform:translateY(8px)}14%,100%{opacity:1;transform:none}}
@keyframes mini-vaga3{0%,16%{opacity:0;transform:translateY(8px)}22%,100%{opacity:1;transform:none}}
@keyframes mini-tag{0%,30%{opacity:0;transform:scale(.6)}36%,100%{opacity:1;transform:none}}
@keyframes mini-tag2{0%,40%{opacity:0;transform:scale(.6)}46%,100%{opacity:1;transform:none}}
@keyframes mini-tag3{0%,50%{opacity:0;transform:scale(.6)}56%,100%{opacity:1;transform:none}}
@keyframes mini-pronto{0%,64%{opacity:0;transform:translateY(6px)}72%,100%{opacity:1;transform:none}}

/* sem JavaScript: conteúdo estático e completo */
.so-js{display:none}
.js .so-js{display:block}
.hist:not(.pronta) .passo{position:static;opacity:1;visibility:visible;transform:none;margin-bottom:18px}
.hist:not(.pronta) .hist-ctl,.hist:not(.pronta) .hist-vis>:not(.cartao):not(.vis-top){display:none}
.hist:not(.pronta) .hist-vis [data-de]{opacity:1}
.hist:not(.pronta) .cartao{position:static;margin-top:12px}

/* ---------- faixas de projeto na home ---------- */
.faixa{padding:clamp(56px,8vw,112px) 0}
.faixa h2{font:700 clamp(30px,3.6vw,48px)/1.08 var(--display);letter-spacing:-.03em;margin:8px 0 0;max-width:22ch}
.faixa.cv{background:var(--cv-bg);color:var(--cv-fg)}
.faixa.cv .eyebrow{color:var(--cv-fg-3)}
.faixa.jh{background:var(--jh-claro);color:var(--jh-tinta)}
.faixa.jh .eyebrow{color:var(--jh-forte)}
.acao{display:inline-flex;gap:8px;font-weight:600;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.faixa-top{display:flex;justify-content:space-between;gap:24px;align-items:end;flex-wrap:wrap;margin-bottom:32px}

/* ---------- história (demonstração em passos) ---------- */
.hist{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:clamp(20px,3vw,48px);align-items:stretch;color:var(--cv-fg)}
@media (max-width:900px){.hist{grid-template-columns:minmax(0,1fr)}}
.hist-txt{position:relative;display:flex;flex-direction:column}
.hist-passos{position:relative;flex:1;min-height:300px}
@media (max-width:900px){.hist-passos{min-height:250px}}
.passo{position:absolute;inset:0;opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease;visibility:hidden}
.passo.on{opacity:1;transform:none;visibility:visible}
.passo .n{font:500 13px/1 var(--mono);color:var(--cv-acc);letter-spacing:.06em;text-transform:uppercase}
.passo h3{font:700 clamp(24px,2.5vw,34px)/1.12 var(--display);letter-spacing:-.025em;margin:10px 0 12px}
.passo p{margin:0 0 10px;color:var(--cv-fg-2);max-width:46ch}
.hist-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.hist-ctl button{background:var(--cv-panel-2);border:1px solid var(--cv-line);color:var(--cv-fg);border-radius:100px;height:44px;min-width:44px;padding:0 16px}
.hist-ctl button:hover{border-color:var(--cv-fg-3)}
.pontos{display:flex;gap:6px;margin-left:6px}
.pontos button{width:28px;min-width:0;height:24px;padding:0;border-radius:6px;background:transparent;border:0;position:relative}
.pontos button::before{content:"";position:absolute;left:0;right:0;top:9px;height:6px;border-radius:6px;background:var(--cv-line)}
.pontos button.on::before{background:var(--cv-acc)}
.pontos button.feito::before{background:var(--cv-fg-3)}
.hist-vis{position:relative;background:var(--cv-panel);border:1px solid var(--cv-line);border-radius:20px;padding:18px 18px 14px;container-type:inline-size;min-height:380px;overflow:hidden}
.vis-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--cv-fg-3)}
.vis-top b{color:var(--cv-fg);font-weight:600}
.vis-top .simul{display:inline-flex;align-items:center;gap:6px}
.vis-top .simul::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cv-warn)}
.grafico{width:100%;height:auto;display:block;margin-top:6px;overflow:visible;transition:opacity .5s}
.grafico .eixo{stroke:var(--cv-line);stroke-width:.5}
.grafico .q{stroke:var(--cv-line);stroke-width:.35;stroke-dasharray:1 1.4}
.grafico text{font:400 3.3px var(--texto);fill:var(--cv-fg-3)}
.grafico .esp{fill:none;stroke:var(--cv-fg-3);stroke-width:.7;stroke-dasharray:1.6 1.6}
.grafico .real{fill:none;stroke:var(--cv-acc);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.grafico .p{fill:var(--cv-panel);stroke:var(--cv-acc);stroke-width:.9}
.grafico .p.sinal{fill:var(--cv-acc)}
.grafico .anel{fill:none;stroke:var(--cv-acc);stroke-width:.5;transform-box:fill-box;transform-origin:center;opacity:0}
.grafico .exc{stroke:var(--cv-acc);stroke-width:.7}
.grafico .rot-a{fill:var(--cv-acc);font-weight:600}
.grafico .marca{stroke:var(--cv-fg-3);stroke-width:.35;stroke-dasharray:1 1}
.grafico .u-fundo{fill:none;stroke:var(--cv-fg);stroke-linecap:round}
.hist-vis [data-de]{opacity:0;transition:opacity .5s ease}
.hist-vis .tr{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.5,0,.3,1)}
.medidor{margin-top:10px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:13px;color:var(--cv-fg-3)}
.medidor .barra{position:relative;height:8px;border-radius:8px;background:var(--cv-panel-2)}
.medidor .barra i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:var(--cv-fg-3);width:0;transition:width .8s cubic-bezier(.4,0,.2,1),background .4s}
.medidor .barra s{position:absolute;left:50%;top:-5px;bottom:-5px;width:1.5px;background:var(--cv-fg-2)}
.medidor .barra s::after{content:"mín. 1,5";position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:11px;white-space:nowrap;color:var(--cv-fg-3)}
.medidor output{font:500 15px/1 var(--mono);color:var(--cv-fg);min-width:3.2em;text-align:right}
.medidor.ok .barra i{background:var(--cv-acc)}
.medidor.ok output{color:var(--cv-acc)}
.conds{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;font-size:13px}
.conds span{border:1px solid var(--cv-line);border-radius:100px;padding:3px 10px;color:var(--cv-fg-2)}
.conds span::before{content:"✓ ";color:var(--cv-acc)}
.formula{position:absolute;left:18px;right:18px;top:52px;display:grid;gap:8px;font:400 clamp(14px,2.6cqi,18px)/1.4 var(--mono);color:var(--cv-fg-2);background:color-mix(in srgb,var(--cv-panel) 94%,transparent);border:1px solid var(--cv-line);border-radius:14px;padding:16px 18px}
.formula div{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.formula b{color:var(--cv-fg);font-weight:500}
.formula .r{color:var(--cv-acc)}
.formula small{font:400 13px/1.4 var(--texto);color:var(--cv-fg-3)}
.cartao{position:absolute;right:18px;top:46px;bottom:14px;margin:0;display:flex;align-items:center;gap:18px}
.cartao .cvc{font-size:min(12px,2.4cqi)}
.cartao figcaption{font-size:13px;color:var(--cv-fg-3);max-width:16ch}
@container (max-width:520px){.cartao{left:18px;justify-content:center}.cartao figcaption{display:none}}

/* ---------- palco animado ---------- */
.palco-w{position:relative}
.palco{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;container-type:inline-size;isolation:isolate}
.palco *{position:absolute}
.palco-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:12px;font-size:14px}
.palco-ctl button{background:var(--tinta);color:var(--papel);border:0;border-radius:100px;min-height:44px;padding:0 18px;font-weight:600}
.palco-ctl input[type=range]{flex:1 1 160px;min-width:0;accent-color:var(--cv-acc);height:28px}
.palco-ctl output{font:500 13px var(--mono);min-width:5.5em;text-align:right;color:var(--tinta-3)}
.escuro .palco-ctl button{background:var(--cv-fg);color:var(--cv-bg)}
.escuro .palco-ctl output{color:var(--cv-fg-3)}
.cenas{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;font-size:12.5px;list-style:none;padding:0}
.cenas li{border:1px solid currentColor;border-radius:100px;padding:3px 10px;opacity:.55;transition:opacity .3s}
.cenas li.on{opacity:1}
.transcricao{margin-top:12px;font-size:14px}
.transcricao summary{cursor:pointer;font-weight:600;min-height:32px;display:flex;align-items:center}
.transcricao ol{margin:8px 0 0;padding-left:20px;max-width:70ch}
.transcricao li{margin:4px 0}
.escuro .transcricao{color:var(--cv-fg-2)}
.video-slot video{width:100%;aspect-ratio:16/9;border-radius:18px;background:#000;display:block}

/* abertura do Courtvision */
.op{background:var(--cv-bg);color:var(--cv-fg)}
.op .cantos{inset:0;width:100%;height:100%}
.op .cantos path{fill:none;stroke:var(--cv-fg-3);stroke-width:.5;stroke-linecap:round}
.op .mk{left:7%;top:7.6%;font-size:clamp(11px,2.1cqi,26px);color:var(--cv-fg-2);transform-origin:left center}
.op .mk *{position:relative}
.op .uj{left:41%;right:6%;top:6%;bottom:6%;transform-origin:-57% 4.2%}
.op .janela{inset:0;overflow:hidden;border-radius:0 0 50% 50%/0 0 40% 40%;background:var(--cv-panel)}
.op .ufoto{inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%;transform-origin:66% 42%}
.op .uline{inset:0;width:100%;height:100%;overflow:visible}
.op .uline path{fill:none;stroke:var(--cv-fg);stroke-width:.34;stroke-linecap:round}
.op .uline .ftl{stroke-width:.2;opacity:.6}
.op .udot{left:50%;top:61%;width:2.2cqi;height:2.2cqi;margin:-1.1cqi 0 0 -1.1cqi;border-radius:50%;background:var(--cv-fg)}
.op .cred{left:50%;bottom:-4.6%;transform:translateX(-50%);white-space:nowrap;font-size:clamp(9px,1.05cqi,13px);color:rgba(250,250,249,.8)}
.op .pq{left:7%;width:30%;top:31%}
.op .pq p,.op .simt p,.op .leg p{position:static;margin:0}
.op .pq1{font:400 clamp(14px,3.1cqi,40px)/1.15 var(--serif);color:var(--cv-fg-2)}
.op .pq2{font:700 clamp(16px,4.2cqi,54px)/1.04 var(--display);letter-spacing:-.03em;margin-top:1.6cqi!important;color:var(--cv-fg)}
.op .simt{left:7%;width:30%;top:36%}
.op .simt .s1{font:700 clamp(15px,3.6cqi,46px)/1.08 var(--display);letter-spacing:-.025em;color:var(--cv-fg)}
.op .simt .s2{display:flex;align-items:center;gap:1cqi;font:400 clamp(13px,2.6cqi,32px)/1.2 var(--serif);color:var(--cv-fg-2);margin-top:1.2cqi!important}
.op .simt .s2::before,.op .sim::before{content:"";position:static;width:1.1cqi;height:1.1cqi;min-width:7px;min-height:7px;border-radius:50%;background:var(--cv-warn)}
.op .graf{inset:0;width:100%;height:100%}
.op .graf text{font:400 2.5px var(--texto);fill:var(--cv-fg-3)}
.op .graf .esp{fill:none;stroke:var(--cv-fg-3);stroke-width:.45;stroke-dasharray:1.4 1.4}
.op .graf .real{fill:none;stroke:var(--cv-acc);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.op .graf .eixo{stroke:var(--cv-line);stroke-width:.35}
.op .graf .qd{stroke:var(--cv-line);stroke-width:.25;stroke-dasharray:.8 1}
.op .graf .p{fill:var(--cv-bg);stroke:var(--cv-acc);stroke-width:.6;transform-box:fill-box;transform-origin:center}
.op .graf .p.s{fill:var(--cv-acc)}
.op .graf .anel{fill:none;stroke:var(--cv-acc);stroke-width:.35;transform-box:fill-box;transform-origin:center}
.op .graf .exc{stroke:var(--cv-acc);stroke-width:.5}
.op .graf .ra{fill:var(--cv-acc);font-weight:600;font-size:2.8px}
.op .graf .rp{fill:var(--cv-fg-2);font-size:2.6px}
.op .leg{left:10%;top:15%;width:58%}
.op .leg .t{font:500 clamp(9px,1.15cqi,14px)/1.2 var(--mono);letter-spacing:.06em;color:var(--cv-fg-3);text-transform:uppercase;margin-bottom:.8cqi!important}
.op .leg .c{font:500 clamp(12px,2cqi,25px)/1.25 var(--texto);color:var(--cv-fg);max-width:46cqi}
.op .leg .c b{position:static;color:var(--cv-acc);font-weight:600}
.op .leg .cs{position:absolute;left:0;top:2.6cqi}
.op .med{right:7%;top:15%;width:22%;font-size:clamp(9px,1.2cqi,15px);color:var(--cv-fg-3)}
.op .med *{position:relative}
.op .med .mb{display:block;height:1cqi;min-height:6px;border-radius:1cqi;background:var(--cv-panel-2);margin:.8cqi 0 .5cqi}
.op .med .mb i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:var(--cv-fg-3)}
.op .med .mb s{position:absolute;left:50%;top:-.6cqi;bottom:-.6cqi;width:2px;background:var(--cv-fg-2)}
.op .med .mv{display:flex;justify-content:space-between;font-family:var(--mono)}
.op .med .mv b{color:var(--cv-fg);font-weight:500;display:grid}
.op .med .mv b span{grid-area:1/1;text-align:center}
.op .med .mv .v2{color:var(--cv-acc)}
.op .leg .cs{right:0}
.op .card{right:9%;top:9%;font-size:1.5cqi}
.op .card .cvc{position:relative;box-shadow:0 2cqi 5cqi rgba(0,0,0,.6)}
.op .atleta{left:10%;top:37%;font-size:1.25cqi}
.op .card-rot{left:9%;top:44%;max-width:30%;font:400 clamp(14px,2.6cqi,32px)/1.2 var(--serif);color:var(--cv-fg-2)}
.op .card-rot b{position:static;display:block;font:700 clamp(15px,3.2cqi,40px)/1.1 var(--display);color:var(--cv-fg);letter-spacing:-.02em;margin-bottom:1cqi}
.op .marca{left:0;right:0;top:40%;text-align:center}
.op .marca .wm{position:relative;font-size:10cqi}
.op .marca .wm *{position:relative}
.op .marca .wm span{display:inline-block}
.op .marca .assin{position:static;display:block;margin-top:2.2cqi;font-size:clamp(11px,1.5cqi,18px);color:var(--cv-fg-3)}
.op .sim{left:5%;bottom:4.2%;font-size:clamp(10px,1.3cqi,15px);color:var(--cv-fg-2);display:flex;align-items:center;gap:.8cqi}
.op .prog,.fx .prog{left:0;bottom:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);opacity:.7}
.op .prog{background:var(--cv-acc)}

/* fluxo do JobHuntr: busca → triagem → materiais */
.fx{background:linear-gradient(160deg,#0f7a64,#0b5c4c);color:#fff}
.fx .trilho{left:5%;right:5%;top:5%;display:flex;gap:1.4cqi}
.fx .trilho span{position:relative;flex:1;font:600 clamp(10px,1.35cqi,16px)/1.25 var(--texto);color:rgba(255,255,255,.62);border-top:3px solid rgba(255,255,255,.25);padding-top:.9cqi}
.fx .trilho span i{position:absolute;left:0;top:-3px;height:3px;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.fx .trilho span b{position:static;display:block;font:500 clamp(8px,1cqi,12px)/1 var(--mono);opacity:.75;margin-bottom:.4cqi}
.fx .cena-a *,.fx .cena-b *,.fx .fecho *{position:static}
.fx .cena-a{left:5%;right:5%;top:17%;display:flex;flex-direction:column;gap:1.6cqi}
.fx .busca{margin:0;display:flex;align-items:center;gap:1cqi;font:500 clamp(9px,1.25cqi,15px)/1.3 var(--mono);color:#dff3ec}
.fx .busca .radar{width:1.2cqi;height:1.2cqi;min-width:9px;min-height:9px;border-radius:50%;background:#9be8cf;box-shadow:0 0 0 .5cqi rgba(155,232,207,.25)}
.fx .busca span{grid-area:1/1}
.fx .busca .txt{display:grid}
.fx .vagas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.3cqi}
.fx .vg{display:grid;grid-template-columns:1fr 1.35fr;gap:2cqi;align-items:center;background:#fff;color:var(--jh-tinta);border-radius:1.2cqi;padding:1.6cqi 2.2cqi;box-shadow:0 1cqi 2.6cqi rgba(0,0,0,.2)}
.fx .vg-id em,.fx .mvaga em,.fx .base em{display:block;font:600 clamp(8px,.95cqi,12px)/1 var(--mono);font-style:normal;color:#5f706b;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.6cqi}
.fx .vg-id strong{display:block;font:700 clamp(11px,1.9cqi,23px)/1.15 var(--display)}
.fx .vg-id small{display:block;margin-top:.4cqi;font-size:clamp(9px,1.25cqi,15px);color:#3e5a53}
.fx .vd{border-left:1px solid #d5e3de;padding-left:1.8cqi;min-height:5.4cqi}
.fx .vd .st{font:600 clamp(8px,1.05cqi,13px)/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;margin-right:.8cqi}
.fx .vd .tg{display:inline-block;font:600 clamp(9px,1.2cqi,14.5px)/1 var(--mono);border-radius:.5cqi;padding:.45cqi .7cqi}
.fx .vd p{margin:.7cqi 0 0;font-size:clamp(9px,1.35cqi,16px);line-height:1.35;color:#2b3a36}
.fx .ok{color:#0b5c4c}.fx .v1 .tg{background:var(--jh-claro);color:var(--jh-forte)}
.fx .res{color:#7a5200}.fx .v2 .tg{background:#fbecc6;color:#6b4800}
.fx .no{color:#8a2b22}.fx .v3 .tg{background:#f6e1de;color:#8a2b22}
.fx .cena-b{left:5%;right:5%;top:17%;display:flex;gap:3cqi;align-items:flex-start}
.fx .cena-b .col{flex:1;display:flex;flex-direction:column;gap:1.4cqi}
.fx .mvaga,.fx .base{background:#fff;color:var(--jh-tinta);border-radius:1.2cqi;padding:1.3cqi 1.8cqi;box-shadow:0 1cqi 2.6cqi rgba(0,0,0,.2)}
.fx .mvaga strong{display:block;font:700 clamp(11px,1.9cqi,23px)/1.15 var(--display)}
.fx .mvaga small{display:block;margin-top:.4cqi;font-size:clamp(9px,1.25cqi,15px);color:#3e5a53}
.fx .base{background:#062b23;color:#d9efe8;border:1px solid rgba(255,255,255,.18);box-shadow:none}
.fx .base em{color:#a9d3c7}
.fx .base .f{display:block;font-size:clamp(9px,1.35cqi,16px);line-height:1.3;padding:.45cqi .8cqi;margin-top:.4cqi;border-radius:.4cqi;border-left:3px solid transparent}
.fx .cvf{position:relative;width:36%;background:#fff;color:#1c2b27;border-radius:1cqi;padding:2cqi 2cqi;box-shadow:0 1.6cqi 4cqi rgba(0,0,0,.28)}
.fx .cvf .auto{position:absolute;right:1.4cqi;top:-1.2cqi;font:600 clamp(8px,.9cqi,11.5px)/1 var(--mono);background:#ffd66b;color:#3b2c00;border-radius:100px;padding:.5cqi .9cqi;letter-spacing:.03em}
.fx .cvf h5{margin:0;font:700 clamp(10px,1.7cqi,20px)/1.1 var(--display)}
.fx .cvf .sub{font-size:clamp(8px,1.15cqi,14px);color:#5f706b;margin:.4cqi 0 1.2cqi}
.fx .cvf .l{display:block;height:.7cqi;border-radius:.4cqi;background:#e3e8e6;margin:.8cqi 0}
.fx .cvf .d{display:block;font-size:clamp(8px,1.3cqi,15.5px);line-height:1.35;background:#e2f2ec;border-left:3px solid var(--jh);padding:.5cqi .8cqi;margin:.9cqi 0;border-radius:.3cqi}
.fx .cvf .arq{display:flex;gap:.8cqi;margin-top:1.4cqi}
.fx .cvf .arq span{font:600 clamp(8px,.95cqi,12px)/1 var(--mono);background:#1c2b27;color:#fff;border-radius:.4cqi;padding:.5cqi .8cqi}
.fx .fecho{left:5%;right:5%;bottom:9.5%;margin:0;text-align:center;background:#fff;color:var(--jh-forte);border-radius:1.2cqi;padding:1.2cqi 2cqi;font:700 clamp(11px,1.7cqi,21px)/1.25 var(--display);letter-spacing:-.01em}
.fx .rodape{left:5%;right:5%;bottom:3.4%;margin:0;font-size:clamp(8px,1.1cqi,14px);color:rgba(255,255,255,.82)}
.fx .prog{background:#fff}
/* celular: palco mais alto e uma coluna */
@media (max-width:620px){.fx{aspect-ratio:3/5}}
@container (max-width:600px){
  .fx .trilho{top:3%;gap:2.4cqi}
  .fx .trilho span{font-size:3.3cqi;padding-top:1.6cqi}
  .fx .trilho span b{font-size:2.6cqi;margin-bottom:.8cqi}
  .fx .cena-a{top:11.5%;left:4%;right:4%;gap:2cqi}
  .fx .busca{font-size:2.9cqi;gap:2cqi}
  .fx .busca .radar{width:2.4cqi;height:2.4cqi}
  .fx .vagas{gap:2cqi}
  .fx .vg{grid-template-columns:1fr;gap:1.6cqi;padding:2.6cqi 3.4cqi;border-radius:2.4cqi}
  .fx .vg-id em,.fx .mvaga em,.fx .base em{font-size:2.5cqi;margin-bottom:1cqi}
  .fx .vg-id strong,.fx .mvaga strong{font-size:4cqi}
  .fx .vg-id small,.fx .mvaga small{font-size:2.9cqi}
  .fx .vd{border-left:0;border-top:1px solid #d5e3de;padding:1.6cqi 0 0;min-height:11cqi}
  .fx .vd .st{font-size:2.5cqi}
  .fx .vd .tg{font-size:2.7cqi;padding:.8cqi 1.2cqi;border-radius:1cqi}
  .fx .vd p{font-size:3cqi;margin-top:1.2cqi}
  .fx .cena-b{top:11.5%;left:4%;right:4%;flex-direction:column;align-items:stretch;gap:2.4cqi}
  .fx .cena-b .col{gap:2.4cqi}
  .fx .mvaga,.fx .base{padding:2.4cqi 3.4cqi;border-radius:2.4cqi}
  .fx .base .f{font-size:2.9cqi;padding:.9cqi 1.6cqi;margin-top:.8cqi}
  .fx .cvf{width:auto;padding:3.4cqi;border-radius:2cqi}
  .fx .cvf .auto{font-size:2.4cqi;top:-2.2cqi;right:3cqi;padding:1cqi 1.8cqi}
  .fx .cvf h5{font-size:3.8cqi}
  .fx .cvf .sub{font-size:2.7cqi;margin:.8cqi 0 1.6cqi}
  .fx .cvf .l{height:1.4cqi;margin:1.4cqi 0}
  .fx .cvf .d{font-size:2.9cqi;padding:1cqi 1.6cqi;margin:1.4cqi 0}
  .fx .cvf .arq span{font-size:2.5cqi;padding:1cqi 1.6cqi}
  .fx .fecho{left:4%;right:4%;bottom:6.5%;font-size:3.8cqi;padding:2.4cqi 3cqi;border-radius:2.4cqi}
  .fx .rodape{left:4%;right:4%;font-size:2.5cqi;bottom:2.4%}
}

/* ---------- Tell Me, Sobre, Contato ---------- */
.tellme{border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);padding:28px 0}
.tellme .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center}
.tellme b{font:700 22px/1 var(--display)}
.tellme b small{font:400 15px var(--texto);color:var(--tinta-3)}
.tellme p{margin:0;color:var(--tinta-2)}
.tellme a{font-weight:600}
@media (max-width:760px){.tellme .wrap{grid-template-columns:1fr}}

.sobre{padding:clamp(64px,9vw,128px) 0 0;overflow:hidden;scroll-margin-top:68px}
.sobre .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px) clamp(24px,5vw,72px);align-items:end}
.sobre-cab{grid-column:1/-1}
.sobre h2{font:700 clamp(30px,3.8vw,54px)/1.05 var(--display);letter-spacing:-.03em;margin:8px 0 0;max-width:24ch}
.sobre .intro{font-size:19px;max-width:46ch;color:var(--tinta);margin:0 0 14px}
.sobre .txt{max-width:52ch;color:var(--tinta-2);margin:0 0 12px}
.sobre .txt a{font-weight:600}
.form-tit{font:600 15px/1.3 var(--display);margin:28px 0 10px}
.form{list-style:none;margin:0 0 clamp(48px,7vw,96px);padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;max-width:620px}
.form li{padding:12px 0;border-top:1px solid var(--linha);font-size:15px;line-height:1.35}
.form b{display:block;font-weight:600}
.form span{color:var(--tinta-3);font-size:14px}
.form .cert{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:16px 0}
.form .cert img{width:44px;height:45px;flex:0 0 44px}
.form .cert b{font:700 17px/1.25 var(--display)}
.form .cert a{color:inherit}
@media (max-width:560px){.form{grid-template-columns:1fr}}
.retrato{position:relative;align-self:end;justify-self:center;width:min(100%,560px);aspect-ratio:900/960;margin:0}
.retrato .arco{position:absolute;left:6%;right:6%;bottom:0;top:22%;border-radius:999px 999px 0 0;background:radial-gradient(120% 90% at 30% 10%,var(--arco-2),var(--arco) 70%)}
.retrato .arco::after{content:"";position:absolute;inset:7% 7% 0;border-radius:inherit;border:1.5px solid rgba(255,255,255,.16);border-bottom:0}
.retrato img{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent);mask-image:linear-gradient(to bottom,#000 86%,transparent)}
.retrato .assin{position:absolute;right:2%;bottom:7%;z-index:2;background:var(--folha);color:var(--tinta);border-radius:100px;padding:8px 14px;font-size:14px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.js .retrato .arco{transform-origin:bottom;transform:scaleY(.2);opacity:0}
.js .retrato img{transform:translateY(28px);opacity:0}
.js .retrato .assin{opacity:0}
.js .retrato.visto .arco{animation:arco .9s cubic-bezier(.2,.7,.2,1) forwards}
.js .retrato.visto img{animation:sobe 1s .35s cubic-bezier(.2,.7,.2,1) forwards}
.js .retrato.visto .assin{animation:sobe .6s 1.05s ease-out forwards}
@keyframes arco{to{transform:none;opacity:1}}
@media (max-width:860px){
  .sobre .wrap{grid-template-columns:1fr}
  .retrato{order:-1;width:min(82%,330px);justify-self:start}
  .retrato .assin{display:none}
  .form{margin-bottom:56px}
}
.contato{background:var(--tinta);color:var(--papel);padding:clamp(48px,7vw,88px) 0;scroll-margin-top:68px;--foco:#9cc2ff}
.contato h2{font:700 clamp(30px,4vw,52px)/1.05 var(--display);letter-spacing:-.03em;margin:0 0 20px}
.contato ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px;font-size:18px}
.contato a{text-decoration-thickness:1.5px;text-underline-offset:4px}
.contato .loc{opacity:.75}
.rodape-site{background:var(--tinta);color:rgba(243,240,234,.7);font-size:13px;padding:0 0 32px;--foco:#9cc2ff}
.rodape-site .wrap{border-top:1px solid rgba(243,240,234,.14);padding-top:20px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.rodape-site a{color:inherit}

/* ---------- páginas de projeto ---------- */
.migalha{font-size:14px;color:var(--tinta-3);padding-top:28px;margin:0}
.proj-cab{padding:18px 0 clamp(32px,5vw,56px)}
.proj-cab h1{margin:0}
.proj-cab .perg{font:700 clamp(26px,3.2vw,44px)/1.1 var(--display);letter-spacing:-.03em;max-width:24ch;margin:18px 0 0}
.fatos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:32px 0 0;padding:0}
.fatos div{border-top:1px solid var(--linha);padding-top:12px}
.fatos dt{font:500 12.5px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3)}
.fatos dd{margin:6px 0 0;font-size:15px;line-height:1.45}
@media (max-width:860px){.fatos{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fatos{grid-template-columns:1fr}}
.bloco{padding:clamp(40px,6vw,80px) 0;border-top:1px solid var(--linha)}
.bloco h2{font:700 clamp(26px,3vw,40px)/1.1 var(--display);letter-spacing:-.025em;margin:8px 0 10px;max-width:26ch}
.bloco h3{font:700 clamp(20px,1.9vw,24px)/1.2 var(--display);letter-spacing:-.015em;margin:0 0 10px}
.lead{color:var(--tinta-2);max-width:62ch;margin:0 0 24px}
.texto{max-width:66ch}
.texto p{margin:0 0 14px}

.pg-cv{background:var(--cv-bg);color:var(--cv-fg)}
.pg-cv .migalha,.pg-cv .eyebrow,.pg-cv .fatos dt{color:var(--cv-fg-3)}
.pg-cv .fatos div,.pg-cv .bloco{border-color:var(--cv-line)}
.pg-cv .lead,.pg-cv .texto{color:var(--cv-fg-2)}
.pg-cv .proj-cab .wm{font-size:clamp(52px,7vw,96px)}
.credito{font-size:13px;line-height:1.5;color:var(--cv-fg-3);max-width:90ch;margin:14px 0 0}
.credito a{color:var(--cv-fg-2)}

/* aprofundamento técnico (Courtvision) */
.medidas{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:0;padding:0;list-style:none}
@media (max-width:1000px){.medidas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.medidas{grid-template-columns:1fr}}
.medidas li{background:var(--cv-panel);border:1px solid var(--cv-line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px}
.medidas h4{margin:0;font:600 16px/1.25 var(--display);color:var(--cv-fg)}
.medidas p{margin:0;font-size:14.5px;line-height:1.5;color:var(--cv-fg-2)}
.medidas .v{margin-top:auto;font:500 22px/1.1 var(--mono);color:var(--cv-fg)}
.medidas .v small{display:block;font:400 12.5px/1.3 var(--texto);color:var(--cv-fg-3);margin-top:4px}
.medidas .destaque{border-color:rgba(130,181,245,.45)}
.medidas .destaque .v{color:var(--cv-acc)}
.contas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0}
@media (max-width:860px){.contas{grid-template-columns:1fr}}
.contas div{background:var(--cv-panel);border:1px solid var(--cv-line);border-radius:16px;padding:16px 18px}
.contas dt{font:500 12.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--cv-fg-3)}
.contas dd{margin:8px 0 0;font:400 16px/1.5 var(--mono);color:var(--cv-fg-2)}
.contas dd b{display:block;font:500 26px/1.2 var(--mono);color:var(--cv-acc);margin-top:4px}
.aviso-simpl{margin:16px 0 0;border-left:3px solid var(--cv-warn);padding:4px 0 4px 16px;color:var(--cv-fg-2);max-width:78ch}
.aviso-simpl strong{color:var(--cv-fg)}
.condicoes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0;list-style:none}
@media (max-width:860px){.condicoes{grid-template-columns:1fr}}
.condicoes li{background:var(--cv-panel);border:1px solid var(--cv-line);border-radius:16px;padding:16px 18px}
.condicoes h4{margin:0 0 6px;font:600 16px/1.25 var(--display)}
.condicoes p{margin:0 0 10px;font-size:14.5px;color:var(--cv-fg-2)}
.condicoes .ok{font:500 15px/1.3 var(--mono);color:var(--cv-acc)}
.duas{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,3vw,40px);align-items:start}
@media (max-width:900px){.duas{grid-template-columns:minmax(0,1fr)}}
pre.codigo{margin:0;background:var(--cv-panel);border:1px solid var(--cv-line);border-radius:16px;padding:16px 18px;overflow:auto;font:400 13.5px/1.6 var(--mono);color:var(--cv-fg-2);tab-size:4}
pre.codigo .kw{color:#c6a0f6}
pre.codigo .st{color:#a6da95}
pre.codigo .cm{color:var(--cv-fg-3)}
.cod-cab{display:flex;justify-content:space-between;font:500 13px/1.3 var(--mono);color:var(--cv-fg-3);margin:0 0 8px}
.painel-app{margin:0}
.painel-app img{border-radius:14px;border:1px solid var(--cv-line);width:100%;max-width:520px}
.painel-app figcaption{font-size:13.5px;color:var(--cv-fg-3);margin-top:8px;max-width:52ch}
.lista-lim{margin:0;padding-left:20px;color:var(--cv-fg-2);max-width:72ch}
.lista-lim li{margin:8px 0}

/* JobHuntr */
.pg-jh .proj-cab h1{font:800 clamp(52px,7vw,96px)/1 var(--display);letter-spacing:-.04em;color:var(--jh)}
.pg-jh .eyebrow{color:var(--jh-forte)}
.eps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:860px){.eps{grid-template-columns:1fr}}
.eps article,.cartao-claro{background:var(--folha);border:1px solid var(--linha);border-radius:18px;padding:20px}
.eps h3{margin:6px 0 10px}
.eps pre{margin:0;white-space:pre-wrap;font:400 13.5px/1.55 var(--mono);color:var(--tinta-2)}
.papeis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:860px){.papeis{grid-template-columns:1fr}}
.papeis ul{margin:0;padding-left:18px;color:var(--tinta-2);font-size:15.5px}
.papeis li{margin:6px 0}
.papeis .eu{background:var(--jh);color:#fff;border-color:transparent}
.papeis .eu ul{color:#eaf7f2}
.classes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none;margin:0;padding:0}
@media (max-width:860px){.classes{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.classes{grid-template-columns:1fr}}
.classes li{border:1px solid var(--linha);border-radius:14px;padding:14px 16px;background:var(--folha)}
.classes code{display:inline-block;font:600 12.5px/1 var(--mono);background:var(--jh-claro);color:var(--jh-forte);border-radius:6px;padding:6px 8px;margin-bottom:8px}
.classes p{margin:0;font-size:14.5px;color:var(--tinta-2)}
.regra{margin:0;border-left:3px solid var(--jh);padding:6px 0 6px 18px;font-size:18px;max-width:70ch}
.regra-fonte{font-size:13.5px;color:var(--tinta-3);margin:8px 0 18px}
.antes-depois{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px}
@media (max-width:620px){.antes-depois{grid-template-columns:1fr}}
.antes-depois h4{margin:0 0 6px;font:600 15px/1.3 var(--display)}
.antes-depois p{margin:0 0 6px;font-size:15px;color:var(--tinta-2)}
.antes-depois .res{font:600 13px/1.3 var(--mono);color:#a3401f}
.antes-depois .dep .res{color:var(--jh-forte)}
.ficticio{font-size:13.5px;color:var(--tinta-3);margin-top:10px}
.lista-jh{margin:0;padding-left:20px;color:var(--tinta-2);max-width:72ch}
.lista-jh li{margin:8px 0}
.pg-jh .lead{color:var(--tinta-2)}

/* Tell Me */
.captura{margin:0}
.captura img{border-radius:16px;border:1px solid var(--linha);width:100%;background:#fff}
.captura figcaption{font-size:13.5px;color:var(--tinta-3);margin-top:10px}
.colunas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px)}
@media (max-width:760px){.colunas{grid-template-columns:1fr}}
.colunas p{color:var(--tinta-2);margin:0}

/* 404 */
.nada{min-height:60vh;display:grid;place-content:center;text-align:center;gap:12px;padding:40px var(--gutter)}
.nada h1{font:700 clamp(32px,5vw,56px)/1.05 var(--display);margin:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* abertura em quadros estreitos (celular): legenda em largura total; o desvio já está no texto */
@container (max-width:560px){
  .op .leg{left:6%;width:88%;top:14%}
  .op .leg .t,.op .med{display:none}
  .op .leg .cs{top:0}
  .op .leg .c{font-size:11px;line-height:1.3;max-width:none}
  .op .leg{top:16%}
  .op .graf text.g0{display:none}
  .op .sim{bottom:2.6%;font-size:10px}
  .op .atleta{left:6%;top:38%;font-size:9px}
  .op .card-rot{display:none}
  .op .card{right:auto;top:7%;left:calc(50% - 12.93em);font-size:1.45cqi}
}

/* ---------- card do Courtvision recriado (visual do app; medidas em em para escalar) ---------- */
.cvc{width:25.85em;margin:0;background:#151412;border:1px solid #38352F;border-radius:1.23em;overflow:hidden;color:#FAFAF9;font-family:var(--texto);line-height:1.45;font-variant-numeric:tabular-nums;text-align:left;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.cvc *{position:static}
.cvc p{margin:0}
.cvc .c-jogo{display:flex;flex-direction:column;gap:.38em;padding:.77em 1.08em .69em;background:#1B1A17;border-bottom:1px solid rgba(250,250,249,.08)}
.cvc .c-placar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.6em}
.cvc .c-time{display:flex;align-items:center;gap:.54em;min-width:0;font-weight:500;letter-spacing:.03em;color:#A6A39C}
.cvc .c-time.casa{justify-content:flex-end}
.cvc .c-time.c-lider{color:#FAFAF9}
.cvc .c-time img{width:2em;height:2em;object-fit:contain;flex:none}
.cvc .c-sco{font:600 1.69em/1 var(--texto);color:#A6A39C;white-space:nowrap}
.cvc .c-sco .c-lider{color:#FAFAF9}
.cvc .c-dash{color:#85827C;margin:0 .23em;font-weight:400}
.cvc .c-agora{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.15em .77em;font-size:.92em;color:#A6A39C}
.cvc .c-k{letter-spacing:.06em;text-transform:uppercase;color:#85827C}
.cvc .c-agora b{font:600 1.25em/1.2 var(--texto);color:#FAFAF9}
.cvc .c-vivo{display:inline-flex;align-items:center;gap:.4em;color:#3CCB7F;font-weight:500}
.cvc .c-vivo::before,.cvc .c-quadra::before{content:"";width:.6em;height:.6em;border-radius:50%;background:#3CCB7F}
.cvc .c-corpo{padding:.85em 1.08em .15em}
.cvc .c-quem{display:grid;grid-template-columns:3.7em minmax(0,1fr);gap:.92em;align-items:center}
.cvc .c-ph{display:block;width:3.7em;height:3.7em;border-radius:50%;background:#F4F1EA;overflow:hidden}
.cvc .c-ph img{display:block;width:100%;height:100%;object-fit:cover}
.cvc .c-nm{font-size:1.23em;font-weight:600;line-height:1.25}
.cvc .c-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.15em .77em;margin-top:.15em;font-size:.92em;color:#A6A39C}
.cvc .c-quadra{display:inline-flex;align-items:center;gap:.46em;color:#D6D4CF}
.cvc .c-dl{margin-top:.62em;color:#A6A39C}
.cvc .c-dl span{color:#D6D4CF}
.cvc .c-dl b{color:#FAFAF9;font-weight:600}
.cvc .c-prod{margin:.77em 0}
.cvc .c-top{display:flex;justify-content:space-between;align-items:baseline;gap:.77em}
.cvc .c-pv{font:400 3.23em/1 var(--serif);letter-spacing:-.02em}
.cvc .c-pv small{font:400 .45em/1 var(--serif);color:#D6D4CF;margin-left:.15em;letter-spacing:0}
.cvc .c-pp{color:#A6A39C;white-space:nowrap}
.cvc .c-pp b{font:600 1.23em/1 var(--texto);color:#FAFAF9}
.cvc .c-barra{display:grid;grid-template-columns:3.4em minmax(0,1fr) 3.1em;align-items:center;gap:.62em;margin-top:.46em;font-size:.92em}
.cvc .c-barra .l{color:#A6A39C}
.cvc .c-barra .t{display:block;height:.5em;border-radius:.25em;background:#22201D;overflow:hidden}
.cvc .c-barra .t i{display:block;height:100%;border-radius:inherit;background:#82B5F5}
.cvc .c-barra.c-media .t i{background:#8F8C85}
.cvc .c-barra .n{text-align:right;font-weight:600}
.cvc .c-barra.c-media .n{color:#D6D4CF;font-weight:500}
.cvc .c-mx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#1B1A17;border-radius:.92em;padding:.54em .3em}
.cvc .c-mx>div{text-align:center;padding:0 .46em;min-width:0}
.cvc .c-mx>div+div{border-left:1px solid rgba(250,250,249,.16)}
.cvc .c-mx .l{font-size:.92em;color:#A6A39C}
.cvc .c-mx .v{font:400 1.77em/1.2 var(--serif);margin-top:.05em}
.cvc .c-mx .acc{color:#82B5F5}
.cvc .c-mx .forca{display:inline-block;padding:0 .45em;border:1px solid #82B5F5;border-radius:.45em}
.cvc .c-mx small{font:400 .55em var(--texto);color:#A6A39C}
.cvc .c-aux{margin:.46em .15em 0;font-size:.92em;color:#A6A39C}
.cvc .c-aux b{color:#D6D4CF;font-weight:500}
.cvc .c-pe{display:flex;justify-content:space-between;align-items:center;gap:.6em;min-height:3.1em;padding:0 1.08em;font-size:.92em;color:#A6A39C}
.hist:not(.pronta) .cartao .cvc{font-size:13px;max-width:100%}

/* foto e nome do jogador no canto do gráfico */
.atleta{display:flex;align-items:center;gap:.6em;font-size:13px;color:var(--cv-fg);pointer-events:none}
.atleta *{position:static}
.atleta .a-ph{display:block;width:2.8em;height:2.8em;border-radius:50%;background:#F4F1EA;overflow:hidden;flex:none;box-shadow:0 0 0 1px var(--cv-line)}
.atleta .a-ph img{display:block;width:100%;height:100%;object-fit:cover}
.atleta .a-nm{display:flex;flex-direction:column;line-height:1.2}
.atleta .a-nm b{font-weight:600}
.atleta .a-nm small{font-size:.85em;color:var(--cv-fg-3)}
.hist-vis .atleta{position:absolute;left:18px;top:58px;transition:opacity .5s ease}
@container (max-width:520px){.hist-vis .atleta{position:static;margin-top:12px}}