/* Cleiton Avi · camada "sys" dos protótipos: revisão aplicada a todas as páginas.
   Carrega depois do CSS das páginas que vêm antes dela no protótipo (ver functions.php). */

/* ---- sys ---- */

/* Camada comum: aplicada a todas as páginas na revisão. Escala única de títulos e seções, links, botões, ícones e movimento. */
:root{--sec-y:clamp(88px,10vw,144px);--sec-y-sm:clamp(56px,7vw,96px);--hdr-h:73px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.ic{display:inline-block;vertical-align:-.15em;flex:none;transition:transform .45s var(--ease-soft)}

/* Header e rodapé */
.hdr .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.hdr .logo{justify-self:start}
.hdr .btn,.hdr .hdr-sp{justify-self:end}
.nav a{position:relative;padding-block:4px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-soft)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{color:var(--text)}
@media (max-width:860px){.hdr .wrap{grid-template-columns:1fr auto}}
.ftr .logo{color:var(--text)}
.ftr .soc a{display:inline-flex;align-items:center;gap:8px}

/* Links e botões */
.link{border-bottom:0;padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease-soft),color .2s var(--ease)}
.link:hover{background-size:0 1px;background-position:100% 100%;border-color:transparent}
.link:hover .ic,.btn:hover .ic,.cta-xl:hover .ic,a:hover > .ic{transform:translateX(4px)}
.link:hover .ic-down{transform:translateY(3px)}
.btn{gap:10px;transition:background .15s var(--ease),transform .2s var(--ease)}
.btn:active,.cta-xl:active{transform:scale(.98)}
.btn .ic{width:16px;height:16px}
.totop{gap:8px}
.totop:hover .ic{transform:translateY(-3px)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--teal-500);outline-offset:3px}

/* Escala de títulos */
.w-hero h1,.b-hero h1,.a-name h1,.c-hero h1{font-size:clamp(56px,10vw,168px);line-height:.88;letter-spacing:-.055em}
.sec-head h2,.method .m-side h2,.q-side h2,.faq-side h2,.a-path h2,.a-values h2,.related h2,.w-grid ~ h2{font-size:clamp(34px,4vw,56px);line-height:1;letter-spacing:-.04em}
.meta{font-size:15px}

/* Ritmo vertical das seções */
.articles,.quotes,.faq,.a-path,.a-values,.a-rec,.a-off,.related,.method{padding-block:var(--sec-y)}
.method{margin-top:var(--sec-y)}
.c-intro,.chap,.read{padding-block:var(--sec-y-sm)}
.w-hero,.b-hero,.c-hero,.a-hero,.p-hero{padding-top:clamp(56px,8vw,112px)}
.w-body{padding-bottom:var(--sec-y)}
.close{padding-block:var(--sec-y-sm)}

/* Micro-interações */
.img{transition:filter .4s var(--ease)}
.mv .img.rise{clip-path:inset(0 0 12% 0);transition:clip-path 1.2s var(--ease-soft),transform 1.4s var(--ease-soft)}
.mv .img.rise.in{clip-path:inset(0 0 0 0)}
.work .cover,.lead .cover,.acard .img,.feat .img{transition:filter .4s var(--ease)}
.work:hover .cover,.lead a:hover .cover,.acard:hover .img,.feat:hover .img{filter:brightness(1.08)}
.row .go,.irow .i-go,.rec .go{display:inline-flex}
.q-ctrl button:hover .ic{transform:none}
.q-ctrl button:active,.opt:active,.snav button:active{transform:scale(.98)}
.page-in{animation:pageIn .9s var(--ease-soft) both}
@keyframes pageIn{from{opacity:.001}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.page-in{animation:none}.mv .img.rise{clip-path:none}}

