/* chrome-hub.css: o encaixe do Hub na veste do site novo, compartilhado pela
   /hub e pelas paginas de app (/marvin, ...). Depende do site.css (a pagina)
   e do /site/institucional/chrome.css (a barra s2h e os botoes .v3-btn),
   nesta ordem; o que e de uma pagina so fica no arquivo dela (hub/home.css,
   marvin.css). Aqui moram: o painel "Apps inclusos" dentro da barra, o
   sufixo "Hub" depois do lockup, o atalho da Central de Ajuda, o painel de
   hero (.hero-fixo), o rodape um tom mais escuro e os pesos do site novo nos
   titulos. Promovido do hub/home.css (PR #462) quando a /marvin precisou do
   mesmo painel. */

/* ===== barra: o painel do Hub dentro da s2h =====
   O painel tem 1196px e se centra no que estiver em position:relative. No
   institucional isso e o .mm-item (painel estreito); aqui precisa ser a ilha,
   senao o painel nasce centrado no gatilho e vaza pela esquerda. */
.s2h-hub .s2h-links .mm-item{position:static}
/* O painel do Hub e escuro nos dois temas da barra: o cartao do Marvin e os
   icones das areas foram desenhados sobre navy. As regras de tema claro do
   chrome.css (fundo branco, links em tinta) nao valem para ele. O fundo quase
   solido e a mesma decisao do site.css (o texto da pagina atravessava o vidro). */
