/* Identidade herdada do site anterior: off-white + azul Klein, Archivo 900 + Space Mono, índice [01]…
   Layout: tese + prateleira de ferramentas no topo; destaques; outros projetos; museus; serviços; contato com o Pong. */
:root{
  --bg:#f4f1ea; --surface:#fbfaf6; --ink:#0a0a0a; --muted:#6b675e; --line:#c8c4b8;
  --klein:#1d1ad6; --on-klein:#f4f1ea; --cta:#c6f432; --on-cta:#111111;
  --display:"Archivo", "Heebo", "Helvetica Neue", Arial, sans-serif;
  --body:"Archivo", "Heebo", "Helvetica Neue", Arial, sans-serif;
  --mono:"Space Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0c0c12; --surface:#14141c; --ink:#efece4; --muted:#9a968c; --line:#2b2a33;
  --klein:#7a78ff; --on-klein:#0c0c12; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c0c12; --surface:#14141c; --ink:#efece4; --muted:#9a968c; --line:#2b2a33;
  --klein:#7a78ff; --on-klein:#0c0c12; color-scheme:dark}
:lang(he){--display:"Heebo", Arial, sans-serif; --body:"Heebo", Arial, sans-serif; --mono:"Space Mono", "Heebo", ui-monospace, monospace}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--klein);outline-offset:3px}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}
.mono{font-family:var(--mono);font-size:.8125rem}
.ltr{direction:ltr;unicode-bidi:isolate}
.eyebrow{font-family:var(--mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin:0}
.eyebrow b{color:var(--klein);font-weight:400}
h1,h2,h3{font-family:var(--display);font-weight:900;line-height:.92;letter-spacing:-.02em;text-wrap:balance;margin:0;text-transform:uppercase}
:lang(he) h1,:lang(he) h2,:lang(he) h3{letter-spacing:0;line-height:1.02;font-weight:800}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top, 0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.brand{text-decoration:none;color:var(--klein);font-weight:700}
.brand span{color:var(--ink);font-weight:400}
.nav .right{display:flex;align-items:center;gap:28px}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;color:var(--muted)}
.nav ul a:hover{color:var(--klein)}
.lang{display:flex;gap:12px}
.lang button{background:none;border:0;border-bottom:1px solid transparent;color:var(--muted);padding:2px 0;cursor:pointer;font:inherit;letter-spacing:inherit}
.lang button:hover,.lang button[aria-pressed="true"]{color:var(--klein);border-color:var(--klein)}
.lang a{color:var(--muted);text-decoration:none;padding:2px 0}
.lang a:hover,.lang a[aria-current="true"]{color:var(--klein)}
@media (max-width:820px){.nav ul{display:none}}

/* hero */
.hero{border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
.hero-main{padding-block:56px;padding-inline-end:40px;border-inline-end:1px solid var(--line);display:grid;gap:22px;align-content:start;min-width:0}
.hero h1{font-size:clamp(2.5rem,5.3vw,5.4rem)}
.hero h1 .hl{color:var(--klein)}
:lang(he) .hero h1{font-size:clamp(2.4rem,4.8vw,4.8rem)}
.lede{font-size:clamp(1.15rem,1.8vw,1.45rem);font-weight:500;line-height:1.3;max-width:30ch;margin:0}
.lede-sub{max-width:56ch;color:var(--muted);margin:0}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1.5px solid var(--ink);text-decoration:none;font:700 .75rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;transition:background .15s,color .15s,border-color .15s}
.btn.solid{background:var(--cta);border-color:var(--cta);color:var(--on-cta)}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* prateleira de ferramentas */
.demo-col{min-width:0;padding-block:40px;padding-inline-start:40px;display:grid;gap:10px;align-content:start}
.rack-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--line)}
.tool{display:grid;gap:12px;padding-block:24px;border-bottom:1px solid var(--line)}
.tool-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tool h3{font-size:clamp(2.4rem,4vw,3.4rem)}
.tag{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--klein)}
.tool p{margin:0;color:var(--muted);max-width:52ch}
.spec{display:grid;grid-template-columns:auto 1fr;gap:3px 18px;margin:0;font-family:var(--mono);font-size:.75rem;font-variant-numeric:tabular-nums}
.spec dt{color:var(--muted);text-transform:uppercase;letter-spacing:.08em} .spec dd{margin:0}
.tool .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.soon{font-family:var(--mono);font-size:.75rem;color:var(--muted)}