/* Menu móvel */
.mtog{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:1px solid var(--border);color:var(--text);cursor:pointer;justify-self:end}
.mtog .i-close{display:none}
.menu-open .mtog .i-open{display:none}.menu-open .mtog .i-close{display:inline-flex}
.mmenu{position:fixed;inset:0;z-index:40;background:var(--ink-950,#0B0B0B);padding:120px 20px 32px;display:flex;flex-direction:column;justify-content:space-between;opacity:0;visibility:hidden;transition:opacity .35s var(--ease-soft),visibility 0s .35s}
.menu-open .mmenu{opacity:1;visibility:visible;transition:opacity .35s var(--ease-soft)}
.mmenu nav{display:flex;flex-direction:column}
.mmenu nav a{font-size:40px;letter-spacing:-.04em;line-height:1.15;padding-block:6px;border-bottom:1px solid var(--border);color:var(--text);transform:translateY(12px);opacity:0;transition:transform .5s var(--ease-soft),opacity .5s var(--ease-soft)}
.menu-open .mmenu nav a{transform:none;opacity:1}
.menu-open .mmenu nav a:nth-child(2){transition-delay:.04s}.menu-open .mmenu nav a:nth-child(3){transition-delay:.08s}.menu-open .mmenu nav a:nth-child(4){transition-delay:.12s}.menu-open .mmenu nav a:nth-child(5){transition-delay:.16s}
.mmenu nav a[aria-current="page"]{color:var(--state,#FF5215)}
.mmenu .btn{justify-content:space-between;width:100%}
.menu-open{overflow:hidden}
.hdr{z-index:50}
@media (max-width:860px){.hdr .nav,.hdr > .wrap > .btn,.hdr .hdr-sp{display:none}.mtog{display:inline-flex}.proto .wrap > span:last-child{display:none}}
@media (min-width:861px){.mmenu{display:none}}
.close-row{align-items:center;padding-top:0;border-top:0}

/* ---- v10 ---- */

/* Idioma */
.hdr-r{display:flex;align-items:center;gap:20px;justify-self:end}
.lang{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-meta);font-size:14px;letter-spacing:.03em;color:var(--ink-600)}
.lang button,.lang a{all:unset;cursor:pointer;padding:6px 2px;color:var(--muted);transition:color .2s var(--ease)}
.lang button[aria-pressed="true"],.lang a[aria-current]{color:var(--text)}
.lang button:hover,.lang a:hover{color:var(--text)}
.lang button:focus-visible,.lang a:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px}
@media (max-width:860px){.hdr .wrap{grid-template-columns:1fr auto auto;column-gap:16px}.hdr-r .btn{display:none}}
.toast{position:fixed;left:50%;top:92px;z-index:90;transform:translate(-50%,-8px);background:var(--ink-100);color:var(--ink-950);font-size:14px;padding:10px 14px;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .35s var(--ease-soft)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* Rodapé: links legais */
.ftr .legal{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;font-size:13px;margin-top:-12px}
.ftr .legal a,.ftr .legal button{all:unset;cursor:pointer;color:var(--muted);transition:color .2s var(--ease)}
.ftr .legal a:hover,.ftr .legal button:hover{color:var(--text)}
.ftr .legal a:focus-visible,.ftr .legal button:focus-visible{outline:2px solid var(--teal-500);outline-offset:3px}
/* Rodapé no mobile: tudo centralizado, rótulo em cima e itens embaixo */
@media (max-width:860px){
  .ftr .grid{justify-items:center;text-align:center}
  .ftr .logo,.ftr nav,.ftr .soc,.ftr .loc{grid-column:1/-1;justify-self:center;text-align:center}
  .ftr .logo{width:88px}
  .ftr nav,.ftr .soc{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px 20px}
  .ftr nav > .meta,.ftr .soc > .meta{flex-basis:100%;margin-bottom:2px}
  .ftr .bottom{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:14px}
  .ftr .bottom > :last-child{justify-self:center}
  .ftr .legal{justify-content:center;margin-top:0}
}

/* Cookies: mesmo desenho da LP */
.ck{position:fixed;left:24px;bottom:24px;z-index:80;width:min(400px,calc(100vw - 48px));background:var(--ink-900);border:1px solid var(--ink-600);border-bottom:2px solid var(--accent);color:var(--ink-100);font-size:15px;line-height:1.5;animation:ckIn .6s var(--ease-soft)}
.ck[hidden]{display:none}
@keyframes ckIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ck .cx{position:absolute;width:13px;height:13px;background:linear-gradient(var(--ink-400),var(--ink-400)) 50% 0/1px 100% no-repeat,linear-gradient(var(--ink-400),var(--ink-400)) 0 50%/100% 1px no-repeat;pointer-events:none}
.ck .tl{left:-7px;top:-7px}.ck .tr{right:-7px;top:-7px}.ck .bl{left:-7px;bottom:-8px}.ck .br{right:-7px;bottom:-8px}
.ck-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding:18px 20px}
.ck-bar p{margin:0;color:var(--ink-300)}
.ck-bar b{color:var(--ink-100);font-weight:500}
.ck a,.ck-lnk{all:unset;cursor:pointer;color:var(--ink-100);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-500);transition:color .2s var(--ease)}
.ck a:hover,.ck-lnk:hover{color:var(--teal-500)}
.ck .btn{border:0;font:inherit;font-weight:500;cursor:pointer}
.ck-ok{padding:12px 20px}
.ck-pref{padding:16px 20px 20px}
.ck-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ck-head .meta{font-size:14px;color:var(--ink-400)}
.ck-head i{font-style:normal;color:var(--accent);margin-right:4px}
.ck-x{all:unset;cursor:pointer;display:grid;place-items:center;width:32px;height:32px;margin-right:-6px;color:var(--ink-100);transition:transform .3s var(--ease-soft)}
.ck-x:hover{transform:rotate(90deg)}
.ck-rows{border:1px solid var(--ink-700)}
.ck-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 14px;border-bottom:1px solid var(--ink-700)}
.ck-row:last-child{border-bottom:0}
.ck-row b{display:block;font-weight:500;font-size:16px;color:var(--ink-100)}
.ck-row .meta{font-size:12px;color:var(--ink-400)}
.ck-always{color:var(--teal-500)!important}
.sw{all:unset;cursor:pointer;position:relative;width:34px;height:18px;border:1px solid var(--ink-500);flex:none;transition:background .2s var(--ease),border-color .2s var(--ease)}
.sw i{position:absolute;top:2px;left:2px;width:12px;height:12px;background:var(--ink-500);transition:transform .3s var(--ease-soft),background .2s var(--ease)}
.sw[aria-checked="true"]{background:var(--teal-500);border-color:var(--teal-500)}
.sw[aria-checked="true"] i{transform:translateX(16px);background:var(--ink-950)}
.sw:focus-visible,.ck-x:focus-visible,.ck-lnk:focus-visible{outline:2px solid var(--teal-500);outline-offset:3px}
.ck-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px}
.ck-foot .btn{padding:12px 20px}
.ck-pol{font-size:14px;color:var(--ink-300)!important}
@media (max-width:600px){.ck{left:16px;right:16px;bottom:16px;width:auto}.ck-bar{gap:16px}}
@media (prefers-reduced-motion:reduce){.ck{animation:none}}

/* ---- lista mobile ---- */

/* Lista (Trabalho e Artigos) no mobile: número e ano na primeira linha, título na largura toda */
@media (max-width:860px){
  .irow{grid-template-columns:minmax(0,1fr) auto!important;row-gap:8px}
  .irow .i-n{grid-column:1;grid-row:1}
  .irow .i-y{grid-column:2;grid-row:1;justify-self:end}
  .irow .i-t{grid-column:1/-1;grid-row:2}
  .irow .i-s{grid-column:1/-1;grid-row:3;font-size:14px}
  .irow .i-go{display:none!important}
}