/* A MARCA DO ALÊ MCP nas páginas da casa (16/10/2026): página inicial, painel e manual.

   O que entra aqui é só da casa. O console e o relatório não carregam esta folha (lá manda a Órbita),
   e numa instalação vestida com a marca de outra casa (MARCA_DIR, a Lab) tudo isto fica de fora: a
   paleta só vale em :root:not([data-marca]), e o nome em curvas e as trilhas somem. Lá a casa
   continua com o estilo e as cores dela, que é o combinado. */

/* ---------------------------------------------------------------------------------------------
   1. A PALETA. O azul do círculo do símbolo (#6f8dff) é o botão, com texto em tinta (#0b1020). No
   fundo claro o azul do link escurece para #3b66ee, porque #6f8dff em branco não passa de 3:1.
   --------------------------------------------------------------------------------------------- */
:root:not([data-marca]) {
  --primary: #3b66ee;
  --primary-2: #6f8dff;
  --primary-soft: #e8edff;
  --grad: linear-gradient(135deg, #7895ff 0%, #6584f7 100%);
  --bg-glow-1: rgba(111, 141, 255, 0.12);
  --bg-glow-2: rgba(59, 102, 238, 0.06);
  --primary-ink: #0b1020;
  --btn-ink: #0b1020;
  --btn-sombra: rgba(111, 141, 255, 0.34);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-marca]) {
    --primary: #6f8dff;
    --primary-2: #8aa2ff;
    --primary-soft: #1d2747;
    --bg-glow-1: rgba(111, 141, 255, 0.16);
    --bg-glow-2: rgba(59, 102, 238, 0.10);
  }
}

/* ---------------------------------------------------------------------------------------------
   2. O NOME EM CURVAS ao lado do símbolo: "Alê" na cor do texto, o ^ no azul e "MCP" apagado.
   O texto "Alê MCP" continua no HTML para a casa de fora que preferir o nome em texto.
   O ^ e o "MCP" pintam por variável (--ale-nome-acento, --ale-nome-mcp): o desenho mora num
   <symbol> reusado por <use>, e seletor nenhum da página alcança o clone; variável alcança.
   --------------------------------------------------------------------------------------------- */
:root { --ale-nome-acento: #6f8dff; --ale-nome-mcp: #5b6383; }
@media (prefers-color-scheme: dark) { :root { --ale-nome-mcp: #8a93b8; } }

.brand .ale-nome { display: block; flex: none; height: 19px; width: auto; aspect-ratio: 3945 / 875; }
.brand-lg .ale-nome { height: 22px; }
.brand .brand-texto { display: none; }
:root[data-marca] .brand .brand-texto { display: inline; }

/* ---------------------------------------------------------------------------------------------
   3. AS TRILHAS DA PÁGINA INICIAL: o plugue e os oito fios da tatuagem, atrás do título. Um pulso
   azul sai do plugue por cada fio e acende a ponta quando chega, um fio de cada vez.
   Cada fio tem pathLength="100": o traço de 10 com vão de 200 entra antes do começo e sai depois
   do fim, sem dar a volta.
   --------------------------------------------------------------------------------------------- */
:root {
  --circ-trilha: #cfd8f6;
  --circ-ponta: #a9b8ec;
  --circ-plugue: #b3c1f2;
  --circ-pulso: #3b66ee;
}
@media (prefers-color-scheme: dark) {
  :root {
    --circ-trilha: #26325e;
    --circ-ponta: #3a4a85;
    --circ-plugue: #34437c;
    --circ-pulso: #6f8dff;
  }
}

.lp-hero { position: relative; overflow: hidden; }
.lp-hero .lp-in { position: relative; }
:root:not([data-marca]) .lp-hero h1 { max-width: 680px; }

.lp-circuito {
  position: absolute; z-index: 0; pointer-events: none;
  top: -30px; right: -90px; width: 520px; height: 520px;
}
.lp-hero .lp-in > :not(.lp-circuito) { position: relative; z-index: 1; }

.lp-circuito .trilha { fill: none; stroke: var(--circ-trilha); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lp-circuito .plugue { fill: none; stroke: var(--circ-plugue); stroke-width: 5; }
.lp-circuito .fenda { fill: var(--circ-plugue); animation: circ-fenda 6.4s ease-in-out infinite; }
.lp-circuito .ponta { color: var(--circ-ponta); animation: circ-ponta 6.4s ease-out infinite; }
.lp-circuito .ponta.anel { fill: none; stroke: currentColor; stroke-width: 2.5; }
.lp-circuito .ponta.cheia { fill: currentColor; }
.lp-circuito .pulso {
  fill: none; stroke: var(--circ-pulso); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 10 200; stroke-dashoffset: 10;
  animation: circ-pulso 6.4s linear infinite;
}

/* Oito fios, oito partidas: 0,8 s entre uma e outra, então sempre há um pulso no caminho. */
.lp-circuito .f2 { animation-delay: 0.8s; }
.lp-circuito .f3 { animation-delay: 1.6s; }
.lp-circuito .f4 { animation-delay: 2.4s; }
.lp-circuito .f5 { animation-delay: 3.2s; }
.lp-circuito .f6 { animation-delay: 4s; }
.lp-circuito .f7 { animation-delay: 4.8s; }
.lp-circuito .f8 { animation-delay: 5.6s; }

@keyframes circ-pulso {
  0% { stroke-dashoffset: 10; }
  30% { stroke-dashoffset: -100; }
  100% { stroke-dashoffset: -100; }
}
@keyframes circ-ponta {
  0%, 27% { color: var(--circ-ponta); }
  31% { color: var(--circ-pulso); }
  52%, 100% { color: var(--circ-ponta); }
}
@keyframes circ-fenda {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Quem pediu menos movimento ao sistema vê as trilhas paradas, sem pulso. */
@media (prefers-reduced-motion: reduce) {
  .lp-circuito .pulso { display: none; }
  .lp-circuito .ponta, .lp-circuito .fenda { animation: none; }
}
/* Tela estreita: o título ocupa a largura toda e as trilhas brigariam com ele. */
@media (max-width: 900px) {
  .lp-circuito { display: none; }
}
:root[data-marca] .lp-circuito { display: none; }

/* ---------------------------------------------------------------------------------------------
   4. O SLOGAN na página inicial, logo acima do título: a pergunta numa linha, a resposta na outra,
   e "Mágica" no azul, que é o apelido. É fala do Alê MCP, então na casa de fora ele sai.
   --------------------------------------------------------------------------------------------- */
.lp-slogan {
  margin: 0 0 14px; max-width: 680px;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.45; font-weight: 600;
  color: var(--muted);
}
.lp-slogan .pergunta { display: block; color: var(--text); }
.lp-slogan strong { color: var(--primary); font-weight: 750; }
:root[data-marca] .lp-slogan { display: none; }