/* seções */
section.block{border-bottom:1px solid var(--line)}
section.block > .wrap{padding-block:64px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px 32px;flex-wrap:wrap;margin-bottom:32px}
.sec-head h2{font-size:clamp(2.4rem,5.4vw,4.4rem)}
.sec-head p{max-width:46ch;margin:0;color:var(--muted)}

.cases{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.case{display:grid;gap:14px;text-decoration:none;min-width:0;align-content:start}
.case .media{aspect-ratio:16/10;max-width:100%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.case .media span{font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.case .media img,.case .media video{width:100%;height:100%;object-fit:cover}
.case h3{font-size:clamp(2.2rem,4vw,3.2rem)}
.case p{margin:0;color:var(--muted);max-width:54ch}
.case:hover h3{color:var(--klein)}

.list{display:grid;border-top:1px solid var(--line)}
.item{display:grid;grid-template-columns:minmax(180px,260px) 1fr auto;gap:24px;align-items:baseline;padding-block:22px;border-bottom:1px solid var(--line);text-decoration:none}
.item h3{font-size:1.9rem}
.item p{margin:0;color:var(--muted)}
.item > div{min-width:0}
.item .go{font-family:var(--mono);font-size:.75rem;white-space:nowrap;color:var(--klein)}
.item:hover h3{color:var(--klein)}
.stats{display:flex;flex-wrap:wrap;gap:4px 18px;font-family:var(--mono);font-size:.75rem;margin-top:8px}

/* museus: índice [01]…[12] do site anterior */
.works{display:grid;border-top:1px solid var(--line)}
.work{display:grid;grid-template-columns:56px minmax(0,1.1fr) minmax(0,1fr);gap:24px;padding-block:14px;border-bottom:1px solid var(--line);align-items:baseline}
.work .n{font-family:var(--mono);font-size:.75rem;color:var(--klein)}
.work b{font-weight:700}
.work span:last-child{color:var(--muted);font-size:.9375rem}

.services{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-inline-start:1px solid var(--line)}
.svc{padding:28px;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:10px;align-content:start}
.svc h3{font-size:1.9rem}
.svc p{margin:0;color:var(--muted)}

.about .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px}
.about p{margin:0 0 16px;max-width:62ch}
.about h2{font-size:clamp(2.4rem,5.4vw,4.4rem)}

/* contato */
.contact{background:var(--klein);color:var(--on-klein)}
.contact .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;padding-block:72px;align-items:end}
.contact .col{display:grid;gap:20px;align-content:start;min-width:0}
.contact h2{font-size:clamp(2.6rem,6vw,5rem)}
.contact .eyebrow{color:inherit;opacity:.75}
.contact .mail{font-family:var(--mono);font-size:clamp(1rem,2.2vw,1.35rem);user-select:all;overflow-wrap:anywhere}
.contact .btn{border-color:var(--on-klein);color:var(--on-klein)}
.contact .btn:hover{background:var(--on-klein);color:var(--klein)}
.links{display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--mono);font-size:.8125rem}
.links a{opacity:.85} .links a:hover{opacity:1}

footer .wrap{padding-block:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase}

