
:root{
  
  --fs-page:clamp(28px,4.4vw,38px);   
  --fs-sec:clamp(21px,2.1vw,24px);    
  --fs-item:16.5px;                   
  --fs-body:16px;                     
  --fs-small:14.5px;                  
  --fs-meta:13px;                     
  --fs-kicker:12px;                   
  --lh-body:1.5; --lh-head:1.22; --lh-item:1.32;
  --track-kicker:.09em;
  
  --sp-side:20px; --sp-card:14px; --sp-sec:36px; --sp-row:12px;
  --measure:70ch;
  
  --link:var(--accent);
  --link-line:color-mix(in srgb,var(--accent) 38%,transparent);
  --press:color-mix(in srgb,var(--ink) 7%,transparent);
  --hover-bg:color-mix(in srgb,var(--accent) 6%,transparent);
  --sec-bar:var(--accent);
}
@media (max-width:900px){:root{--sp-side:16px;--sp-card:12px;--sp-sec:30px;--fs-item:16.5px}}


body{font-size:var(--fs-body);line-height:var(--lh-body)}
.grid>*,.front>*,.arch>*{min-width:0}


a.lk,.pn a,.active-f a,.md a[href]{color:var(--link);text-decoration:underline;text-decoration-color:var(--link-line);text-decoration-thickness:1px;text-underline-offset:3px}
a.lk:hover,a.lk:focus-visible,.pn a:hover,.md a[href]:hover{text-decoration-color:currentColor;text-decoration-thickness:2px}
.card-h .more,a.more{color:var(--link);font-weight:600;font-size:var(--fs-meta)}
.card-h .more:hover,.card-h .more:focus-visible{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}


.phead h1,.hero h1,.colhead h1,.detail h1{font-size:var(--fs-page);line-height:1.12;font-weight:700;letter-spacing:-.015em}
.phead p,.hero p{font-size:var(--fs-small);color:var(--ink2);max-width:var(--measure)}
.hero .day,.mast .ed{font-size:var(--fs-kicker);letter-spacing:var(--track-kicker)}


.sec,.section{position:relative;border-top:1px solid var(--line2);padding-top:14px;margin:var(--sp-sec) 0 14px;gap:4px 12px}
.sec::before,.section::before{content:"";position:absolute;left:0;top:-2px;width:44px;height:3px;border-radius:2px;background:var(--sec-bar)}
.sec h2,.section h2,.card-h h2,.sec.thin h2{font-family:var(--serif);font-size:var(--fs-sec);font-weight:700;line-height:var(--lh-head);letter-spacing:-.012em;color:var(--ink)}
.sec .muted,.section .muted{font-size:var(--fs-meta)}
.sec.thin{border-top-width:1px;margin-top:var(--sp-sec)}