.s2h-hub .s2h-links .mm-h,.s2h-hub.is-light .s2h-links .mm-h{
  background:rgba(9,13,30,.995);border-color:rgba(255,255,255,.1);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
}
.s2h-hub .s2h-links .mm-h a,.s2h-hub.is-light .s2h-links .mm-h a{color:rgba(255,255,255,.82)}
.s2h-hub .s2h-links .mm-h a:hover,.s2h-hub.is-light .s2h-links .mm-h a:hover{color:#fff;background:rgba(255,255,255,.06)}
.s2h-hub.is-light .s2h-links .mm-h .mm-lbl{color:var(--muted)}
/* o cartao do Marvin e coluna e quebra linha; o chrome.css poe nowrap e gap
   em todo <a> do painel para as listas do institucional */
.s2h-hub .s2h-links .mm-h .mm-feat,.s2h-hub.is-light .s2h-links .mm-h .mm-feat{white-space:normal;gap:0;color:#fff}
.s2h-hub .s2h-links .mm-h .mm-feat:hover{background:
  radial-gradient(120% 90% at 12% 0%,rgba(122,160,255,.26),transparent 62%),
  linear-gradient(158deg,rgba(57,114,253,.28),rgba(57,114,253,.08) 60%,rgba(23,37,82,.22))}
/* os links soltos (Marvin, Planos, Duvidas) herdam do site.css uma opacidade
   de .75 pensada para a barra antiga; na s2h a cor ja vem com o alfa certo */
.s2h-hub .s2h-links .mm-link{opacity:1}

/* ===== "Hub" depois do lockup =====
   O logo da s2h e uma grade de uma celula (os dois lockups, claro e escuro,
   sobrepostos para o crossfade). O sufixo entra numa segunda coluna, ao lado.
   Palanquin light (a familia ja vem no Base), cor solida, alinhado pela base
   da palavra "Marvee" do lockup. */
.s2h-hub .s2h-island .logo{grid-auto-flow:column;column-gap:0;align-items:center}
.s2h-hub .s2h-sufixo{
  grid-column:2;grid-row:1;
  /* o SVG da palavra tem folga a direita; o sufixo recua para o vao ler como
     um espaco de palavra */
  margin-left:-5px;
  /* 24px: a caixa-alta da Palanquin (0,72 do corpo) fica com os 17,25px da
     palavra "Marvee" do SVG, medidos pela tinta */
  font-family:'Palanquin',sans-serif;font-weight:300;font-size:24px;line-height:1;
  letter-spacing:-.005em;color:#fff;
  /* a linha de base do texto caia 1px abaixo da base da palavra (medido com
     uma sonda inline na baseline contra a tinta do SVG) */
  transform:translateY(-1px);
  transition:color .35s var(--ease-soft);
}
.s2h-hub.is-light .s2h-sufixo{color:var(--light-tx)}

/* ===== atalho da Central de Ajuda =====
   Icone redondo entre os links e a CTA, no mesmo vocabulario dos links da
   barra (cor e hover pelas variaveis da s2h). No estreito some com os links e
   volta como item da gaveta (franquia-nav.js). */
.s2h-hub .s2h-help{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin-right:10px;border-radius:99px;
  color:var(--s2h-navtx);border:1px solid rgba(255,255,255,.14);
  transition:background .2s,color .2s,border-color var(--s2h-theme-ease);
}
.s2h-hub .s2h-help:hover{color:var(--s2h-navtxh);background:var(--s2h-navhov)}
.s2h-hub .s2h-help:focus-visible{outline:2px solid var(--s2h-navtxh);outline-offset:3px}
.s2h-hub .s2h-help svg{width:18px;height:18px}
.s2h-hub.is-light .s2h-help{border-color:rgba(16,24,40,.14)}
@media(max-width:1240px){.s2h-hub .s2h-help{display:none}}

/* ===== hero em painel (.hero-fixo) =====
   O molde e a hero da /lp-crm: o painel arredondado com respiro nos quatro
   lados, traco interno e a luz do app subindo do topo (.lp-hero-box do
   lp.css), sobre o navy do Hub. A pagina poe dentro dele o que e dela (a
   janela do Hub na /hub, a cena do Marvin na /marvin) e declara a cor da luz
   em --luz-mock (r,g,b) no proprio elemento.
   A barra s2h e fixa e nao ocupa fluxo: o padding-top do painel e o que
   afasta o titulo dela (inset + distancia ao topo + 72px da ilha + respiro). */
.hero-fixo{
  --hf-inset:clamp(6px,.9vw,12px);
  display:flex;flex-direction:column;
  margin:var(--hf-inset);
  min-height:calc(100svh - 2 * var(--hf-inset));
  padding-top:clamp(118px,13vw,148px);
  border-radius:clamp(20px,2.2vw,30px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 26px 60px -46px rgba(16,24,40,.5);
}
/* o painel e um degrau mais claro que o navy da pagina, com a luz do app
   subindo do topo: e a diferenca de tom que faz a caixa existir */
.hero-fixo::before{
  background:
    radial-gradient(140% 100% at 50% -30%,rgba(var(--luz-mock),.26),rgba(var(--luz-mock),.07) 55%,transparent 74%),
    linear-gradient(180deg,#101B4A,#0C1638 58%,#0A1330);
}
@media(max-width:820px){
  /* a ilha da barra baixa para 60px; o inset e o respiro acompanham */
  .hero-fixo{--hf-inset:6px;padding-top:calc(6px + 20px + 60px + 28px);min-height:0}
}

/* ===== rodape com os cantos arredondados =====
   O rodape compartilhado (SiteFooter.astro) ja tem 48px de raio no topo, mas
   na /hub ele nao aparecia: o fundo dele e o mesmo navy da pagina, entao a
   curva nao tem contra o que se desenhar. Aqui ele desce um tom e ganha um
   fio no topo, e o raio passa a ler como na home, onde a secao de cima e
   clara. O seletor com html[data-app] vence o do componente sem !important. */
html[data-app] body footer.mv-site-footer{
  background:#01030F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  margin-top:clamp(24px,3vw,40px);
}

/* ===== diagramacao: os pesos do site novo =====
   No site novo o titulo e leve (400) com tracking fechado, o subtitulo e o
   corpo sao 400, os h3 sao 500 e o que e rotulo ou botao fica em 600. O
   titulo de secao (.h2) vale para todas as paginas do Hub; o h1 de cada
   pagina fica no arquivo dela porque a anatomia da hero muda. */
.h2,.final h2{font-weight:400;letter-spacing:-.04em;line-height:1.12}
.h2 .hl-anim,.final h2 .hl-anim{font-weight:inherit}

/* A compact Marvin introduction, aligned with the card's text column. */
.s2h-hub .s2h-links .mm-h .mm-feat{align-items:flex-start;text-align:left}
.s2h-hub .s2h-links .mm-h .mm-feat .mm-ic{align-self:flex-start;display:grid;place-items:center;margin:0 0 16px;width:48px;height:48px;flex:none}
.s2h-hub .s2h-links .mm-h .mm-feat .mm-ic img{width:32px;height:32px;object-fit:contain;margin:0}
/* Keep the source label for the generated mobile menu. */
.s2h-hub .s2h-links .mm-h .mm-feat .mm-tx>b{display:none}
.s2h-hub .s2h-links .mm-h .mm-feat .mf-h{margin:0;font-size:18px;line-height:1.3;font-weight:600}
.s2h-hub .s2h-links .mm-h .mm-feat .mm-tx small{font-size:12px;line-height:1.5;margin-top:10px}
.s2h-hub .s2h-links .mm-h .mm-feat-go{align-self:flex-start;font-size:12px;margin-top:16px}