@media (max-width:900px){
  .hero .wrap,.about .wrap,.contact .wrap{grid-template-columns:1fr}
  .hero-main{padding-inline-end:0;border-inline-end:0;border-bottom:1px solid var(--line);padding-block:40px}
  .demo-col{padding-inline-start:0;padding-block:28px 40px}
  .cases{grid-template-columns:1fr}
  .item{grid-template-columns:1fr;gap:6px}
  .work{grid-template-columns:44px 1fr}
  .work span:last-child{grid-column:2}
}
@media (max-width:560px){.services{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* página de produto (adir/, image-studio/) */
.steps{counter-reset:s;display:grid;border-top:1px solid var(--line);max-width:780px;padding:0;margin:0;list-style:none}
.steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:16px;padding-block:16px;border-bottom:1px solid var(--line)}
.steps li::before{content:"[" counter(s, decimal-leading-zero) "]";font-family:var(--mono);font-size:.75rem;color:var(--klein);padding-top:.3em}
.steps code,.fix code{font-family:var(--mono);font-size:.8125rem;background:var(--surface);border:1px solid var(--line);padding:1px 6px}
.fix{max-width:780px;color:var(--muted)}
.fix pre{overflow-x:auto;background:var(--surface);border:1px solid var(--line);padding:12px 14px;font-family:var(--mono);font-size:.8125rem;color:var(--ink)}

/* demonstração no topo */
.demo{border:1.5px solid var(--ink);background:var(--surface);display:grid;min-width:0}
.demo-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1.5px solid var(--ink);font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;color:var(--muted)}
.dots{display:flex;gap:6px}.dots i{width:9px;height:9px;border:1.5px solid var(--ink);border-radius:50%}
.demo-tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto}
.demo-tabs button{flex:1 0 auto;background:none;border:0;border-inline-end:1px solid var(--line);padding:11px 14px;font:700 .6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;white-space:nowrap}
.demo-tabs button:last-child{border-inline-end:0}
.demo-tabs button:hover{color:var(--ink)}
.demo-tabs button[aria-selected="true"]{background:var(--klein);color:var(--on-klein)}
.demo-stage{position:relative;aspect-ratio:16/10;max-width:100%;border-bottom:1px solid var(--line);overflow:hidden;background:var(--bg)}
.demo-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.demo-log{font-family:var(--mono);font-size:.6875rem;line-height:1.6;color:var(--ink);white-space:pre-wrap;min-height:calc(4 * 1.6em + 20px);padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg)}
.demo-foot{display:grid;gap:14px;padding:16px}
.demo-info{display:grid;gap:6px;min-width:0}
.demo-info p{margin:0;font-size:.975rem}
.demo-meta{color:var(--muted);font-size:.6875rem;letter-spacing:.06em}
.demo-hint{color:var(--muted);font-size:.6875rem;margin:0}
.demo .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.demo .btn{padding:10px 14px}