.card:has(>.card-h>h2){position:relative}
.card:has(>.card-h>h2)::before{content:"";position:absolute;left:18px;top:-1px;width:44px;height:3px;border-radius:0 0 2px 2px;background:var(--sec-bar)}
.card-h:has(>h2){padding:4px 0 10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.card-h h3{font:650 var(--fs-item)/var(--lh-item) var(--sans);letter-spacing:0}


.kicker{font-size:var(--fs-kicker);letter-spacing:var(--track-kicker);font-weight:700;text-transform:uppercase;color:var(--accent)}
.gh,.cgroup{font-size:var(--fs-kicker);letter-spacing:var(--track-kicker);font-weight:700;text-transform:uppercase;color:var(--ink2);margin:22px 0 6px}
.gh .cnt{color:var(--ink3);font-weight:600;letter-spacing:0}
.cgroup{color:var(--c)}
.flabel{font-size:11.5px;letter-spacing:.07em}


.it .ttl,.ev .ttl,.also a b,.colc h3,.blk a.t,.slot .x b,.nl h3,.idea h3,.prow b,.camp-it .ct,.pcard h3,.step .t,.bpo-h h3,.lead .sub-t{
  font-family:var(--sans)!important;font-weight:650;font-size:var(--fs-item);line-height:var(--lh-item);letter-spacing:-.003em;color:var(--ink)}
.idea h3{font-size:17.5px!important}
.pcard h3{font-size:17.5px}
.it .ttl .code{font-size:11.5px;vertical-align:1px;margin-right:2px}


.it .note,.tl .ev .tx,.blk .pv,.nl .why,.sum p,.camp-it .note,.colc .role{font-size:var(--fs-small);line-height:1.5;color:var(--ink2)}
.ev .tx,.nl .ins,.md,.lead .dek,.colhead .why{max-width:var(--measure)}
.it .meta,.ev .meta,.meta,.lead .by,.prow .m,.colc .act,.stat .h,.tl-date .w{font-size:var(--fs-meta);color:var(--ink3)}
.it .meta{gap:6px 8px;margin-top:6px}
.it .when .d{font:650 14px/1.2 var(--sans);color:var(--ink)}
.it .when .r{font-size:12px}
small,.muted{color:var(--ink3)}

.blk .pv b,.pv-box b,.ev .tx .biz b{color:var(--ink);font-weight:700}


.pill{font-size:12px;line-height:1.55;padding:1px 9px}
.rel{font-size:12.5px;color:var(--link);border-color:color-mix(in srgb,var(--accent) 28%,var(--line2));padding:2px 9px;border-radius:8px;position:relative;z-index:2}
.rel .k{color:var(--ink3)}
.rel:hover,.rel:focus-visible{border-color:var(--accent);background:var(--hover-bg)}
.tag,.tchip{position:relative;z-index:2}



.drill-chev,.it:has(>.body>a.ttl)::after,.tl-ev:has(.x>a.lk:first-child)::after,.slot[href]::after,.blk .bi::after,.also a::after,.colc::after,.stat[href]::after{
  content:"›";flex:none;align-self:center;color:var(--link);font:400 24px/1 var(--sans);margin-left:2px;opacity:.85}

.it:has(>.body>a.ttl){position:relative;margin:0 -10px;padding:var(--sp-row) 10px;border-radius:10px;-webkit-tap-highlight-color:transparent;transition:background .12s}
.it:has(>.body>a.ttl)>.body>a.ttl::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.it:has(>.body>a.ttl) a:not(.ttl),.it:has(>.body>a.ttl) button,.it:has(>.body>a.ttl) .meta .pill[title]{position:relative;z-index:2}
.it:has(>.body>a.ttl):hover{background:var(--hover-bg)}
.it:has(>.body>a.ttl):hover>.body>a.ttl{color:var(--link)}
.it:has(>.body>a.ttl):active{background:var(--press)}
.it:has(>.body>a.ttl):focus-within{background:var(--hover-bg)}
.list>.it+.it{border-top:1px solid var(--line)}
.it:not(:has(>.body>a.ttl)){padding:var(--sp-row) 2px}
.it .ttl{display:block}

.tl-ev:has(.x>a.lk:first-child){position:relative;align-items:center;margin:0 -8px;padding:8px 8px;border-radius:10px;-webkit-tap-highlight-color:transparent}
.tl-ev .x>a.lk:first-child{color:var(--ink);font-weight:600;text-decoration:none}
.tl-ev .x>a.lk:first-child::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.tl-ev:has(.x>a.lk:first-child):hover{background:var(--hover-bg)}
.tl-ev:has(.x>a.lk:first-child):hover .x>a.lk:first-child{color:var(--link)}
.tl-ev:has(.x>a.lk:first-child):active{background:var(--press)}
.tl-ev .ty{font-size:11px;letter-spacing:.07em}

.stat[href]{position:relative;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent}
.stat[href]::after{position:absolute;right:12px;top:12px;font-size:22px}
.stat[href]:active,.pcard:active,.colc:active,.slot[href]:active,a.card:active{transform:scale(.985);background:var(--press)}
.pcard{position:relative;-webkit-tap-highlight-color:transparent}
.pcard::after{content:"Abrir →";display:block;margin-top:10px;font:600 var(--fs-meta) var(--sans);color:var(--link)}
.pcard:hover::after{text-decoration:underline;text-underline-offset:3px}
.colc{position:relative;-webkit-tap-highlight-color:transparent}
.colc::after{position:absolute;right:12px;top:12px}
.colc .hd{padding-right:18px}
.slot[href]{align-items:center;-webkit-tap-highlight-color:transparent}
.slot[href]:hover .x b{color:var(--link)}

.also a{display:flex!important;align-items:center;gap:8px;-webkit-tap-highlight-color:transparent;border-radius:8px}
.also a>span.al{flex:1;min-width:0}
.also a:active{background:var(--press)}
.also a:hover b{color:var(--link)}

.blk .bi{position:relative;display:flex;align-items:center;gap:8px;margin:0 -8px;padding:8px;border-radius:10px;-webkit-tap-highlight-color:transparent}
.blk .bi>div{flex:1;min-width:0}
.blk .bi a.t{padding:0;display:block}
.blk .bi a.t::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.blk .bi:hover{background:var(--hover-bg)} .blk .bi:hover a.t{color:var(--link)}
.blk .bi:active{background:var(--press)}
.blk .bi .pv{margin:3px 0 0}
.blk .bi a:not(.t){position:relative;z-index:2}

.ev a.ttl{text-decoration:none}
.ev a.ttl:hover,.ev a.ttl:focus-visible{color:var(--ink);text-decoration:underline;text-decoration-color:var(--link);text-underline-offset:3px}
.ev .ttl .ext{display:inline-block;font:600 12px var(--sans);color:var(--link);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line2));border-radius:7px;padding:0 6px;margin-left:6px;vertical-align:2px;white-space:nowrap}
.lead h2 a{text-decoration:none}
.lead h2 a:hover,.lead h2 a:focus-visible{color:var(--ink);text-decoration:underline;text-decoration-color:var(--link);text-decoration-thickness:2px;text-underline-offset:4px}

