/* Componente Entrada. A lista, o hover, as cores e os botões de cor vêm do menu em tela cheia (interface.css); aqui ficam só
   o que tira o menu de cima da tela e o colocar na página, o caleidoscópio e o painel que o controla. */
body:has(.lii-overlay--inline){overflow-x:clip}
body .lii-overlay.lii-overlay--inline{position:relative;inset:auto;top:auto;z-index:1;isolation:isolate;overflow:visible;overscroll-behavior:auto;visibility:visible;clip-path:none;
 display:flow-root;width:100vw;max-width:100vw;margin:0 calc(50% - 50vw);min-height:calc(100svh - var(--lce-top,96px));transition:background-color .7s ease,color .7s ease}
.lce *,.lce *::before,.lce *::after{box-sizing:border-box}
.lce-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Antes do JavaScript: submenus recolhidos e painel sem conteúdo aparente, como no menu fechado. */
.lce:not(.lce-on) .lii-overlay-nav .sub-menu{display:none}
.lce:not(.lce-on) .lce-panel{visibility:hidden}

/* Caleidoscópio: grande, cortado pela borda direita. Sobe até o topo do cabeçalho quando o botão Menu não está lá. */
.lce-k-clip{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
body.lii-hdr-sem-menu .lce-k-clip{top:calc(-1 * var(--lce-head-h,0px))}
body.lii-hdr-cor-pagina .lii-header .lii-brand{position:relative;z-index:2}
.lce-k{position:absolute;width:min(128vh,82vw);aspect-ratio:1/1;right:calc(min(128vh,82vw) * -.5);top:54%;transform:translateY(-50%)}
/* As camadas (.lce-k-rot, .lce-k-layer) são do motor compartilhado: assets/caleidoscopio.css. */

/* A lista fica à frente do caleidoscópio */
/* Frase de apresentação (só na página): discreta, acima da lista. */
.lce-frase{margin:0;font:400 18px/1.4 var(--font-sans,"DM Sans",Arial,sans-serif);color:var(--lii-overlay-ink);max-width:46ch}
/* No menu das outras páginas: sem linha sob o topo; o logo fica à frente do caleidoscópio. */
.lce-menu .lii-overlay-top{border-bottom:0;position:relative;z-index:1}
/* O × usa a classe do Fechar do menu (para o interface.js tratar clique, Esc e foco), mas com o visual dos botões do painel. */
body .lii-overlay.lce .lce-panel a.lce-btn.lii-menu-close{display:flex;inline-size:auto;width:100%;block-size:auto;min-height:var(--control-min-height,46px);margin:0;padding:0;gap:0;border:0;justify-content:center;align-items:center;font:700 12px/1 var(--font-sans,"DM Sans",Arial,sans-serif);letter-spacing:0;text-decoration:none;order:0}
.lce .lii-overlay-body{position:relative;z-index:1}
.lce .lii-overlay-info .lii-overlay-address{background:var(--lii-overlay-bg);transition:background-color .7s ease}

/* Tom do painel e dos botões: a cor do texto em baixa opacidade. No verde e no rosa (e laranja e violeta) ela reduziria o contraste abaixo de AA, então o tom vai para o lado oposto. */
.lce{--lce-tint:var(--lii-overlay-ink)}
.lce.lii-overlay--verde,.lce.lii-overlay--violeta{--lce-tint:var(--brand-black,#060015)}
.lce.lii-overlay--rosa,.lce.lii-overlay--laranja{--lce-tint:var(--brand-cream-soft,#FFFEEE)}
/* Painel: largura justa da maior palavra; cores em duas por linha, na mesma largura. */
.lce-panel{z-index:2;display:flex;flex-direction:column;align-items:stretch;gap:10px;width:max-content;--lce-panel-bg:color-mix(in srgb,var(--lii-overlay-bg) 88%,var(--lce-tint));background:var(--lce-panel-bg);box-shadow:0 0 0 10px var(--lce-panel-bg);transition:background-color .7s ease,box-shadow .7s ease}
.lce-panel-corpo{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.lce-panel-corpo[hidden]{display:none}
/* O rótulo é o botão de recolher; recolhido, sobra só ele, compacto, no mesmo canto. */
.lce-label{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:32px;margin:0;padding:0 12px;border:0;border-radius:var(--radius-control,3px);cursor:pointer;font:700 12px/1 var(--font-sans,"DM Sans",Arial,sans-serif);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:background-color .25s ease,color .25s ease}
.lce-label svg{width:12px;height:12px;flex:none;transition:transform .25s ease}
.lce-label[aria-expanded="false"] svg{transform:rotate(180deg)}
.lce-label:focus-visible{outline:3px solid var(--lii-overlay-ink);outline-offset:3px}
.lce-panel .lii-menu-themes{order:0;flex-basis:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;max-width:none;width:100%}
.lii-overlay .lce-panel .lii-menu-theme{width:100%;max-width:none;min-width:0;height:auto;max-height:none;min-height:0;aspect-ratio:1;position:relative;border:0!important}
/* Sem contorno: a cor escolhida é sempre a do fundo, então o quadradinho na cor do texto contrasta. O painel tem tom próprio para a cor igual ao fundo continuar visível. */
.lii-overlay .lce-panel .lii-menu-theme[aria-pressed="true"]{box-shadow:none!important}
.lce-panel .lii-menu-theme[aria-pressed="true"]::after{content:"";position:absolute;left:50%;top:50%;width:30%;height:30%;transform:translate(-50%,-50%);background:var(--lii-overlay-ink);border-radius:1px}
.lce-btns{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.lce-btn{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-height:var(--control-min-height,46px);padding:0 12px;border:0;border-radius:var(--radius-control,3px);cursor:pointer;font:700 12px/1 var(--font-sans,"DM Sans",Arial,sans-serif);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:background-color .25s ease,color .25s ease}
.lce-btn svg{width:16px;height:16px;flex:none}
.lce-btn:focus-visible,.lii-overlay .lce-panel .lii-menu-theme:focus-visible{outline:3px solid var(--lii-overlay-ink);outline-offset:3px}
/* Sem contorno: tom suave, hover mais forte, ligado cheio. Seletores fortes porque o tema pinta botões em foco e hover. */
.lii-overlay .lce-btn,.lii-overlay .lce-label,.lii-overlay .lce-btn:focus,.lii-overlay .lce-label:focus{border:0;box-shadow:none;background:color-mix(in srgb,var(--lce-panel-bg) 86%,var(--lce-tint));color:var(--lii-overlay-ink)}
.lii-overlay .lce-btn:hover,.lii-overlay .lce-label:hover{background:color-mix(in srgb,var(--lce-panel-bg) 76%,var(--lce-tint));color:var(--lii-overlay-ink)}
.lii-overlay .lce-btn[aria-pressed="true"],.lii-overlay .lce-btn[aria-pressed="true"]:hover,.lii-overlay .lce-btn[aria-pressed="true"]:focus{background:var(--lii-overlay-ink);color:var(--lii-overlay-bg)}
/* Só ícones: os nomes seguem na dica e para leitores de tela. */
.lce-btn{justify-content:center;gap:0;padding:0}
.lce-btn>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Painel estreito: no rótulo, um ícone no lugar da palavra, que continua na dica e para leitores de tela. */
.lce-label{justify-content:center;gap:8px;padding:0 8px}
.lce-label>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lce-label::before{content:"";width:5px;height:5px;margin-right:7px;margin-bottom:7px;background:currentColor;box-shadow:7px 0 currentColor,0 7px currentColor,7px 7px currentColor}
/* Botão de recolher (1.21.3): da mesma família do MENU e do "Agende uma visita", com os tokens do design system:
   altura --control-min-height, canto --radius-control, cor cheia da paleta (texto/fundo do tema) e, no hover, contorno.
   Uma caixa só; a coluna de cores e botões fica numa segunda caixa logo abaixo. */
.lii-overlay .lce-panel{background:transparent;box-shadow:none}
.lii-overlay .lce-panel .lce-panel-corpo{margin-top:6px;padding:6px;background:var(--lce-panel-bg);border-radius:var(--radius-control,3px)}
.lii-overlay .lce-panel .lce-label,.lii-overlay .lce-panel .lce-label:focus,body .lii-overlay.lce .lce-panel a.lce-btn.lce-fechar,body .lii-overlay.lce .lce-panel a.lce-btn.lce-fechar:focus{box-sizing:border-box;width:100%;min-width:var(--control-min-height,46px);min-height:var(--control-min-height,46px);padding:0 10px;gap:8px;justify-content:center;border:1px solid var(--lii-overlay-ink);border-radius:var(--radius-control,3px);background:var(--lii-overlay-ink);color:var(--lii-overlay-bg);transition:background-color .2s,color .2s}
.lii-overlay .lce-panel .lce-label:hover,body .lii-overlay.lce .lce-panel a.lce-btn.lce-fechar:hover{background:transparent;color:var(--lii-overlay-ink)}
.lii-overlay .lce-panel .lce-label:focus-visible{outline:3px solid var(--lii-overlay-ink);outline-offset:3px}
.lii-overlay .lce-panel .lce-label::before{width:6px;height:6px;margin:0 8px 8px 0;box-shadow:8px 0 currentColor,0 8px currentColor,8px 8px currentColor}
.lii-overlay .lce-panel .lce-label svg{width:14px;height:14px}
.lii-overlay .lce-panel .lce-label svg path{stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter}
/* No menu, o × fica acima, na mesma coluna, com o mesmo desenho do botão de recolher. */
.lii-overlay .lce-panel .lce-fechar{margin-bottom:6px}
/* Só a palavra do estado atual vale para leitores de tela. */
.lce-btn[data-parado="1"] [data-estado="ligado"],.lce-btn:not([data-parado="1"]) [data-estado="parado"]{visibility:hidden}

@media(min-width:801px){
 /* Mesma regra do menu: a lista começa onde o logo termina. O painel fica no lugar do botão Menu; as medidas vêm do cabeçalho. */
 body .lce .lii-overlay-body,body .lii-overlay.lce.lii-aligned .lii-overlay-body{max-width:none;margin:0;padding-left:var(--lii-nav-x,clamp(24px,10vw,190px));padding-right:calc(var(--lce-panel-right,40px) + var(--lce-panel-w,150px) + 48px);grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.4vh,28px)}
 .lce .lii-overlay-info{flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 28px;padding-top:0}
 .lce-panel{position:absolute;top:var(--lce-panel-top,0);right:var(--lce-panel-right,40px)}
 /* Só na página: as linhas têm a largura do maior item mais uma folga (--lii-entrada-linha-extra) e nunca chegam ao caleidoscópio.
    O centro dele fica na borda direita e, girando, as peças alcançam cerca de 0,53 da largura dele para a esquerda; se o maior item não couber, ele quebra. */
 .lce:not(.lce-menu) .lii-overlay-nav{width:max-content;max-width:calc(100vw - min(128vh,82vw) * .53 - var(--lii-nav-x,190px) - 24px)}
 .lce:not(.lce-menu) .lii-overlay-nav>.lii-menu>li{padding-right:var(--lii-entrada-linha-extra,32px)}
}
@media(max-width:800px){
 body .lii-overlay.lii-overlay--inline{min-height:0}
 .lce-k{width:150vw;right:-80vw;top:-22vw;transform:none}
 .lce-panel{position:relative;margin:12px 0 0 var(--lce-panel-left,20px)}
 .lce .lii-overlay-body{padding:32px var(--lce-panel-left,20px) 20px}
 /* Sem o painel aberto a lista sobe: o caleidoscópio encolhe para o canto e não passa atrás das palavras. */
 .lce:not(:has(.lce-label[aria-expanded="true"])) .lce-k{width:70vw;right:-40vw;top:-14vw}
 .lce .lii-overlay-info .lii-overlay-address{font-size:16px}
 .lce-sem-controles-celular .lce-panel{display:none}
}
@media(prefers-reduced-motion:reduce){.lce,.lce *{transition-duration:.01ms!important}}

/* Botão + (link para o laboratório de caleidoscópios; endereço no painel do Componente Entrada). */
.lii-overlay .lce-panel a.lce-btn.lce-mais,.lii-overlay .lce-panel a.lce-btn.lce-mais:hover,.lii-overlay .lce-panel a.lce-btn.lce-mais:focus{text-decoration:none;position:relative}

/* al-entrada-sem-pulo (Velocidade 12/11/2026): no celular, com "Controles no celular: recolhidos", o painel já nasce
   recolhido. Antes, ele aparecia aberto e o JavaScript o fechava depois, e a lista inteira subia (pulo de layout de 0,59 no PageSpeed). */
@media(max-width:800px){
 .lce:not(.lce-on)[data-config*='"celular":"recolhidos"'] .lce-panel-corpo{display:none}
 .lce:not(.lce-on)[data-config*='"celular":"recolhidos"'] .lce-label svg{transform:rotate(180deg)}
 .lce:not(.lce-on)[data-config*='"celular":"recolhidos"'] .lce-k{width:70vw;right:-40vw;top:-14vw}
}