/* Caleidoscópio Locomotiva: camadas do motor (usadas pela Entrada, pelo menu em tela cheia e pelo bloco Formas no modo gerado). */
.lce-k-rot{position:absolute;inset:0;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.lce-k-layer{position:absolute;inset:0;will-change:transform}
.lce-k-layer svg{width:100%;height:100%;overflow:visible;display:block}
.lce-k rect,.lii-caleido rect{transition:fill .7s ease}
.lce-k stop,.lii-caleido stop{transition:stop-color .7s ease}

/* Bloco Formas Locomotiva, modo "Caleidoscópio gerado". A seção (pai direto do bloco) corta as peças e o conteúdo fica à frente. */
:has(>.lii-formas--gerado){position:relative;overflow:hidden;overflow:clip;isolation:isolate;container-type:inline-size}
:has(>.lii-formas--gerado)>:not(.lii-formas--gerado){position:relative;z-index:1}
/* Quadrado com o lado em % da altura da seção (--lii-caleido-tam, campo Tamanho) e nunca menor que 320px.
   O centro fica na borda escolhida; girando, as peças alcançam cerca de 0,53 do lado a partir do centro. */
/* Tamanho máximo (campo opcional): limita o lado a uma % da largura da seção (--lii-caleido-max, em cqw). */
.lii-formas--gerado{position:absolute;z-index:0;margin:0!important;padding:0;pointer-events:none;height:min(var(--lii-caleido-tam,150%),var(--lii-caleido-max,10000px));min-height:320px;width:auto;aspect-ratio:1/1}
.lii-caleido-k{position:absolute;inset:0}
/* Recuo (campo opcional): o centro entra --lii-caleido-recuo da borda (% da largura ou da altura da seção). */
.lii-caleido--direita{right:var(--lii-caleido-recuo,0%);top:50%;translate:50% -50%}
.lii-caleido--esquerda{left:var(--lii-caleido-recuo,0%);top:50%;translate:-50% -50%}
.lii-caleido--topo{top:var(--lii-caleido-recuo,0%);left:78%;translate:-50% -50%}
.lii-caleido--base{bottom:var(--lii-caleido-recuo,0%);left:78%;translate:-50% 50%}
/* Centro: atrás do texto, por isso mais discreto. */
.lii-caleido--centro{top:50%;left:50%;translate:-50% -50%;opacity:.28}

/* Cores da seção (paleta "Cores da seção"): três peças por fundo do Design System. A última repete o fundo e "recorta" as de baixo. */
:root{--lii-caleido-1:var(--brand-pink,#FF006F);--lii-caleido-2:var(--brand-white,#F3F4F6);--lii-caleido-3:var(--brand-yellow,#FEBC0F)}
.is-style-lii-secao-amarelo{--lii-caleido-1:var(--brand-pink,#FF006F);--lii-caleido-2:var(--brand-white,#F3F4F6);--lii-caleido-3:var(--brand-yellow,#FEBC0F)}
.is-style-lii-secao-rosa{--lii-caleido-1:var(--brand-yellow,#FEBC0F);--lii-caleido-2:var(--brand-cream,#FEF3DE);--lii-caleido-3:var(--brand-pink,#FF006F)}
.is-style-lii-secao-verde{--lii-caleido-1:var(--brand-yellow,#FEBC0F);--lii-caleido-2:var(--brand-cream,#FEF3DE);--lii-caleido-3:var(--brand-green,#008437)}
.is-style-lii-secao-creme{--lii-caleido-1:var(--brand-pink,#FF006F);--lii-caleido-2:var(--brand-orange,#FF4F0F);--lii-caleido-3:var(--brand-cream,#FEF3DE)}
.is-style-lii-secao-branco{--lii-caleido-1:var(--brand-pink,#FF006F);--lii-caleido-2:var(--brand-yellow,#FEBC0F);--lii-caleido-3:var(--brand-white,#F3F4F6)}
.is-style-lii-secao-azul{--lii-caleido-1:var(--brand-yellow,#FEBC0F);--lii-caleido-2:var(--brand-cream,#FEF3DE);--lii-caleido-3:var(--brand-blue,#60A3F3)}
.is-style-lii-secao-laranja{--lii-caleido-1:var(--brand-yellow,#FEBC0F);--lii-caleido-2:var(--brand-cream,#FEF3DE);--lii-caleido-3:var(--brand-orange,#FF4F0F)}
.is-style-lii-secao-dourado{--lii-caleido-1:var(--brand-cream,#FEF3DE);--lii-caleido-2:var(--brand-pink,#FF006F);--lii-caleido-3:var(--brand-gold,#A47A0C)}
.is-style-lii-secao-violeta{--lii-caleido-1:var(--brand-celeste,#6099F3);--lii-caleido-2:var(--brand-white,#F3F4F6);--lii-caleido-3:var(--brand-yellow,#FEBC0F)}
.is-style-lii-secao-roxo{--lii-caleido-1:var(--brand-yellow,#FEBC0F);--lii-caleido-2:var(--brand-cream,#FEF3DE);--lii-caleido-3:var(--brand-violet,#A536FF)}
:is(.is-style-lii-secao-preto,.is-style-lii-secao-petroleo){--lii-caleido-1:var(--brand-pink,#FF006F);--lii-caleido-2:var(--brand-cream,#FEF3DE);--lii-caleido-3:var(--brand-yellow,#FEBC0F)}

/* Celular. "Atrás do texto": menor, no canto da borda escolhida. "Faixa": a seção ganha uma faixa embaixo do texto e o
   caleidoscópio fica centrado na borda de baixo, sem passar atrás de nenhuma palavra. */
@media(max-width:680px){
 .lii-formas--gerado{height:auto;min-height:0;width:var(--lii-caleido-celular,72vw)}
 .lii-formas--gerado.is-celular-atras:not(.lii-caleido--centro){top:0;bottom:auto;left:auto;right:0;translate:50% -38%}
 .lii-formas--gerado.is-celular-faixa{--lii-caleido-celular:min(118vw,460px);top:auto;bottom:0;left:72%;right:auto;translate:-50% 50%;opacity:1}
 :has(>.lii-formas--gerado.is-celular-faixa){padding-bottom:calc(var(--lii-caleido-faixa,210px) + 32px)!important}
}
/* Movimento reduzido: o JS não anima; aqui só se garante o quadro parado. */
@media(prefers-reduced-motion:reduce){.lce-k-rot,.lii-caleido rect,.lii-caleido stop{transition:none}}

/* Editor: o bloco aparece como uma prévia parada, sem sair da caixa dele. */
.editor-styles-wrapper .lii-formas--gerado,.block-editor-block-list__block .lii-formas--gerado{position:relative!important;inset:auto!important;translate:none!important;height:220px!important;min-height:0!important;width:220px!important;opacity:1!important;margin:0 0 0 auto!important}