.btn{font-size:13.5px;padding:7px 13px;border-radius:10px}
a.btn:not(.pri){color:var(--link);border-color:color-mix(in srgb,var(--accent) 35%,var(--line2))}
a.btn:active,button.btn:active{transform:scale(.98)}


.clamp3:not(.open){display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vermais{position:relative;z-index:3;display:inline-block;margin:2px 0 4px;padding:2px 0;border:0;background:none;font:600 var(--fs-meta) var(--sans);color:var(--link);cursor:pointer;text-decoration:underline;text-decoration-color:var(--link-line);text-underline-offset:3px}
.vermais:hover{text-decoration-color:currentColor}


@media (max-width:900px){
  .wrap{padding-left:var(--sp-side);padding-right:var(--sp-side)}
  .mwrap{padding-left:var(--sp-side);padding-right:var(--sp-side)}
  .top-in{padding-left:var(--sp-side);padding-right:var(--sp-side)}
  .grid{row-gap:var(--sp-card)}
  .grid>section.card,.grid>.card{margin-top:calc(var(--sp-sec) - var(--sp-card))}
  .grid>.card:first-child{margin-top:0}
  .card{padding:16px}
  .card:has(>.card-h>h2)::before{left:16px}
  .stats,.stats4{gap:10px}
  .tl-date .d{font-size:16px}
  .it .when{min-width:0;max-width:34%}
}
@media (max-width:600px){
  .it:has(>.body>a.ttl){margin:0 -8px;padding-left:8px;padding-right:6px}
  .it{gap:10px}
  .it .when{text-align:right}
  .card-h .more{margin-left:0}
}

@media (max-width:600px){
  .tl-ev:has(.x>a.lk:first-child){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;row-gap:1px}
  .tl-ev:has(.x>a.lk:first-child) .ty{grid-column:1;min-width:0;padding-top:0}
  .tl-ev:has(.x>a.lk:first-child) .x{grid-column:1}
  .tl-ev:has(.x>a.lk:first-child)::after{grid-column:2;grid-row:1/span 2}
}

.tl-date .r,.slot .h{color:var(--ink2)}
.tl-date .r{font-weight:700}
.tl-ev .x>a.lk:first-child{font-size:15.5px;line-height:1.35}

@media (max-width:600px){
  .it{display:grid;grid-template-columns:4px minmax(0,1fr) auto;grid-template-areas:"bar when chev" "bar body chev";column-gap:10px;row-gap:0;align-items:start}
  .it>.bar{grid-area:bar;height:100%}
  .it>.body{grid-area:body}
  .it>.when{grid-area:when;text-align:left;max-width:none;min-width:0;display:flex;flex-wrap:wrap;gap:0 6px;align-items:baseline;margin-bottom:2px}
  .it>.when:empty{display:none}
  .it>.when .d{font:700 13px/1.3 var(--sans)!important;color:var(--ink)}
  .it>.when .r{font-size:12.5px}
  .it>.when .r::before{content:"· ";color:var(--ink3)}
  .it>.when .r:first-child::before{content:""}
  .it:has(>.body>a.ttl)::after{grid-area:chev;align-self:center}
  .it:not(:has(>.when)){grid-template-areas:"bar body chev" "bar body chev"}
}

.tl-day>*{min-width:0}
@media (max-width:600px){
  .tl-day:has(.ev){grid-template-columns:minmax(0,1fr);gap:4px}
  .tl-day:has(.ev) .tl-date{display:flex;gap:8px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:4px}
  .tl-day:has(.ev) .tl-date .d{font-size:17px}
}
.colc .last b{font:600 14px/1.35 var(--sans)}
.colc .last .d{color:var(--ink3)}

.sum>h3{font:700 var(--fs-sec)/var(--lh-head) var(--serif);letter-spacing:-.012em;color:var(--ink);margin:4px 0 10px}
.sum li b{font:650 15.5px/1.35 var(--sans);color:var(--ink)}
.sum .gh{margin-top:22px}
@media (max-width:900px){
  .front>*+*{position:relative;margin-top:calc(var(--sp-sec) - 8px);padding-top:16px!important;border-top:1px solid var(--line2)!important}
  .front>*+*::before{content:"";position:absolute;left:0;top:-2px;width:44px;height:3px;border-radius:2px;background:var(--sec-bar)}
}

.ev p.tx{font-size:var(--fs-body);line-height:1.55;color:var(--ink)}
.card>.gh:first-child,.card>:first-child>.gh:first-child{margin-top:2px}



.fgrp{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:100%}
@media (min-width:700px) and (max-width:900px){
  
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stats4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat[href]::after{right:10px;top:10px}
  .hero{align-items:flex-start}
}
@media (min-width:901px) and (max-width:1279px){
  
  .wrap{grid-template-columns:200px minmax(0,1fr);gap:22px}
  .wrap .c8,.wrap .c7,.wrap .c5{grid-column:span 12}
  .wrap .c4{grid-column:span 6}
}
