/* /hub — o ponto de partida do projeto: abertura com o raio 3D, os cards das páginas com
   prévia real e atalhos, e o bloco de como rodar. Página escura, sobre a grade da home. */

html:not(.is-ready):not(.is-shot) .hub-rv, html:not(.is-ready):not(.is-shot) .hub-card,
html:not(.is-ready):not(.is-shot) .hub-here, html:not(.is-ready):not(.is-shot) .hub-hero__stats{visibility:hidden}
body[data-page="hub"]{background:#0C0C0C; color:#fff}

/* raio 3D (js/brand/bolt.js): um canvas fixo, recortado por vista */
.br-bolt3d{position:fixed; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; display:block}
.hub-bolt-css{
  display:none; position:absolute; left:50%; top:50%; width:52%; height:62%; transform:translate(-50%,-50%);
  -webkit-mask:var(--bolt-mask) center/contain no-repeat; mask:var(--bolt-mask) center/contain no-repeat;
  background:linear-gradient(115deg,#4FA845 0%,#1A6B3D 20%,#fff 45%,#94F2CC 60%,#40D17A 80%,#4FA845 100%);
  background-size:300% 100%; animation:logo-holo 9s cubic-bezier(.45,0,.2,1) infinite;
}
html.no-bolt3d .hub-bolt-css{display:block}

/* ================================================================= ABERTURA */
#hub-hero{
  position:relative; z-index:2;
  min-height:calc(560 * var(--vhu));
  padding:calc(140 * var(--vhu)) var(--gutter) calc(40 * var(--vhu));
  display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u));
  overflow:clip;
}
#hub-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 50% 55% at 78% 40%, rgba(79,168,69,.18) 0%, rgba(79,168,69,0) 70%),
    radial-gradient(ellipse 40% 45% at 16% 30%, rgba(10,22,200,.22) 0%, rgba(10,22,200,0) 70%);
}
#hub-hero > *{position:relative}
.hub-hero__copy{grid-column:1 / span 3; align-self:start}
.hub-hero__label{font-size:calc(8 * var(--u)); color:#8A8A8A; margin-bottom:calc(24 * var(--vhu))}
.hub-hero__title{font-size:calc(58 * var(--u)); line-height:calc(62 * var(--vhu)); color:#fff}
.hub-hero__title .ln{display:block; width:fit-content}
.hub-hero__title .dim{color:#555}
.hub-hero__lead{margin-top:calc(30 * var(--vhu)); width:calc(500 * var(--u)); font-size:calc(13 * var(--u)); line-height:calc(17.4 * var(--vhu)); color:#C2C2C2}
.hub-hero__stats{
  margin-top:calc(34 * var(--vhu)); display:flex; flex-wrap:wrap; gap:calc(14 * var(--vhu)) calc(26 * var(--u));
  padding-top:calc(16 * var(--vhu)); border-top:1px solid #262626;
}
.hub-hero__stats li{display:flex; flex-direction:column; gap:calc(5 * var(--vhu))}
.hub-hero__stats b{font-family:var(--font-display); font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght); font-weight:normal; font-size:calc(24 * var(--u)); line-height:1; color:#fff}
.hub-hero__stats span{font-family:var(--font-mono); font-size:calc(7 * var(--u)); letter-spacing:.1em; text-transform:uppercase; color:#8A8A8A}
.hub-hero__bolt{grid-column:4; align-self:start; justify-self:end; position:relative; width:calc(300 * var(--u)); height:calc(340 * var(--vhu)); margin-top:calc(-40 * var(--vhu)); cursor:grab}
.hub-hero__bolt.is-dragging{cursor:grabbing}

/* ================================================================= AS PÁGINAS */
#hub-pages{position:relative; z-index:3; padding:calc(40 * var(--vhu)) var(--gutter) calc(96 * var(--vhu))}
.hub-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:calc(56 * var(--vhu)) calc(16 * var(--u))}
.hub-card{display:flex; flex-direction:column; gap:calc(16 * var(--vhu)); min-width:0}
.hub-card__prev{
  position:relative; display:block; aspect-ratio:1224/701; overflow:hidden;
  border:1px solid #262626; background:#111;
  transition:border-color .3s ease;
}
.hub-card__prev img{width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.82) saturate(.9); transform:scale(1); transition:filter .45s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.hub-card:hover .hub-card__prev{border-color:#fff}
.hub-card:hover .hub-card__prev img{filter:brightness(1) saturate(1); transform:scale(1.025)}
.hub-card__open{
  position:absolute; right:calc(12 * var(--u)); bottom:calc(12 * var(--vhu));
  display:inline-flex; align-items:center; height:calc(26 * var(--vhu)); padding:0 calc(12 * var(--u));
  background:#fff; color:#0C0C0C; font-size:calc(7.5 * var(--u));
  opacity:0; transform:translateY(calc(6 * var(--vhu))); transition:opacity .3s ease, transform .3s ease;
}
.hub-card:hover .hub-card__open{opacity:1; transform:translateY(0)}
.hub-card__meta{display:grid; grid-template-columns:calc(36 * var(--u)) 1fr auto; column-gap:calc(12 * var(--u)); align-items:start}
.hub-card__n{font-size:calc(9.5 * var(--u)); color:#555; padding-top:calc(4 * var(--vhu)); transition:color .3s ease}
.hub-card:hover .hub-card__n{color:#fff}
.hub-card__rota{display:block; font-size:calc(7.5 * var(--u)); color:#8F9BFF; margin-bottom:calc(6 * var(--vhu))}
.hub-card__t{font-size:calc(26 * var(--u)); line-height:calc(28 * var(--vhu)); color:#fff}
.hub-card__t a{color:inherit}
.hub-card__sub{margin-top:calc(5 * var(--vhu)); font-size:calc(11.5 * var(--u)); color:#8A8A8A}
.hub-chip{
  display:inline-flex; align-items:center; gap:calc(6 * var(--u)); line-height:1;
  font-family:var(--font-mono); font-size:calc(7 * var(--u)); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:#9A9A9A; white-space:nowrap; margin-top:calc(6 * var(--vhu));
}
.hub-chip::before{content:''; flex:none; width:calc(5 * var(--u)); height:calc(5 * var(--u)); background:currentColor}
.hub-chip--ciclo{color:#94F2CC}
.hub-chip--prop{color:#8F9BFF}
.hub-chip--cortesia{color:#F2C94C}
.hub-chip--partida{color:#fff}
.hub-card__desc{font-size:calc(12 * var(--u)); line-height:calc(15.5 * var(--vhu)); color:#C2C2C2; max-width:calc(540 * var(--u))}
.hub-card__links{display:flex; flex-wrap:wrap; align-items:center; gap:calc(8 * var(--vhu)) 0; padding-top:calc(12 * var(--vhu)); border-top:1px solid #262626}
.hub-card__links .lbl{font-size:calc(7 * var(--u)); color:#6E6E6E; margin-right:calc(14 * var(--u))}
.hub-card__links a{
  display:inline-flex; align-items:center; padding:0 calc(12 * var(--u)); border-left:1px solid #333;
  font-size:calc(10 * var(--u)); line-height:calc(13 * var(--vhu)); color:#C2C2C2; white-space:nowrap;
  transition:color .25s ease;
}
.hub-card__links a:first-of-type{padding-left:0; border-left:0}
.hub-card__links a:hover{color:#fff; text-decoration:underline; text-underline-offset:.2em}
.hub-card__resolve{font-size:calc(11 * var(--u)); line-height:calc(15 * var(--vhu)); color:#fff}
.hub-card__resolve .lbl{display:block; margin-bottom:calc(4 * var(--vhu)); font-size:calc(7.5 * var(--u)); color:#8A8A8A}

/* a faixa "você está aqui" */
.hub-here{
  margin-top:calc(56 * var(--vhu));
  display:grid; grid-template-columns:calc(36 * var(--u)) calc(232 * var(--u)) 1fr auto; column-gap:calc(12 * var(--u)); align-items:center;
  padding:calc(22 * var(--vhu)) 0; border-top:1px solid #262626; border-bottom:1px solid #262626;
}
.hub-here .n{font-size:calc(9.5 * var(--u)); color:#555}
.hub-here .t{font-size:calc(22 * var(--u)); color:#fff}
.hub-here .t small{display:block; margin-top:calc(4 * var(--vhu)); font-family:var(--font-mono); font-size:calc(7.5 * var(--u)); letter-spacing:.1em; color:#8F9BFF}
.hub-here .d{font-size:calc(11.5 * var(--u)); line-height:calc(14.5 * var(--vhu)); color:#8A8A8A; max-width:calc(420 * var(--u))}
.hub-here .d code{font-family:var(--font-mono); font-size:calc(9.5 * var(--u)); color:#C2C2C2}

/* ================================================================= ORDEM DE LEITURA */
#hub-ordem{position:relative; z-index:3; padding:calc(20 * var(--vhu)) var(--gutter) calc(96 * var(--vhu))}
.hub-ordem__t{font-size:calc(7.5 * var(--u)); color:#8A8A8A; padding-bottom:calc(10 * var(--vhu)); border-bottom:1px solid #fff}
.hub-ordem__list li{display:grid; grid-template-columns:calc(48 * var(--u)) 1fr; column-gap:calc(12 * var(--u)); padding:calc(16 * var(--vhu)) 0; border-bottom:1px solid #262626}
.hub-ordem__list li .i{font-size:calc(22 * var(--u)); color:#3A3A3A; line-height:1}
.hub-ordem__list li .t{display:block; font-size:calc(18 * var(--u)); color:#fff; text-decoration:none}
.hub-ordem__list li .t:hover{color:#94F2CC}
.hub-ordem__list li .d{display:block; margin-top:calc(4 * var(--vhu)); font-size:calc(10.5 * var(--u)); line-height:calc(13.5 * var(--vhu)); color:#8A8A8A}

.hub-foot{
  display:flex; justify-content:space-between; gap:calc(16 * var(--u));
  padding:calc(18 * var(--vhu)) var(--gutter); border-top:1px solid #262626;
  font-size:calc(7 * var(--u)); color:#6E6E6E;
}