/* Kit de blocos do celular. Um vocabulário para as cinco páginas de fluxo: quem corrige
   legibilidade corrige aqui e vale nas cinco.

   O princípio é um só: UMA COLUNA, UM BLOCO POR VEZ, RITMO VERTICAL GENEROSO. O que no desktop
   é grade, trilho ou tabela vira sequência. A alternância claro/escuro entre seções fica — é
   ela que dá o pulso da página, e no celular é de graça.

   As classes correspondem um a um aos construtores de js/m/kit.js. */

/* ═══════════════════════════════════════════════════════ cabeçalho */
.m-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:var(--m-barra);
  padding:0 var(--m-recuo);
  background:var(--bg-dark);color:#fff;
  transition:transform .22s ease, background .22s ease, color .22s ease;
}
.m-header[data-tema="light"]{background:#fff;color:var(--c-ink);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.m-header[data-oculto="1"]{transform:translateY(-100%)}
.m-header .logo,
.m-header .menu-btn,
.m-header .pill{min-height:var(--m-toque);display:inline-flex;align-items:center;gap:8px}
.m-header .pill{border:1px solid currentColor;padding:0 16px;font-size:11px}
.m-header .logo__bolt{
  width:14px;height:17px;background:currentColor;
  -webkit-mask:var(--bolt-mask) center/contain no-repeat;
  mask:var(--bolt-mask) center/contain no-repeat;
}
.m-header .logo__stack{display:flex;flex-direction:column;align-items:flex-start;line-height:1;gap:2px}
.m-header .logo__word{
  /* mesmo wordmark oficial do desktop, como máscara: a cor segue o tema do cabeçalho */
  display:block;width:50px;height:17px;background:currentColor;
  -webkit-mask:url(../../assets/logo-tbr.png) left center/contain no-repeat;
  mask:url(../../assets/logo-tbr.png) left center/contain no-repeat;
}
/* No desktop o corpo de "ENERGIA" é calculado em JS (js/header.js: fitSub mede a largura do
   TBR e cresce a palavra até casar). O celular não roda aquele cabeçalho, então o valor é
   fixo — e é 10px, não menos: abaixo disso vira folha de texto ilegível, e o piso da
   verificação existe justamente para impedir que o logo escape dele. Em 10px com .16em de
   tracking, "ENERGIA" fica com ~50px, a mesma largura do wordmark acima. */
.m-header .logo__sub{
  display:block;white-space:nowrap;
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-size:10px;line-height:.9;letter-spacing:.16em;text-transform:uppercase;
}
.m-header .menu-dots{display:grid;grid-template-columns:repeat(2,3px);gap:2px}
.m-header .menu-dots i{width:3px;height:3px;background:currentColor;border-radius:50%;opacity:.6}

/* ═══════════════════════════════════════════════════════ seção e coluna */
.m-sec{padding:var(--m-respiro) var(--m-recuo)}
.m-sec > *{max-width:var(--m-col);margin-inline:auto}
.m-sec--dark{background:var(--bg-dark);color:#fff}
.m-sec--light{background:#fff;color:var(--c-ink)}
.m-sec--grey{background:var(--bg-grey);color:var(--c-ink)}

/* ═══════════════════════════════════════════════════════ cabeçalho de seção */
.m-head{display:flex;flex-direction:column;gap:14px;margin-bottom:var(--m-respiro)}
.m-head__label{opacity:.55}
.m-head__h2{font-size:clamp(30px,8.6vw,44px);line-height:1.04}
.m-head__lead{font-size:17px;line-height:1.55}

/* ═══════════════════════════════════════════════════════ linha
   Número e nome na mesma linha, texto embaixo. NUNCA em grade: o primitivo de varredura roda
   SplitText, que troca os filhos diretos por div.sweep-line com width:fit-content, e numa
   grade isso mata o grid-column dos filhos. Por isso `.m-rv` só vai em folha de texto. */
.m-rows{display:flex;flex-direction:column;gap:var(--m-respiro)}
.m-row__top{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.m-row__n{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;opacity:.5;flex:0 0 auto}
/* `anywhere` porque nomes de linha recebem, às vezes, um endereço inteiro sem espaço
   ("juntosparana399.com.br/planodegoverno"). Numa coluna de 351px isso estoura a página, e o
   navegador não quebra palavra sozinho. Só age quando não há outro jeito. */
.m-row__nome{font-size:21px;line-height:1.25;font-weight:600;overflow-wrap:anywhere}
.m-row__texto{font-size:17px;line-height:1.55}

/* ═══════════════════════════════════════════════════════ cartão */
.m-cards{display:flex;flex-direction:column;gap:18px}
.m-card{
  display:block;padding:24px;
  border:1px solid currentColor;border-radius:4px;
  min-height:var(--m-toque);
}
a.m-card{transition:opacity .18s ease}
a.m-card:active{opacity:.7}
.m-card__label{opacity:.55;margin-bottom:12px}
.m-card__t{font-size:21px;line-height:1.15;margin-bottom:10px}
.m-card__texto{font-size:15px;line-height:1.5;opacity:.85}
.m-card__pe{
  margin-top:16px;
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;opacity:.6;
}

/* ═══════════════════════════════════════════════════════ lista */
.m-lista{display:flex;flex-direction:column;gap:20px}
.m-lista__t{font-size:17px;font-weight:600;line-height:1.35;margin-bottom:6px}
.m-lista__d{font-size:15px;line-height:1.5;opacity:.85}

/* ═══════════════════════════════════════════════════════ acordeão */
.m-acc__item{border-top:1px solid currentColor}
.m-acc__item:last-child{border-bottom:1px solid currentColor}
.m-acc__q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:var(--m-toque);
  padding:18px 0;
  text-align:left;font-size:17px;line-height:1.35;
}
.m-acc__q > span:last-child{font-family:var(--font-mono);opacity:.5;flex:0 0 auto}
.m-acc__a{overflow:hidden;max-height:0;transition:max-height .32s ease}
.m-acc__item[data-aberto="1"] .m-acc__a{max-height:3000px}
.m-acc__a__inner{padding-bottom:20px;font-size:15px;line-height:1.5;opacity:.85}

/* ═══════════════════════════════════════════════════════ faixa
   O único horizontal que sobrevive no celular, porque deslizar card a card é gesto de dedo,
   não de mouse. scroll-snap nativo: sem JavaScript, sem Observer e sem sequestrar a rolagem —
   que no celular briga com o gesto de voltar do navegador e com a barra de endereço.

   Sangra até as bordas: a margem negativa cancela o recuo da seção e o padding o devolve por
   dentro, para o primeiro card alinhar com o texto e os seguintes espiarem na borda. */
.m-faixa{
  display:flex;gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  margin-inline:calc(-1 * var(--m-recuo));
  padding-inline:var(--m-recuo);
  max-width:none;
  scrollbar-width:none;
}
.m-faixa::-webkit-scrollbar{display:none}
.m-faixa > *{flex:0 0 min(78vw,420px);scroll-snap-align:start}

/* ═══════════════════════════════════════════════════════ raio 3D */
.m-bolt{
  position:relative;
  width:100%;aspect-ratio:1;
  max-width:min(72vw,420px);
  margin-inline:auto;
  touch-action:none;          /* o arraste gira o raio; sem isto o gesto rola a página */
}
/* O canvas de js/brand/bolt.js: um só contexto WebGL, fixo cobrindo a tela, recortado por
   scissor no retângulo de cada [data-bolt].

   Esta regra precisa existir AQUI porque no desktop ela mora em css/hub.css, css/premiss.css e
   css/brand/identidade.css — todas gatilhadas fora abaixo de 1100. Sem ela o canvas vira um
   elemento inline de 300×150 no fim do <body> e o raio simplesmente não aparece, deixando um
   buraco no herói. Nenhuma verificação pegava isso: o [data-bolt] continua ocupando espaço,
   então nada transborda, nada colide e o vão não passa do limite. Foi achado olhando. */
.br-bolt3d{
  position:fixed;inset:0;
  width:100%;height:100%;
  z-index:5;
  pointer-events:none;
  display:block;
}

/* ═══════════════════════════════════════════════════════ fecho: CTA e rodapé */
.m-cta__t{font-size:clamp(30px,9vw,46px);line-height:1.02}
.m-cta__p{margin-top:24px;font-size:17px;line-height:1.55}

.m-foot{
  padding:var(--m-respiro) var(--m-recuo);
  background:var(--bg-dark);color:#fff;
}
.m-foot > *{max-width:var(--m-col);margin-inline:auto}
.m-foot__head{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght);
  font-size:clamp(22px,6.4vw,32px);line-height:1.1;text-transform:uppercase;
  margin-bottom:var(--m-respiro);
}
.m-foot__bloco{
  padding:22px 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.m-foot__bloco:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.m-foot__lbl{opacity:.45;margin-bottom:10px}
.m-foot__v{font-size:15px;line-height:1.5;opacity:.8}
.m-foot__links{display:flex;flex-direction:column}
.m-foot__links a{
  display:flex;align-items:center;
  min-height:var(--m-toque);
  font-size:16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.m-foot__links a:last-child{border-bottom:0}
/* Um rodapé simples do /hub, que não tem #cta nem #footer institucional */
.m-foot--curto{display:flex;flex-direction:column;gap:10px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.7}
.m-foot--curto > *{max-width:none}