/* O quê: aparência do widget de chat e dos botões flutuantes.
Onde: carregado ao lado de funnel.css/marca.css; NÃO depende deles.
Efeitos: nenhum seletor global. Tudo mora sob `.lc-*`.
Por que tudo é prefixado `lc-` e por que as variáveis são declaradas nos
próprios blocos, e não em `:root`: este arquivo é enxertado numa página que
já tem CSS (marca.css declara `--acao`, `--linha`, `--r-botao`…). Um widget
que escreve em `:root` ou em tags nuas passa a mandar no layout que não é
dele — e o bug aparece semanas depois, longe daqui.
Os tokens abaixo repetem os valores de marca.css DE PROPÓSITO, em vez de
herdá-los: o widget tem de ficar correto numa página que não carregue
marca.css. Quando os dois estão juntos, os valores coincidem.
Identidade visual oficial da Pousada Le Ange:
verde-limão #CAD766 · oliva #979957 · grafite #4D4D4D
azul #7AC4F3 · petróleo #04808C (ação) · off-white #FBFBFB
As fontes (Comfortaa / Urbanist) são carregadas pelo index.html — aqui só se
referenciam as famílias, sempre com pilha de reserva, porque o widget tem de
ficar legível mesmo se o do Google Fonts não responder. */
.lc-fabs,
.lc-panel {
/* paleta oficial */
--lc-lima:#CAD766;
--lc-oliva:#979957;
--lc-grafite:#4D4D4D;
--lc-azul:#7AC4F3;
--lc-petroleo:#04808C;
--lc-offwhite:#FBFBFB;
/* papéis (é por eles que o modo escuro troca a função de cada cor) */
--lc-fundo:var(--lc-offwhite);
--lc-superficie:#FFFFFF;
--lc-tinta:var(--lc-grafite);
--lc-tinta-fraca:#6E6E6E; /* menor cinza que ainda passa AA sobre o off-white */
--lc-linha:#E3E5D8;
--lc-acao:var(--lc-petroleo);
--lc-acao-tinta:#FFFFFF;
--lc-destaque:var(--lc-lima);
--lc-destaque-tinta:#3D4020; /* grafite esverdecido sobre o limão: 6.9:1 */
--lc-alerta:#A83A2B;
/* O oliva puro fica no BOTÃO REDONDO, que é gráfico (piso de 3:1). Para
BOTÃO COM TEXTO ele não serve: branco sobre #979957 dá 3.1:1 e reprova em
AA. `--lc-wa-forte` é o mesmo oliva escurecido até passar com texto. */
--lc-wa:var(--lc-oliva);
--lc-wa-forte:#6F7140;
--lc-wa-tinta:#FFFFFF;
--lc-raio:10px; /* raio de botão do site oficial */
--lc-titulo:"Comfortaa", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
--lc-texto:"Urbanist", "Segoe UI", system-ui, -apple-system, Roboto,
"Helvetica Neue", Arial, sans-serif;
--lc-sombra:0 2px 6px rgba(77,77,77,.10), 0 12px 32px rgba(77,77,77,.14);
}
/* Modo escuro: só troca de token, nenhuma regra de layout. O papel das cores
INVERTE por necessidade de contraste, não por gosto — no escuro o petróleo
com texto branco cai para ~1.9:1, então quem assume a ação é o verde-limão
com tinta escura. É a mesma inversão de marca.css; sem ela o painel vira um
bloco branco no meio de um funil escuro. */
@media (prefers-color-scheme: dark){
.lc-fabs,
.lc-panel {
--lc-fundo:#1B1C17;
--lc-superficie:#24251F;
--lc-tinta:#ECEDE4;
--lc-tinta-fraca:#A9AA9F;
--lc-linha:#3B3C33;
--lc-acao:var(--lc-lima);
--lc-acao-tinta:#22231D;
--lc-destaque:var(--lc-lima);
--lc-destaque-tinta:#22231D;
--lc-alerta:#F2A79A;
--lc-wa:var(--lc-oliva);
--lc-wa-forte:var(--lc-oliva);
--lc-wa-tinta:#22231D;
--lc-sombra:0 2px 6px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.45);
}
}
/* `box-sizing` reposto DENTRO do widget: o funil declara `*{box-sizing:border-box}`
em funnel.css, mas o widget tem de ficar correto em qualquer página que o
hospede. Sem isto, `width:100%` + padding estoura a caixa e o painel ganha
barra de rolagem horizontal — foi o que apareceu no segundo screenshot. */
.lc-fabs, .lc-fabs *, .lc-panel, .lc-panel *{ box-sizing:border-box }
/* `[hidden]` do agente é `display:none` sem `!important`, e qualquer regra
`display:` deste arquivo (que são muitas, por causa do flex) o vence por
especificidade. Sem esta linha o botão de WhatsApp aparece ANTES de existir
`whatsapp_url` — foi o que o primeiro screenshot mostrou. */
.lc-fabs [hidden], .lc-panel [hidden]{ display:none !important }
/* ── botões flutuantes ─────────────────────────────────────────────────── */
/* `z-index` alto e `fixed`: o widget flutua sobre o funil, inclusive sobre a
barra de hold do passo 3, que também é sticky. */
.lc-fabs{
position:fixed; right:16px; bottom:16px; z-index:9000;
display:flex; flex-direction:column; gap:10px; align-items:flex-end;
font-family:var(--lc-texto);
}
/* 56px é o alvo de toque: acima dos 44px mínimos, com folga para dedo grande
em tela pequena. Não encolha isto para caber num layout. */
.lc-fab{
position:relative;
width:56px; height:56px; min-width:44px; min-height:44px;
border:0; border-radius:50%; cursor:pointer; padding:0;
display:flex; align-items:center; justify-content:center;
box-shadow:var(--lc-sombra);
transition:transform .12s ease, filter .12s ease;
}
.lc-fab:hover{ filter:brightness(1.07) }
.lc-fab:active{ transform:scale(.96) }
.lc-fab:focus-visible{ outline:3px solid var(--lc-azul); outline-offset:3px }
.lc-fab svg{ width:26px; height:26px; display:block; fill:currentColor }
.lc-fab-chat{ background:var(--lc-acao); color:var(--lc-acao-tinta) }
.lc-fab-wa{ background:var(--lc-wa); color:#FFFFFF; text-decoration:none }
/* O rótulo textual só aparece ao passar o mouse ou focar, e some em tela
estreita; o nome acessível vive no `aria-label`, então quem usa leitor de
tela nunca fica sem ele. */
.lc-fab-rot{
position:absolute; right:70px; white-space:nowrap;
background:var(--lc-grafite); color:var(--lc-offwhite);
font-size:.78rem; padding:5px 10px; border-radius:var(--lc-raio);
opacity:0; pointer-events:none; transition:opacity .12s ease;
}
.lc-fab:hover .lc-fab-rot,
.lc-fab:focus-visible .lc-fab-rot{ opacity:1 }
@media (max-width:520px){ .lc-fab-rot{ display:none } }
/* ── painel ────────────────────────────────────────────────────────────── */
/* `