/* Selene Studio · Artigos (/artigos and /artigos/<slug>). Page styles on top of /site/site.css, drawn in
   Doop: the list in the frames "Artigos · …" (x 22000, phone x 23520) and the article in "Artigo · …"
   (x 24030, phone x 25550). The covers come from one rule per theme, built in HTML: no post needs its own art. */

/* The current page lights up in the bar, the phone menu and the footer (as on the FAQ; not in the kit yet). */
.nav-links a[aria-current="page"],.rd-col a[aria-current="page"],.menu-links a[aria-current="page"],.menu-links a[aria-current="page"] svg{color:var(--signal)}

:root{--ar-luz:radial-gradient(56% 360px at 50% 0%,rgb(255 255 255 / .95) 0%,rgb(255 255 255 / 0) 100%);--capa-luz:rgb(37 88 232 / .17)}
html.dark{--ar-luz:radial-gradient(56% 360px at 50% 0%,rgb(255 255 255 / .06) 0%,rgb(255 255 255 / 0) 100%);--capa-luz:rgb(38 105 254 / .24)}

/* ---------------------------------------------------------------------------------------------------
   Covers: a stage (the LP hero's dots and its blue light from below) with one product cut-out per theme.
   Each theme has a large layout (624 × 390) and a small one (384 × 240); the cut-out keeps its size and
   scales as a whole (--k, set from the cover's height in artigos.js), so it never reflows. */
