/* Alua Praxis · peças próprias (pessoas e prática: quente, lima sobre noite) */

/* mosaico do herói */
.mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; transform: rotate(-3deg); }
.peca { border-radius: var(--raio-g); padding: clamp(1.25rem, 2.5vw, 1.9rem); min-height: clamp(9.5rem, 15vw, 13rem); display: flex; flex-direction: column; gap: .35rem; transition: transform .35s var(--suave); }
.peca:nth-child(2) { transform: translateY(2.25rem); }
.peca:nth-child(4) { transform: translateY(2.25rem); }
.mosaico:hover .peca:nth-child(odd) { transform: translateY(-.4rem); }
.peca-n { font-family: var(--f-mono); font-size: var(--t-rotulo); opacity: .75; }
.peca strong { font-family: var(--f-titulo); text-transform: uppercase; font-weight: 600; font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.05; margin-top: auto; }
.peca span:last-child { font-size: var(--t-pequeno); }
.peca-lima { background: var(--lima); color: var(--noite); }
.peca-violeta { background: var(--violeta); color: var(--branco); }
.peca-papel { background: var(--papel); color: var(--noite); }
.peca-noite { background: var(--noite-2); color: var(--papel); border: 1px solid rgb(230 241 58 / .35); }
.peca-noite strong { color: var(--lima); }
@media (max-width: 62rem) { .mosaico { transform: none; margin-bottom: 2.25rem; } }

/* faixa de temas em movimento */
.faixa { background: var(--lima); color: var(--noite); overflow: hidden; padding: 1rem 0; border-block: 1px solid var(--noite); }
.faixa-trilho { display: flex; width: max-content; animation: deslizar 38s linear infinite; }
.faixa-trilho span { font-family: var(--f-titulo); text-transform: uppercase; font-weight: 500; font-size: clamp(1.1rem, 2vw, 1.5rem); white-space: nowrap; padding: 0 1.5rem; display: inline-flex; align-items: center; gap: 3rem; }
.faixa-trilho span::after { content: "✦"; font-size: .8em; margin-left: 1.5rem; color: var(--violeta); }
.faixa:hover .faixa-trilho { animation-play-state: paused; }
@keyframes deslizar { to { transform: translateX(-50%); } }

/* faixa «online em breve» */
.seccao-online { padding: 0 0 var(--seccao); }
.online { background: var(--lima); color: var(--noite); border-radius: var(--raio-g); padding: clamp(2rem, 5vw, 3.5rem); display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 52rem) { .online { grid-template-columns: 1fr auto; } }
.online h2 { font-size: clamp(2rem, 4vw, 3.25rem); margin: .75rem 0 .5rem; }
.online p { margin: 0; max-width: 46ch; font-size: 1.1rem; }
.selo-breve { font-family: var(--f-mono); font-size: var(--t-rotulo); background: var(--noite); color: var(--lima); padding: .25rem .7rem; border-radius: 999px; }