.demo-stage .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;animation:shotpan 9s ease-in-out both}
@keyframes shotpan{from{transform:scale(1.08)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.demo-stage .shot{animation:none}}
.case .go{font-family:var(--mono);font-size:.75rem;color:var(--klein)}

/* faixa da pergunta: a frase-chave do site */
.statement{background:var(--klein);color:var(--on-klein)}
.statement .wrap{padding-block:clamp(72px,12vw,150px);display:grid;gap:28px;justify-items:start}
.statement h2{font-size:clamp(3rem,8.6vw,8rem);max-width:13ch;line-height:.9}
.statement h2 .hl{color:var(--on-klein);text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.1em}
.statement p{margin:0;max-width:52ch;font-size:clamp(1.1rem,1.6vw,1.35rem);opacity:.9}
.statement .btn.solid{background:var(--cta);color:var(--on-cta);border-color:var(--cta)}
.statement .btn.solid:hover{background:var(--on-klein);border-color:var(--on-klein);color:var(--klein)}
:lang(he) .statement h2{line-height:1.02}

/* promo e prints (páginas de produto) */
.promo{width:100%;max-width:100%;height:auto;aspect-ratio:16/9;display:block;background:#000;border:1px solid var(--line)}
.shots{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:20px}
.shots figure{margin:0;display:grid;gap:8px;align-content:start;min-width:0}
.shots .wide{grid-column:1 / -1}
.shots img{width:100%;height:auto;border:1px solid var(--line);background:#1d1d1d}
.shots figcaption{font-size:.875rem;color:var(--muted)}
@media (max-width:700px){.shots{grid-template-columns:1fr}.shots .narrow{max-width:360px}}
.btn .ico{width:1em;height:1em;flex:none}
.os-h{display:flex;align-items:center;gap:10px;font-size:1.6rem;margin:28px 0 12px}
.os-h .ico{width:.9em;height:.9em}

/* destaque do Adir */
.feature{border-bottom:1px solid var(--line);background:var(--bg)}
.feature .wrap{padding-block:clamp(64px,9vw,120px);display:grid;gap:clamp(36px,5vw,64px)}
.feature-head{display:grid;gap:18px;justify-items:start;max-width:820px}
.feature h2{font-size:clamp(5rem,16vw,13rem);line-height:.82}
.feature h2 .dot{color:var(--cta);-webkit-text-stroke:2px var(--ink)}
.feature-tag{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,3.4vw,2.8rem);line-height:1;text-transform:uppercase}
.feature-lede{margin:0;max-width:56ch;font-size:1.15rem;color:var(--muted)}
.feature-meta{color:var(--muted);margin:0;font-size:.75rem}
.feature-video{border:1.5px solid var(--ink);background:#eef0f5;aspect-ratio:16/9;max-width:100%;overflow:hidden}
.feature-video video{width:100%;height:100%;display:block;object-fit:cover}
.feature-points{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.feature-points > div{padding-block:22px;padding-inline-end:24px;display:grid;gap:8px;align-content:start}
.feature-points h3{font-size:1.5rem}
.feature-points p{margin:0;color:var(--muted);font-size:.975rem}
.feature-shot{margin:0}
.feature-shot img{width:100%;height:auto;border:1.5px solid var(--ink);background:#1d1d1d}
@media (max-width:900px){.feature-points{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.feature-points{grid-template-columns:1fr}}

/* faixa e selo que levam à página do Adir */
.ribbon{display:block;background:var(--ink);color:var(--bg);text-decoration:none;font-size:.8125rem}
.ribbon .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;padding-block:9px;text-align:center}
.ribbon b{background:var(--cta);color:var(--on-cta);font-family:var(--mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;padding:2px 7px}
.ribbon .rb-v{font-family:var(--mono);opacity:.7;font-size:.75rem}
.ribbon .rb-go{color:var(--cta);font-weight:700}
.ribbon:hover .rb-go{text-decoration:underline}
.pill{justify-self:start;display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border:1.5px solid var(--ink);text-decoration:none;font-size:.9375rem;font-weight:500}
.pill-new{background:var(--cta);color:var(--on-cta);font-family:var(--mono);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 8px}
.pill:hover{background:var(--ink);color:var(--bg)}
.nav-adir{color:var(--ink)!important;font-weight:700}
a.plain{color:inherit;text-decoration:none}

/* cartão do Adir no topo */
.adir-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;max-width:640px;width:100%;margin-top:12px;padding:14px 22px 14px 14px;border:1.5px solid var(--ink);text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.adir-thumb{width:168px;height:auto;aspect-ratio:16/9;object-fit:cover;max-width:100%}
.adir-text{display:grid;gap:6px;text-align:start;min-width:0}
.adir-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adir-name{font-weight:700;font-size:1.35rem;letter-spacing:-.01em}
.adir-sub{color:var(--muted);font-size:1rem;line-height:1.4}
.adir-go{color:var(--klein);font-weight:600}
.adir-card:hover{transform:translateY(-2px)}
@media (max-width:560px){.adir-card{grid-template-columns:1fr;padding:12px}.adir-thumb{width:100%}}
@media (prefers-reduced-motion:reduce){.adir-card:hover{transform:none}}
.req{margin:0 0 16px;font-weight:600}
.opt{margin:0 0 24px;max-width:70ch;padding:14px 18px;background:var(--surface);border-inline-start:3px solid var(--cta);color:var(--muted)}
.opt strong{color:var(--ink)}

/* página Sobre / currículo */
.cv-hero .wrap{padding-block:72px 48px;display:grid;gap:18px;justify-items:start;max-width:980px}
.cv-hero h1{font-size:clamp(3rem,8vw,6rem)}
.cv-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0;width:100%}
.cv-facts div{padding:14px 16px;background:var(--surface);border:1px solid var(--line)}
.cv-facts dt{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.cv-facts dd{margin:4px 0 0;font-weight:600}
.cv-now{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.cv-now a{display:grid;gap:6px;padding:18px;background:var(--surface);border:1px solid var(--line);text-decoration:none;align-content:start}
.cv-now b{font-size:1.15rem}
.cv-now span{color:var(--muted);font-size:.95rem}
.cv-timeline{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.cv-timeline > li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding-block:28px;border-bottom:1px solid var(--line)}
.cv-timeline .when{color:var(--muted);font-weight:600;padding-top:.3em}
.cv-timeline h3{font-size:1.6rem}
.cv-timeline .where{margin:6px 0 10px;color:var(--klein);font-weight:500}
.cv-timeline ul{margin:0;padding-inline-start:1.1em;display:grid;gap:6px;color:var(--muted)}
.cv-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;margin:0;border-top:1px solid var(--line)}
.cv-tools div{padding:14px 0;border-bottom:1px solid var(--line);display:grid;gap:4px}
.cv-tools dt{font-weight:700}
.cv-tools dd{margin:0;color:var(--muted)}
.cv-edu{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.cv-edu li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding-block:14px;border-bottom:1px solid var(--line)}
.cv-edu .when{color:var(--muted);font-weight:600}
.cv-bring{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.cv-bring li{padding:20px;background:var(--surface);border:1px solid var(--line);font-weight:500}
@media (max-width:700px){.cv-facts{grid-template-columns:1fr}.cv-timeline > li,.cv-edu li{grid-template-columns:1fr;gap:6px}}

.chapters{counter-reset:ch;list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.chapters li{counter-increment:ch;display:flex;gap:10px;align-items:baseline;padding:10px 14px;background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:.95rem}
.chapters li::before{content:counter(ch,decimal-leading-zero);color:var(--klein);font-variant-numeric:tabular-nums;font-weight:700}
.chapters li span{font-weight:400;color:var(--muted)}
.tut-credit{color:var(--muted);margin-top:14px;font-size:.8rem}

/* lista de tutoriais */
.tuts{display:grid;gap:18px}
.tut-item{display:grid;gap:8px}
.tut-item h3{font-size:1.6rem}
.tut-item > p{margin:0;color:var(--muted);max-width:70ch}
.chapters button{all:unset;cursor:pointer;display:flex;gap:10px;align-items:baseline;width:100%}
.chapters button:hover{color:var(--klein)}
.chapters button:focus-visible{outline:2px solid var(--klein);outline-offset:4px}
.chapters .t{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums;font-size:.85rem}
.chapters li:has(button)::before{display:none}
.tut-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:6px}
.tut-card{all:unset;cursor:pointer;display:grid;gap:6px;padding:8px;background:var(--surface);border:2px solid transparent}
.tut-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.tut-card b{font-size:1rem}
.tut-card span{color:var(--muted);font-size:.85rem}
.tut-card[aria-selected="true"]{border-color:var(--cta)}
.tut-card:focus-visible{outline:2px solid var(--klein)}

/* página de tutoriais: etapas empilhadas, vídeo em largura total */
.tnav{position:sticky;top:calc(env(safe-area-inset-top, 0px) + 52px);z-index:4;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px;padding:8px;background:color-mix(in srgb, var(--bg) 85%, transparent);backdrop-filter:blur(14px)}
.tnav a{text-decoration:none;padding:8px 14px;background:var(--surface);font-weight:500;font-size:.95rem;display:flex;gap:6px;align-items:center}
.tnav b{color:var(--klein)}
.tnav span{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tstage{padding-block:clamp(56px,8vw,110px) 40px;scroll-margin-top:110px}
.tstage + .tstage{border-top:1px solid var(--line)}
.tstage-head{display:flex;align-items:center;gap:clamp(16px,3vw,36px);margin-bottom:clamp(36px,5vw,64px)}
.ts-n{font-size:clamp(5rem,14vw,11rem);font-weight:800;line-height:.8;letter-spacing:-.06em;color:var(--cta);-webkit-text-stroke:2px var(--ink)}
.tstage-head h2{font-size:clamp(2.6rem,6vw,5rem);line-height:.95}
.tstage-head .eyebrow{margin:0 0 6px}
.tblock{display:grid;gap:18px;margin-bottom:clamp(64px,9vw,120px);scroll-margin-top:110px}
.tb-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 24px;align-items:start}
.tb-n{grid-row:span 2;font-size:clamp(2.6rem,5vw,4rem);font-weight:800;line-height:.9;color:var(--klein);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.tb-title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.tb-title h3{font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.05}
.tb-dur{font-size:.85rem;font-weight:600;color:var(--muted);padding:3px 10px;background:var(--surface)}
.tb-lw{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;margin:8px 0 0}
.tb-lw dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--klein);margin-bottom:4px}
.tb-lw dd{margin:0;font-size:1.05rem;line-height:1.45}
.tb-lw div:last-child dd{color:var(--muted)}
.tb-video{background:#000;aspect-ratio:16/9;max-width:100%;overflow:hidden}
.tb-video video{width:100%;height:100%;display:block}
.tb-ch{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tb-ch li > *{display:inline-flex;gap:8px;align-items:baseline;padding:8px 14px;background:var(--surface);font-size:.9rem;font-weight:500}
.tb-ch button{all:unset;cursor:pointer;display:inline-flex;gap:8px;align-items:baseline;padding:8px 14px;background:var(--surface);font-size:.9rem;font-weight:500}
.tb-ch button:hover{background:var(--cta);color:var(--on-cta)}
.tb-ch button:focus-visible{outline:2px solid var(--klein)}
.tb-ch .t{font-variant-numeric:tabular-nums;color:var(--klein);font-weight:700}
.tb-ch button:hover .t{color:inherit}
.tb-credit{margin:0;font-size:.78rem;color:var(--muted);max-width:90ch}
.tsoon{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 18px;border:1px dashed var(--line);color:var(--muted);font-size:.9rem;margin-top:-24px}
.tsoon b{color:var(--ink);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}
.tsoon ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.tsoon li span{font-variant-numeric:tabular-nums;opacity:.7}
/* etapa 4 em fundo escuro, como as faixas de produto */
.tstage.dark{background:#0b0b0f;color:#f5f5f7;--surface:#1c1c22;--line:#2c2c34;--muted:#a1a1a6;--ink:#f5f5f7}
.tstage.dark .ts-n{-webkit-text-stroke:0}
.tstage.dark .tb-n{color:var(--cta)}
.tstage.dark .tb-lw dt{color:var(--cta)}
.tstage.dark .tb-ch .t{color:var(--cta)}
@media (max-width:700px){.tb-lw{grid-template-columns:1fr}.tb-head{grid-template-columns:1fr}.tb-n{grid-row:auto}.tstage-head{gap:14px}}
.tstage.dark .eyebrow{color:var(--cta)}

.btn-lg{font-size:1.15rem;padding:16px 30px}
.tuts-cta{justify-content:center;margin:-8px 0 32px}
.btn-xl{font-size:clamp(1.4rem,3vw,2.1rem);padding:20px 40px}
.tuts-head{align-items:center}

/* "The result": o filme que o tutorial produz, ao lado do tutorial */
.tb-result{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:20px;align-items:center;padding:16px;background:var(--surface)}
.tb-result figcaption{display:grid;gap:6px;align-content:center}
.tb-result figcaption b{font-size:1.4rem;color:var(--cta);-webkit-text-stroke:0}
.tb-result figcaption .tb-dur{justify-self:start}
.tb-result video{width:100%;aspect-ratio:16/9;display:block;background:#000}
@media (max-width:700px){.tb-result{grid-template-columns:1fr}}

/* Adir Techniques: série de shorts verticais */
.shorts-intro{margin:-24px 0 32px;color:var(--muted);max-width:60ch;font-size:1.05rem}
.shorts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px;align-items:start}
.short{display:grid;gap:12px}
.short-video{position:relative;aspect-ratio:9/16;background:#000;overflow:hidden;max-width:100%}
.short-video video{width:100%;height:100%;object-fit:cover;display:block}
.short-n,.short-dur{position:absolute;top:10px;padding:3px 9px;font-size:.78rem;font-weight:700;pointer-events:none}
.short-n{inset-inline-start:10px;background:var(--cta);color:var(--on-cta)}
.short-dur{inset-inline-end:10px;background:rgba(0,0,0,.65);color:#fff}
.short-text{display:grid;gap:6px}
.short-text h3{font-size:1.35rem;line-height:1.1}
.short-sub{margin:0;color:var(--muted);font-size:.95rem}
.short-text details p{margin:8px 0 0;font-size:.9rem;color:var(--muted)}
.short-text summary{cursor:pointer;font-size:.88rem;font-weight:600;color:var(--klein)}
.short-tool{justify-self:start;font-size:.75rem;font-weight:600;padding:3px 10px;background:var(--surface);text-transform:lowercase}
.tstage.shorts .ts-n{color:var(--cta)}

/* Correção para o iPhone (Safari): vídeo dentro de moldura com canto arredondado + overflow:hidden
   às vezes não é desenhado até tocar. Uma camada própria resolve. */
.tb-video,.short-video,.feature-video,.tb-result video,video.promo{-webkit-transform:translateZ(0);transform:translateZ(0);isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black)}
/* No celular, o menu das etapas não fica fixo (ocupava 3 linhas por cima dos vídeos) */
@media (max-width:700px){.tnav{position:static;backdrop-filter:none;margin-top:0}}
.watch{margin:0 0 20px}