.capa{position:relative;display:block;overflow:hidden;border-radius:18px;background:radial-gradient(70% 62% at 50% 118%,var(--capa-luz) 0%,rgb(37 88 232 / 0) 74%),radial-gradient(var(--dots) 1px,transparent 1.4px) 0 0/18px 18px,var(--card);box-shadow:0 0 0 1px var(--border);color:var(--fg);text-decoration:none}
.capa-in{position:absolute;left:50%;top:50%;width:624px;height:390px;margin:-195px 0 0 -312px;transform:scale(var(--k,1))}
.capa--p .capa-in{width:384px;height:240px;margin:-120px 0 0 -192px}
.capa .card{position:absolute;border-radius:14px}
.capa .chip{height:20px;padding:0 6px;font-size:11px;gap:5px}
.capa .av{width:22px;height:22px}
.capa .faint{color:var(--faint)}
.cv-sl{position:absolute;width:200px;height:250px;border-radius:12px;box-shadow:var(--floating);overflow:hidden;display:flex;flex-direction:column}
.cv-sl .s-top{display:flex;justify-content:space-between;align-items:center;padding:14px 14px 0;font:italic 600 12px/1 Fraunces,serif;color:var(--pomar)}
.cv-sl .s-top i{font:500 9px/1 var(--sans);font-style:normal;color:rgb(43 33 24 / .55)}
.cv-sl .s-t{padding:9px 14px 0;font:600 19px/1.08 Fraunces,serif;letter-spacing:-.01em}
.cv-sl .s-x{padding:7px 14px 0;font:400 10.5px/1.4 var(--sans)}
.cv-sl img{margin:12px 14px 0;width:calc(100% - 28px);height:100px;border-radius:7px;object-fit:cover}
/* carousels, large: three slides fanned, the post's title on the front one */
.cv-car .cv-a{left:58px;top:96px;transform:rotate(-8deg);background:var(--pomar);color:var(--pomar-bg)}
.cv-car .cv-a .s-top,.cv-car .cv-a .s-top i{color:rgb(255 244 230 / .78)}
.cv-car .cv-a img{height:96px}
.cv-car .cv-c{left:366px;top:96px;transform:rotate(8deg);text-align:right}
.cv-car .cv-c .s-t{padding:34px 14px 0 52px;font-size:20px}
.cv-car .cv-b{left:212px;top:62px;z-index:4;box-shadow:var(--front)}
/* carousels, small: two slides, the title on the front one */
.cv-car-p .cv-sl{width:150px;height:188px;border-radius:10px}
.cv-car-p .cv-a{left:64px;top:44px;transform:rotate(-7deg);background:var(--pomar);color:var(--pomar-bg)}
.cv-car-p .cv-a .s-top,.cv-car-p .cv-a .s-top i{color:rgb(255 244 230 / .78)}
.cv-car-p .cv-a .s-t{font-size:16px}
.cv-car-p .cv-a img{height:64px;margin-top:10px}
.cv-car-p .cv-b{left:184px;top:24px;width:160px;height:200px;transform:rotate(4deg);z-index:2;box-shadow:var(--front)}
.cv-car-p .cv-b .s-t{padding-top:14px;font-size:17px;line-height:1.1}
.cv-car-p .cv-b img{height:62px}
.cv-rumo .cv-sl .s-top{font:700 10px/1 'Space Grotesk',sans-serif;letter-spacing:.02em}
.cv-rumo .cv-a{background:#0d5c5e;color:#f4efe6}
.cv-rumo .cv-a .s-top{color:#ffc861}
.cv-rumo .cv-a .s-t{font:700 17px/1.04 'Space Grotesk',sans-serif}
.cv-rumo .cv-b{background:#f4efe6;color:#0d5c5e}
.cv-rumo .cv-b .s-top{color:#0d5c5e}
.cv-rumo .cv-b .s-t{font:700 16px/1.1 'Space Grotesk',sans-serif}
.cv-rumo .cv-x{padding:6px 12px 0;font:500 9px/1.35 'Space Grotesk',sans-serif;opacity:.82}
.cv-seta{margin:auto 12px 12px auto;display:grid;place-items:center;width:24px;height:24px;border-radius:99px;background:#0d5c5e;color:#ffc861;font:700 13px/1 'Space Grotesk',sans-serif}
/* metrics, large: the profile's analytics behind the Monday e-mail, whose subject is the post's title */
.cv-an{left:226px;top:34px;width:368px;padding:16px 18px 14px;box-shadow:var(--floating)}
.cv-an-topo{display:flex;align-items:center;gap:8px;font-size:12px}
.cv-an-topo b{font:600 13px/1 var(--sans)}
.cv-an-topo .faint{margin-left:auto}
.cv-an-topo .i{width:12px;height:12px}
.cv-nums{display:grid;grid-template-columns:1fr 1fr;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.cv-nums>div+div{padding-left:14px;border-left:1px solid var(--border)}
.cv-nums p{font-size:11px;color:var(--muted-fg)}
.cv-nums b{display:block;margin:3px 0 5px;font:600 22px/1.1 var(--sans);letter-spacing:-.02em}
.cv-graf{display:block;width:100%;height:auto;margin-top:12px;overflow:visible}
.cv-graf .grade{stroke:var(--grid)}.cv-graf .antes{stroke:var(--compare)}.cv-graf .linha{stroke:var(--signal)}.cv-graf .ponto{fill:var(--signal)}
.cv-em{left:34px;top:156px;width:340px;padding:14px 16px 16px;z-index:3;box-shadow:var(--front)}
.cv-em-topo{display:flex;align-items:center;gap:8px;font-size:11.5px;line-height:1.3}
.cv-em-av{display:grid;place-items:center;width:28px;height:28px;border-radius:99px;background:var(--signal-soft);flex:none}
.cv-em-av .sel{width:16px;height:16px}
.cv-em-topo .faint:last-child{margin-left:auto}
.cv-em-ass{margin-top:10px;font:600 14px/1.3 var(--sans);text-wrap:balance}
.cv-cx{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.cv-cx .cx{padding:9px;border-radius:10px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--border)}
.cv-cx p{font-size:10px;color:var(--muted-fg)}
.cv-barras{display:grid;grid-template-columns:auto 1fr;gap:5px 7px;align-items:center;margin-top:7px;font-size:9.5px}
.cv-barras i{height:6px;border-radius:3px;background:var(--signal);transform-origin:0 50%}
.cv-barras i.o{width:48%;background:var(--bar-other)}
.cv-barras .faint{color:var(--faint)}
.cv-calor{display:grid;grid-template-columns:repeat(24,1fr);gap:1.5px;height:16px;margin-top:9px}
.cv-calor i{border-radius:1.5px;background:color-mix(in srgb,var(--signal) calc(var(--v) * 100%),transparent)}
.cv-horas{display:flex;justify-content:space-between;margin-top:5px;font-size:9px;color:var(--faint)}
.cv-horas .p{color:var(--signal);font-weight:600}
.cv-met-p .cv-em{left:42px;top:26px;width:300px;padding:12px 14px}
.cv-met-p .cv-em-av{width:26px;height:26px}
.cv-met-p .cv-em-ass{margin-top:8px;font-size:12.5px}
.cv-met-p .cv-cx{margin-top:10px}
/* teams, small: the approval card named after the post, with who writes, reviews and approves */
.cv-ap{left:58px;top:20px;width:268px;padding:12px 14px 4px;box-shadow:var(--front)}
.cv-ap-hd{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}
.cv-ap-hd b{font:600 12px/1.3 var(--sans)}
.cv-ap-hd .chip{margin-left:auto}
.cv-pap{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--border);font-size:12px;line-height:1.3}
.cv-pap .chip{margin-left:auto}
.cv-pap .av-sel{background:var(--signal-soft)}
.cv-pap .av-sel .sel{width:14px;height:14px}
.cv-ok{left:170px;top:190px;z-index:3;display:flex;align-items:center;gap:7px;padding:7px 11px 7px 8px;border-radius:12px;box-shadow:var(--front);font-size:11.5px;line-height:1.3;white-space:nowrap}
.cv-ok span{display:grid;place-items:center;width:18px;height:18px;border-radius:99px;background:var(--success-soft);color:var(--success)}
.cv-ok span .i{width:10px;height:10px}
.c-sig{background:var(--signal-soft);color:var(--signal)}
/* Reels, small: the phone on the hook scene and the script beside it */
.cv-cel{position:absolute;left:52px;top:22px;width:128px;height:228px;border-radius:20px;padding:5px;background:var(--phone);box-shadow:var(--front)}
.cv-tela{position:relative;height:100%;border-radius:15px;overflow:hidden;background:var(--pomar-bg);color:var(--pomar-ink)}
.cv-tela .m{position:absolute;left:12px;top:14px;font:italic 600 10px/1 Fraunces,serif;color:var(--pomar)}
.cv-tela .r{position:absolute;left:12px;top:62px;font:600 8.5px/1 var(--sans);letter-spacing:.03em;color:var(--pomar)}
.cv-tela .t{position:absolute;left:12px;right:8px;top:76px;font:600 21px/1.02 Fraunces,serif}
.cv-tela .b{position:absolute;left:12px;right:12px;bottom:14px;height:3px;border-radius:2px;background:rgb(43 33 24 / .12)}
.cv-tela .b i{display:block;width:10%;height:3px;border-radius:2px;background:var(--pomar)}
.cv-rot{left:196px;top:34px;width:160px;padding:10px 12px 8px;box-shadow:var(--floating)}
.cv-rot-t{display:flex;align-items:center;gap:6px;margin-bottom:4px;font:600 11px/1 var(--sans)}
.cv-rot-t .sel{width:13px;height:13px}
.cv-sc{display:grid;grid-template-columns:44px 1fr;gap:5px;padding:5px 7px;margin:0 -7px;border-radius:7px;font-size:9.5px;line-height:1.35}
.cv-sc b{font:600 9px/1.3 var(--sans);color:var(--signal)}
.cv-sc b span{display:block;font-weight:500;color:var(--faint)}
.cv-sc.on{background:var(--signal-soft)}
/* The large Times, Reels and Rumo-carousel layouts, which the prototype drew only small: drawn in Doop and
   approved on 2026-11-08 (frame QI5NdDXuuj, page "Site · Selene Studio"), in the scale of the other large
   covers. */
/* teams, large: the slide under review with its numbered comment, the approval card named after the post
   (who writes, reviews and approves) and the approval that schedules it */
.cv-tim-g .cv-sl{left:50px;top:56px;width:196px;height:244px;transform:rotate(-4deg);z-index:1}
.cv-tim-g .cv-sl img{height:96px}
.cv-tim-g .pin{left:140px;top:64px}
.cv-com{left:132px;top:242px;width:224px;padding:10px 12px;z-index:3;box-shadow:var(--front)}
.cv-com-q,.cv-com-r{display:flex;align-items:center;gap:7px;font-size:11.5px;line-height:1.3}
.cv-com-q .faint{margin-left:auto;font-size:10.5px}
.cv-com p{margin-top:6px;font-size:11px;line-height:1.4;text-wrap:pretty}
.cv-com-r{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);font-size:11px}
.cv-com-r .chip{margin-left:auto}
.cv-com .av{width:20px;height:20px}
.cv-com .av-sel{background:var(--signal-soft)}
.cv-com .av-sel .sel{width:12px;height:12px}
.cv-tim-g .cv-ap{left:296px;top:38px;width:262px;padding:14px 16px 6px;z-index:2;box-shadow:var(--floating)}
.cv-tim-g .cv-ap-hd{gap:9px;margin-bottom:0}
.cv-tim-g .cv-ap-hd .av{width:24px;height:24px;font-size:11px}
.cv-tim-g .cv-ap-hd b{font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cv-ap-meta{display:flex;align-items:center;justify-content:space-between;margin:6px 0 8px 33px;font-size:11px}
.cv-tim-g .cv-pap{padding:7px 0;font-size:12px}
.cv-tim-g .cv-ok{left:384px;top:230px;align-items:flex-start;gap:8px;padding:9px 12px 9px 9px;white-space:normal}
.cv-tim-g .cv-ok span{width:22px;height:22px}
.cv-tim-g .cv-ok span .i{width:12px;height:12px}
.cv-ok p{font-size:11.5px;line-height:1.3}
.cv-ok p+p{margin-top:2px;font-size:10.5px;color:var(--faint)}
/* Reels, large: the phone playing the hook, with the scenes as its progress bar, the five-scene script
   beside it and the duration the person picked */
.cv-ree-g .cv-cel{left:70px;top:40px;width:172px;height:310px;border-radius:26px;padding:6px}
.cv-ree-g .cv-tela{border-radius:20px}
.cv-ree-g .cv-tela .m{left:16px;top:18px;font-size:12px}
.cv-tela .tm{position:absolute;right:14px;top:19px;font:500 9.5px/1 var(--sans);color:rgb(43 33 24 / .55)}
.cv-ree-g .cv-tela .r{left:16px;top:118px;font-size:10px;letter-spacing:.04em}
.cv-ree-g .cv-tela .t{left:16px;right:14px;top:134px;font-size:22px;line-height:1.05}
.cv-ree-g .cv-tela .b{left:16px;right:16px;bottom:20px;display:flex;gap:3px;background:none}
.cv-ree-g .cv-tela .b i{flex:var(--d) 0 0;width:auto;background:rgb(43 33 24 / .14)}
.cv-ree-g .cv-tela .b i:first-child{background:linear-gradient(90deg,var(--pomar) 66%,rgb(43 33 24 / .14) 66%)}
.cv-ree-g .cv-rot{left:270px;top:36px;width:290px;padding:14px 16px 10px}
.cv-ree-g .cv-rot-t{gap:7px;margin-bottom:6px;font-size:12px}
.cv-ree-g .cv-rot-t .sel{width:14px;height:14px}
.cv-rot-t .faint{margin-left:auto;font-weight:500;font-size:11px}
.cv-ree-g .cv-sc{grid-template-columns:62px 1fr;gap:8px;padding:6px 8px;margin:0 -8px;font-size:11px}
.cv-ree-g .cv-sc b{font-size:10.5px}
.cv-dur{left:300px;top:290px;display:flex;align-items:center;gap:10px;padding:5px 5px 5px 14px;border-radius:999px;box-shadow:var(--front);font-size:11.5px;color:var(--muted-fg)}
.cv-dur .seg{padding:2px}
.cv-dur .seg span{font-size:11px;line-height:24px;padding:0 9px}
/* Rumo carousels, large: the Pomar's fan of three slides in the Rumo colors, the post's title and the
   train map on the front one */
.cv-car.cv-rumo-g .cv-sl .s-top{font:700 11px/1 'Space Grotesk',sans-serif;letter-spacing:.02em}
.cv-car.cv-rumo-g .cv-sl .s-top i{font:500 9px/1 'Space Grotesk',sans-serif;color:inherit;opacity:.7}
.cv-car.cv-rumo-g .cv-a,.cv-car.cv-rumo-g .cv-c{background:#f4efe6;color:#0d5c5e}
.cv-car.cv-rumo-g .cv-a .s-top,.cv-car.cv-rumo-g .cv-c .s-top{color:#0d5c5e}
.cv-car.cv-rumo-g .cv-b{background:#0d5c5e;color:#f4efe6}
.cv-car.cv-rumo-g .cv-b .s-top{color:#ffc861}
.cv-car.cv-rumo-g .cv-a .s-t,.cv-car.cv-rumo-g .cv-a .cv-x{padding-right:58px}
.cv-car.cv-rumo-g .s-t{font:700 19px/1.06 'Space Grotesk',sans-serif;letter-spacing:-.01em}
.cv-car.cv-rumo-g .cv-a .s-t{font-size:18px}
.cv-car.cv-rumo-g .cv-c .s-t{padding:34px 14px 0 40px;font-size:17px}
.cv-rumo-g .cv-x{padding:7px 14px 0;font:500 10.5px/1.4 'Space Grotesk',sans-serif;opacity:.82}
.cv-rota{display:block;margin:auto 14px 18px;width:172px;height:88px}

/* ---------------------------------------------------------------------------------------------------
   The list */
.ar-pg{position:relative;isolation:isolate;padding:152px 0 112px}
.ar-pg::before,.art::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:560px;background:var(--ar-luz);pointer-events:none}
.ar-aviso{display:none;margin-bottom:28px;padding:10px 14px;border-radius:10px;background:var(--warning-soft);color:var(--warning);font-size:14px;line-height:1.45}
.volume .ar-aviso{display:block}
.ar-cab{display:grid;grid-template-columns:1fr 520px;align-items:end;column-gap:48px}
.ar-cab h1{font:500 56px/1.05 var(--display);letter-spacing:-.02em}
.ar-cab p{font-size:18px;line-height:1.55;color:var(--muted-fg);text-wrap:pretty}
.ar-abas{display:none;align-items:center;justify-content:space-between;gap:16px;margin-top:40px}
.volume .ar-abas{display:flex}
.ar-abas div{display:flex;gap:4px}
.ar-abas button{font:500 13px/30px var(--sans);padding:0 12px;border-radius:999px;color:var(--muted-fg);transition:color .2s var(--ease),background-color .2s var(--ease)}
.ar-abas button:hover{color:var(--fg)}
.ar-abas button[aria-pressed="true"]{background:var(--card);color:var(--fg);box-shadow:var(--raised)}
.ar-conta{font-size:13px;color:var(--faint);white-space:nowrap}
.dest{display:grid;grid-template-columns:624px 1fr;gap:56px;align-items:center;margin-top:48px}
.volume .dest{margin-top:32px}
.dest+.dest{margin-top:72px}
.volume .dest+.dest{display:none}
.dest .capa{height:390px}
.dest h2{font:500 36px/1.12 var(--display);letter-spacing:-.018em;text-wrap:balance}
.dest-res{margin-top:16px;font-size:18px;line-height:1.55;color:var(--muted-fg);text-wrap:pretty}
.meta{margin-top:20px;font-size:13px;line-height:1.4;color:var(--faint)}
.meta b{font-weight:500;color:var(--muted-fg)}
.dest h2 a,.cartao h3 a,.rel h3 a{text-decoration:none;transition:color .2s var(--ease)}
.dest h2 a:hover,.cartao h3 a:hover,.rel h3 a:hover,.dest:has(.capa:hover) h2 a,.cartao:has(.capa:hover) h3 a,.rel:has(.capa:hover) h3 a{color:var(--signal)}
.grade{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 24px;margin-top:64px}
.volume .grade{display:grid}
.cartao .capa{height:240px}
.cartao h3{margin-top:20px;font:500 22px/1.22 var(--display);letter-spacing:-.012em;text-wrap:balance}
.cartao>p:not(.meta){margin-top:8px;font-size:15px;line-height:1.5;color:var(--muted-fg);text-wrap:pretty}
.cartao .meta{margin-top:12px}
.arq{display:none;margin-top:104px}
.volume .arq{display:block}
.arq-cab{display:flex;align-items:baseline;justify-content:space-between}
.arq-cab h2{font:500 28px/1.15 var(--display);letter-spacing:-.015em}
.arq-cab p{font-size:14px;color:var(--faint)}
.arq-mes{margin-top:32px;padding-bottom:10px;border-bottom:1px solid var(--border);font:500 13px/1.3 var(--sans);color:var(--faint)}
.arq-r{position:relative;display:grid;grid-template-columns:112px 128px 1fr 72px;align-items:center;height:60px;padding:0 16px;margin:0 -16px;border-radius:12px;font-size:14px;text-decoration:none;transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
.arq-r::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:1px;background:var(--border)}
.arq-r time{color:var(--faint)}
.arq-r span{color:var(--muted-fg)}
.arq-r b{font:500 17px/1.35 var(--sans);letter-spacing:-.005em;transition:color .2s var(--ease)}
.arq-r i{font-style:normal;text-align:right;color:var(--faint)}
.arq-r:hover{background:var(--card);box-shadow:var(--raised)}
.arq-r:hover::after{opacity:0}
.arq-r:hover b{color:var(--signal)}
.pag{display:flex;align-items:center;justify-content:space-between;margin-top:32px;font-size:14px;color:var(--muted-fg)}
.pag nav{display:flex;align-items:center;gap:4px}
.pag a,.pag span{display:grid;place-items:center;min-width:36px;height:36px;padding:0 10px;border-radius:999px;font-weight:500;text-decoration:none}
.pag [aria-current]{background:var(--card);color:var(--fg);box-shadow:var(--raised)}
.pag .off{color:var(--faint);opacity:.6}
.pag .nx{color:var(--signal)}
[data-tema][hidden]{display:none!important}

/* ---------------------------------------------------------------------------------------------------
   The article: a 220 px column on the left (back link, then the contents that follow the reading) and the
   text in 640 px; the title and the cover take 900 px. */
.art{position:relative;isolation:isolate;padding:144px 0 0}
.art-grade{display:grid;grid-template-columns:220px minmax(0,900px);column-gap:80px;grid-template-areas:"volta cab" ". capa" "toc texto"}
.art-volta{grid-area:volta;align-self:start;display:inline-flex;align-items:center;gap:6px;justify-self:start;height:32px;margin-top:12px;font-size:14px;color:var(--muted-fg);text-decoration:none;transition:color .2s var(--ease)}
.art-volta:hover{color:var(--signal)}
.art-volta svg{width:16px;height:16px;transform:scaleX(-1)}
.art-cab{grid-area:cab}
.art-cab h1{font:500 52px/1.08 var(--display);letter-spacing:-.02em;max-width:860px;text-wrap:balance}
.art-dek{margin-top:20px;max-width:720px;font-size:20px;line-height:1.5;color:var(--muted-fg);text-wrap:pretty}
.art-por{display:flex;align-items:center;gap:12px;margin-top:28px}
.art-av{display:grid;place-items:center;width:36px;height:36px;border-radius:99px;background:var(--signal-soft);flex:none}
.art-av .sel{width:20px;height:20px}
.art-por b{display:block;font:500 15px/1.3 var(--sans)}
.art-por p>span{display:block;font-size:14px;line-height:1.4;color:var(--faint)}
.art-capa{grid-area:capa;height:470px;margin-top:44px;border-radius:24px}
.art-toc{grid-area:toc;align-self:start;position:sticky;top:104px;margin-top:64px}
.art-toc p{margin-bottom:10px;font:500 13px/1.3 var(--sans);color:var(--faint)}
.art-toc ol,.toc-cel ol{list-style:none;padding:0}
.art-toc a{display:block;padding:7px 0 7px 14px;font-size:14px;line-height:1.35;color:var(--muted-fg);border-left:2px solid var(--border);text-decoration:none;transition:color .2s var(--ease),border-color .2s var(--ease)}
.art-toc a:hover{color:var(--fg)}
.art-toc a[aria-current]{color:var(--signal);border-left-color:var(--signal);font-weight:500}
.copiar{display:inline-flex;align-items:center;gap:8px;height:36px;margin-top:24px;padding:0 12px;border-radius:10px;background:var(--card);box-shadow:var(--raised);font:500 14px/1 var(--sans);transition:color .2s var(--ease)}
.copiar svg{width:15px;height:15px;color:var(--muted-fg)}
.copiar.ok,.copiar.ok svg{color:var(--success)}
.toc-cel{display:none}
.texto{grid-area:texto;min-width:0;margin-top:64px}
.texto>*{max-width:640px}
.texto>p,.texto li{font-size:18px;line-height:1.7;text-wrap:pretty}
.texto>p{margin-top:24px}
.texto>p:first-of-type{margin-top:32px}
.texto h2{margin-top:64px;font:500 30px/1.2 var(--display);letter-spacing:-.015em;text-wrap:balance;scroll-margin-top:104px}
.texto h2+p,.texto h2+ul,.texto h2+ol{margin-top:16px}
.texto b,.texto strong{font-weight:600}
.texto a{color:var(--signal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--signal) 45%,transparent);transition:text-decoration-color .2s var(--ease)}
.texto a:hover{text-decoration-color:currentColor}
.resumo{padding:24px 28px;border-radius:18px;background:var(--card);box-shadow:var(--raised)}
.resumo-t{font:600 15px/1.3 var(--sans)}
.resumo ul{list-style:none;padding:0;margin-top:12px;display:grid;gap:10px}
.resumo li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:16px;line-height:1.5}
.resumo li i{display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:99px;background:var(--signal-soft);color:var(--signal)}
.resumo li i .i{width:12px;height:12px}
.passos,.pontos{list-style:none;padding:0;margin-top:20px;display:grid;gap:12px}
.passos{counter-reset:p}
.passos li{display:grid;grid-template-columns:28px 1fr;gap:12px;counter-increment:p}
.passos li::before{content:counter(p);display:grid;place-items:center;width:28px;height:28px;margin-top:1px;border-radius:8px;background:var(--muted);font:600 13px/1 var(--sans);color:var(--muted-fg)}
.pontos li{position:relative;padding-left:22px}
.pontos li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:9px;background:var(--signal)}
.texto .tabela{margin-top:24px;border-radius:14px;background:var(--card);box-shadow:var(--raised);overflow:hidden}
.tabela table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.tabela th,.tabela td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.tabela tr:last-child td{border-bottom:0}
.tabela th{font:600 13px/1.3 var(--sans);color:var(--muted-fg);background:var(--soft)}
.tabela td:first-child{font-weight:500;white-space:nowrap}
.fig{max-width:900px!important;margin-top:40px}
.fig figcaption{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:14px;line-height:1.5;color:var(--faint)}
.ilu{display:inline-flex;align-items:center;flex:none;height:22px;padding:0 8px;border-radius:6px;background:var(--muted);color:var(--muted-fg);font:500 12px/1 var(--sans);white-space:nowrap}
/* figure: the cover in two versions, with the pin on the title of the first */
.fig-palco{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:36px 112px 32px;border-radius:24px;background:var(--card);box-shadow:var(--raised)}
.fig-v{display:flex;align-items:center;gap:8px;margin-bottom:12px;font:500 12px/1 var(--sans);color:var(--muted-fg)}
.fig-v i{width:8px;height:8px;border-radius:9px;background:var(--faint)}
.fig-v.agora i{background:var(--signal)}
.fig-sl{position:relative;height:282px;border-radius:12px;overflow:visible;box-shadow:0 0 0 1px rgb(43 33 24 / .06),0 10px 24px -12px rgb(10 26 58 / .25)}
.fig-sl .s-top{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 0;font:italic 600 13px/1 Fraunces,serif;color:var(--pomar)}
.fig-sl .s-top i{font:500 10px/1 var(--sans);font-style:normal;color:rgb(43 33 24 / .55)}
.fig-sl .s-t{padding:12px 16px 0;font:600 23px/1.1 Fraunces,serif;letter-spacing:-.01em}
.fig-sl>img{margin:14px 16px 0;width:calc(100% - 32px);height:186px;border-radius:8px;object-fit:cover}
.fig-sl.v2>img{height:160px}
.fig-pin{left:262px;top:42px}
.fig-bolha{position:absolute;left:150px;top:70px;z-index:3;width:220px;padding:10px 12px;border-radius:14px;background:var(--card);box-shadow:var(--front);font-size:13px;line-height:1.45}
.fig-bolha .q{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.fig-bolha .q img{width:22px;height:22px;border-radius:99px;object-fit:cover}
.fig-bolha .q b{font-weight:600}
.fig-bolha .q span{font-size:12px;color:var(--faint)}
/* figure: what each network gives, side by side */
.na-selene{display:grid;grid-template-columns:40px 1fr;gap:16px;margin-top:40px;padding:24px 28px;border-radius:18px;background:var(--signal-soft)}
.na-selene .s{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--card);box-shadow:var(--raised)}
.na-selene .s .sel{width:22px;height:22px}
.na-t{font:600 16px/1.3 var(--sans)}
.na-selene p:not(.na-t){margin-top:6px;font-size:16px;line-height:1.55}
.texto .na-selene a{display:inline-block;margin-top:10px;font:500 15px/1 var(--sans);text-decoration:none}
.art-faq{margin-top:72px}
.art-faq h2,.fontes h2{margin-top:0}
.art-faq .qs{margin-top:20px}
.art-faq .q-resp p{max-width:none}
.fontes{margin-top:56px}
.fontes ol{list-style:none;padding:0;margin-top:16px;display:grid;gap:14px;counter-reset:f}
.fontes li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:15px;line-height:1.5;color:var(--muted-fg);counter-increment:f;overflow-wrap:anywhere}
.fontes li::before{content:counter(f);display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--muted);font:600 12px/1 var(--sans);color:var(--muted-fg)}
.fontes b{font-weight:500;color:var(--fg)}
.autor{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center;margin-top:56px;padding:20px 24px;border-radius:18px;background:var(--card);box-shadow:var(--raised)}
.autor .av-a{display:grid;place-items:center;width:48px;height:48px;border-radius:99px;background:var(--signal-soft)}
.autor .av-a .sel{width:26px;height:26px}
.autor b{display:block;font:600 16px/1.3 var(--sans)}
.autor p{margin-top:2px;font-size:15px;line-height:1.5;color:var(--muted-fg)}
/* read next: posts already published only */
.leia{padding-bottom:112px}
.leia-cab{display:flex;align-items:baseline;justify-content:space-between}
.sec .leia-cab h2{font:500 28px/1.15 var(--display);letter-spacing:-.015em}
.leia-cab a{font:500 15px/1 var(--sans);color:var(--signal);text-decoration:none}
.leia-cab a:hover{text-decoration:underline;text-underline-offset:4px}
.rel{display:grid;grid-template-columns:384px 1fr;gap:48px;align-items:center;margin-top:32px}
.rel .capa{height:240px}
.rel h3{font:500 28px/1.18 var(--display);letter-spacing:-.015em;max-width:640px;text-wrap:balance}
.rel-res{margin-top:12px;max-width:600px;font-size:17px;line-height:1.55;color:var(--muted-fg)}
.rel .meta{margin-top:16px}

@media (min-width:960px) and (max-width:1295px){.ar-pg,.art{zoom:var(--z,1)}}

/* ---------------------------------------------------------------------------------------------------
   Phones: one column, left-aligned titles, covers at 16:10 across the column */
@media (max-width:959px){
  .ar-pg{padding:92px 0 72px}
  .ar-pg::before,.art::before{height:420px}
  .ar-cab{display:block}
  .ar-cab h1{font-size:36px}
  .ar-cab p{margin-top:14px;font-size:16px}
  .ar-abas{display:none;margin-top:24px;overflow-x:auto;scrollbar-width:none;margin-right:-16px}
  .volume .ar-abas{display:flex}
  .ar-abas::-webkit-scrollbar{display:none}
  .ar-abas button{font-size:14px;line-height:34px;padding:0 14px;flex:none}
  .ar-conta{display:none}
  .dest{display:block;margin-top:24px}
  .dest+.dest{margin-top:48px}
  .dest .capa,.cartao .capa,.rel .capa{height:auto;aspect-ratio:16/10}
  .dest h2{margin-top:20px;font-size:26px;line-height:1.15}
  .dest-res{margin-top:10px;font-size:16px}
  .dest .meta{margin-top:12px}
  .grade{grid-template-columns:1fr;gap:48px;margin-top:48px}
  .cartao h3{margin-top:18px}
  .arq{margin-top:72px}
  .arq-cab p{display:none}
  .arq-cab h2{font-size:24px}
  .arq-mes{margin-top:20px;padding-bottom:8px}
  .arq-r{display:block;height:auto;padding:14px 0;margin:0;border-radius:0}
  .arq-r::after{left:0;right:0}
  .arq-r time,.arq-r span,.arq-r i{font-size:13px}
  .arq-r span::before,.arq-r i::before{content:" · "}
  .arq-r b{display:block;margin-top:3px;font-size:16px;line-height:1.4}
  .arq-r:hover{background:none;box-shadow:none}
  .arq-r>*:not(b){display:inline}
  .arq-r b{order:5}
  .pag{display:grid;grid-template-columns:1fr auto 1fr;margin-top:20px}
  .pag nav{display:contents}
  .pag nav a:not(.nx),.pag nav [aria-current]{display:none}
  .pag p{order:2;font-size:14px}
  .pag .off{order:1;justify-self:start}
  .pag .nx{order:3;justify-self:end;height:44px;padding:0 16px;border-radius:10px;background:var(--card);box-shadow:var(--raised);color:var(--fg)}
  .art{padding-top:68px}
  .art-grade{display:block}
  .art-volta{height:44px;margin:8px 0 0;font-size:15px}
  .art-volta svg{width:18px;height:18px}
  .art-cab h1{margin-top:4px;font-size:34px;line-height:1.08}
  .art-dek{margin-top:14px;font-size:17px}
  .art-por{margin-top:20px}
  .art-por p>span{font-size:13px}
  .art-capa{height:auto;aspect-ratio:16/10;margin-top:28px;border-radius:18px}
  .art-toc{display:none}
  .toc-cel{display:block;margin-bottom:16px;border-radius:14px;background:var(--card);box-shadow:var(--raised)}
  .toc-cel summary{display:flex;align-items:center;gap:8px;height:52px;padding:0 16px;font:500 15px/1 var(--sans);list-style:none;cursor:pointer}
  .toc-cel summary::-webkit-details-marker{display:none}
  .toc-cel summary span{color:var(--faint);font-weight:400}
  .toc-cel summary svg{width:18px;height:18px;margin-left:auto;color:var(--muted-fg);transition:transform .2s var(--ease)}
  .toc-cel[open] summary svg{transform:rotate(180deg)}
  .toc-cel ol{padding:0 16px 10px}
  .toc-cel a{display:flex;align-items:center;min-height:44px;border-top:1px solid var(--border);font-size:15px;color:var(--fg);text-decoration:none}
  .texto{margin-top:40px}
  .texto>p,.texto li{font-size:17px;line-height:1.65}
  .texto>p:first-of-type{margin-top:22px}
  .texto>p{margin-top:22px}
  .texto h2{margin-top:48px;font-size:24px;scroll-margin-top:76px}
  .texto h2+p{margin-top:12px}
  .resumo{margin-top:0;padding:20px}
  .resumo li{font-size:15px}
  .tabela table{font-size:14px}
  .tabela th,.tabela td{padding:10px 11px}
  .tabela td:first-child{white-space:normal}
  .fig{max-width:none!important;margin-top:28px}
  .fig-palco{gap:12px;padding:16px 14px 14px;border-radius:20px}
  .fig-v{font-size:11px;gap:6px;margin-bottom:8px}
  .fig-sl{height:200px;border-radius:10px}
  .fig-sl .s-top{padding:11px 11px 0;font-size:10px}
  .fig-sl .s-top i{display:none}
  .fig-sl .s-t{padding:8px 11px 0;font-size:15px}
  .fig-sl>img{margin:10px 11px 0;width:calc(100% - 22px);height:104px;border-radius:6px}
  .fig-sl.v2>img{height:86px}
  .fig-pin{left:auto;right:6px;top:30px}
  .fig-bolha{position:static;grid-column:1/-1;width:auto;margin-top:0;background:var(--soft);box-shadow:inset 0 0 0 1px var(--border);font-size:14px}
  .fig figcaption{font-size:14px}
  .na-selene{display:block;margin-top:32px;padding:20px}
  .na-t{margin-top:14px}
  .texto .na-selene a{display:inline-flex;align-items:center;height:44px;margin-top:4px;font-size:16px}
  .art-faq{margin-top:56px}
  .art-faq .q button{font-size:16px}
  .fontes{margin-top:48px}
  .fontes li{font-size:14px}
  .autor{grid-template-columns:44px 1fr;gap:14px;margin-top:40px;padding:16px}
  .autor .av-a{width:44px;height:44px}
  .autor p{font-size:14px}
  .leia{padding-bottom:72px}
  .sec .leia-cab h2{font-size:24px}
  .rel{display:block;margin-top:20px}
  .rel h3{margin-top:16px;font-size:21px;line-height:1.22}
  .rel-res{margin-top:8px;font-size:15px}
  .rel .meta{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.toc-cel summary svg{transition:none}}

/* Desktop covers have fixed heights; the article's cover is taller than the large layout. Above the fold,
   the cut-outs wait for their entrance (the "anim" class is dropped if GSAP never runs). */
@media (min-width:960px){.art-capa{--k:1.2051}}
.anim .ar-lista>.dest:first-child .capa-in,.anim .art-capa .capa-in{opacity:0}

/* ---------------------------------------------------------------------------------------------------
   Added in the repo for the pages the Worker builds (worker/blog/pages.ts), on top of the prototype:
   theme tabs as links (the server filters and pages), the cards' summary in two lines, "Leia também"
   with more than one article, invented examples written as text, h3 and quotes, the draft preview
   banner and the empty list. */
.ar-abas a{font:500 13px/30px var(--sans);padding:0 12px;border-radius:999px;color:var(--muted-fg);text-decoration:none;transition:color .2s var(--ease),background-color .2s var(--ease)}
.ar-abas a:hover{color:var(--fg)}
.ar-abas a[aria-current="page"]{background:var(--card);color:var(--fg);box-shadow:var(--raised)}
.ar-conta{font-size:13px;color:var(--faint)}
.cartao>p:not(.meta){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.leia .grade{display:grid;margin-top:32px}
.fig-texto{max-width:640px!important}
.fig-texto .fig-palco{display:block;padding:28px 32px;background:radial-gradient(var(--dots) 1px,transparent 1.4px) 0 0/18px 18px,var(--card)}
.fig-texto .fig-palco>*+*{margin-top:12px}
.fig-texto .fig-palco p,.fig-texto .fig-palco li{font-size:17px;line-height:1.6}
.fig-texto .fig-palco .passos,.fig-texto .fig-palco .pontos{margin-top:12px}
.texto h3{margin-top:40px;font:500 22px/1.25 var(--display);letter-spacing:-.01em;text-wrap:balance;scroll-margin-top:104px}
.texto h3+p{margin-top:12px}
.texto blockquote{margin-top:24px;padding-left:20px;border-left:3px solid var(--signal-soft)}
.texto blockquote p{font-size:18px;line-height:1.7;color:var(--muted-fg)}
.texto>.passos,.texto>.pontos{margin-top:20px}
.previa-faixa{position:relative;z-index:40;margin-top:72px;padding:12px 16px;text-align:center;font-size:14px;background:var(--warning-soft);color:var(--fg)}
.previa-faixa~main .art{padding-top:72px}
.ar-vazio{margin-top:48px;padding:64px 24px;border-radius:24px;background:var(--card);box-shadow:var(--raised);display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;color:var(--muted-fg)}
.ar-vazio .sel{width:40px;height:40px}
.ar-cab p a{color:var(--signal)}
@media (max-width:959px){
  .ar-abas a{font-size:14px;line-height:34px;padding:0 14px;flex:none}
  .leia .grade{grid-template-columns:1fr;gap:48px;margin-top:20px}
  .fig-texto .fig-palco{padding:18px 16px}
  .fig-texto .fig-palco p,.fig-texto .fig-palco li{font-size:16px}
  .texto h3{font-size:20px}
  .previa-faixa{margin-top:60px}
  .previa-faixa~main .art{padding-top:16px}
}