/* GABA3 — Sala Comercio — reglas propias extraídas de estilo.css.
   Generado automáticamente: mismas declaraciones, mismos selectores,
   sin cambios visuales. Se eliminaron reglas muertas confirmadas
   (data-public-layout clean/broadcast, .aviso-comercio: sin consumidor). */

.pagina-publica [hidden]{display:none!important}
/* Bug real (2026-09-08, achado comparando com a imagem de referência de
   o dono): "body.pagina-sala" em estilo.css tem gradientes AZUIS por cima
   da madeira (pensados pra outras salas) e, por especificidade CSS
   (elemento+classe > só classe), ganhavam desta regra aqui — a madeira
   da sala de comércio saía com um tom azulado que não deveria existir.
   "body.pagina-sala.pagina-publica" (elemento+2 classes) garante que
   esta, a versão limpa e quente, sempre vence. */
body.pagina-sala.pagina-publica{background:
        linear-gradient(180deg,rgba(8,10,22,.18),rgba(8,10,22,.32)),
        url("/assets/brand/fondo-madera-oscura-gaba3.png") center/cover no-repeat;}
.pagina-sala .publica-cabecera{min-height:60px;padding:8px 20px;gap:22px}
.pagina-sala .publica-titulo{display:flex;align-items:center;gap:13px;min-width:0}
.pagina-sala .publica-titulo h1{margin:0;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pagina-sala .publica-bloque{overflow:hidden;border:1px solid #ffffff17;border-radius:14px;background:#101624}
.pagina-sala .publica-bloque header{display:flex;align-items:center;justify-content:space-between;padding:16px 13px;border-bottom:1px solid #ffffff10}
.pagina-sala .publica-bloque header strong{font-size:13px}
.pagina-sala .publica-bloque header button{display:grid;width:27px;height:27px;place-items:center;border:1px solid #7658df;border-radius:50%;background:#171d31;color:#fff;cursor:pointer;font-size:22px;border-color:#168eff}
.pagina-sala .publica-catalogo{padding-bottom:12px}
.pagina-sala .publica-catalogo input{box-sizing:border-box;width:calc(100% - 24px);height:35px;margin:12px;padding:0 10px;border:1px solid #ffffff12;border-radius:8px;background:#0b101b;color:#fff}
.pagina-sala .publica-catalogo nav{display:grid;gap:3px;padding:0 12px}
.pagina-sala .publica-catalogo nav button{padding:10px;border:0;border-radius:7px;background:transparent;color:#d9dce7;text-align:left;font-size:11px;font-weight:800;cursor:pointer}
.pagina-sala .publica-catalogo nav button.activo{background:#5e31c5;background:#0878e8!important;border-color:#4ca8ff!important;color:#fff!important}
.pagina-sala .publica-productos{display:grid;gap:10px;padding:14px 12px}
.pagina-sala .publica-productos article{display:grid;grid-template-columns:45px 1fr 25px;gap:8px;align-items:center}
.pagina-sala .publica-productos i{width:45px;height:45px;border-radius:8px;background:linear-gradient(135deg,#f59f34,#6e2513)}
.pagina-sala .publica-productos b,
.pagina-sala .publica-productos small{display:block;font-size:10px}
.pagina-sala .publica-productos small{margin-top:3px;color:#a5a9b9}
.pagina-sala .publica-productos button{width:24px;height:24px;border:0;border-radius:6px;background:#663ce0;color:#fff;font-size:16px}
.pagina-sala .publica-escenario{position:relative;min-height:375px;overflow:hidden;border:1px solid #ffffff16;border-radius:14px;background:linear-gradient(132deg,#50251d,#1c1b29 55%,#182c44)}
@media(max-width:650px){.pagina-sala .publica-cabecera{padding:8px 12px}
.pagina-sala .publica-titulo h1{font-size:13px}
.pagina-sala .publica-escenario{min-height:340px}
}
.pagina-sala .publica-catalogo header button,
.pagina-sala .publica-productos button{border-color:#168eff!important;background:#0f2740!important;color:#b9deff!important}
.pagina-sala .publica-catalogo nav button.activo,
.pagina-sala .publica-productos button{background:#0878e8;color:#fff}
.pagina-sala .publica-catalogo nav button.activo,
.pagina-sala .publica-productos button,
.pagina-sala .publica-bloque header button{
    border-color:#249cff!important;
    color:#fff!important;
    background:linear-gradient(135deg,#168eff,#075ecb)!important;
    box-shadow:0 9px 22px rgba(8,120,232,.28)!important;
}
.pagina-publica .publica-cabecera{display:flex!important;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:5px 20px;width:100%;box-sizing:border-box;min-height:52px;position:relative}
/* flex:0 0 auto — nunca encolhe, sempre no tamanho natural. Quem cede
   espaço é .marca-propietario-publica (ver comentário grande lá). */
.publica-nav{flex:0 0 auto;display:flex;justify-content:center;align-items:center;gap:10px}
/* overflow-x:auto continua como rede de segurança pro celular muito
   estreito (abaixo de 720px o próprio bloco mobile já assume o layout,
   isso aqui é só o último recurso se algo escapar). */
.publica-nav-links{display:flex;justify-content:center;gap:6px;overflow-x:auto;flex-wrap:nowrap}
.publica-nav a,
.publica-nav-curtir{display:flex;flex-direction:column;align-items:center;gap:2px;color:#c9e8c8;text-decoration:none;font-weight:700;font-size:11px;padding:4px 10px;border-radius:10px;border:0;border-bottom:2px solid transparent;background:transparent;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;white-space:nowrap}
.publica-nav a svg,
.publica-nav-curtir svg{flex:0 0 auto}
.publica-nav a:hover,
.publica-nav a:focus-visible,
.publica-nav-curtir:hover,
.publica-nav-curtir:focus-visible{background:#132a17;color:#e8ffb8;outline:none}
/* Pedido real do dono (2026-09-14): ícone de curtir na cabecera,
   junto dos outros — quando ativo (a sala já foi curtida), mesma cor
   de destaque já usada em qualquer "ativo" da plataforma. */
.publica-nav-curtir[aria-pressed="true"]{color:#55c900}
.publica-nav-curtir[aria-pressed="true"] svg{fill:#55c900}
/* Só no mobile (pedido explícito do dono, "faltó en la parte móvil") —
   no desktop o mesmo Curtir já existe na cabecera (#publica-curtir-sala,
   fileira de ícones sociais) e ficaria duplicado. */
@media(min-width:851px){.publica-nav-curtir{display:none!important}}
.publica-nav-links a:first-child{color:#e8ffb8;border-color:#68d428}
/* Moto de entrega: sempre visível ao lado de "Ofertas", mas "apagada"
   (cinza, sem brilho) quando o comércio não faz entrega — só acende
   (verde, com brilho) quando o dono ativa nas configurações. */
/* Só aparece quando o negócio realmente tem entrega (ver aplicarSala em
   sala-publica.html) — nunca mais aparece cinza/apagada, some de vez. */
.publica-entrega-info{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    padding:6px 12px;
    color:#8fff67;
    font-weight:700;
    font-size:11px;
    text-shadow:0 0 10px rgba(85,201,0,.5);
}
.publica-entrega-info svg{filter:drop-shadow(0 0 4px rgba(85,201,0,.6))}
.publica-entrega-info[hidden]{display:none!important}
/* Seguir/curtir moram no canto direito da linha da localização (abaixo
   de toda a cabeceira), longe do logotipo/nome/subtítulo do negócio que
   fica lá em cima — encostando quase no painel do catálogo. */
.publica-nav-social{display:flex;align-items:center;gap:4px;flex:none}
/* o dono: os ícones (Seguir/Curtir/Compartilhar/Denunciar/online/visitas)
   têm que ficar livres e independentes — nada de borda, fundo ou sombra
   que pareça uma bolha/caixa em volta. Mesmo critério já usado nos
   ícones do compositor (.publica-icon-btn): transparente em repouso, um
   realce bem sutil só em hover/foco/estado ativo — nunca uma pílula
   permanente. */
.publica-nav-social-btn{display:flex;align-items:center;gap:5px;height:28px;padding:0 7px;border:none;border-radius:8px;background:transparent;color:#9dff70;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap;transition:background .18s ease,color .18s ease}
.publica-nav-social-btn:hover,
.publica-nav-social-btn:focus-visible{background:rgba(143,255,103,.14);outline:none}
.publica-nav-social-btn[aria-pressed="true"]{background:rgba(85,201,0,.22);color:#c8ffab}
.publica-nav-social-btn b{font-weight:900;font-size:11px}
#publica-curtir-sala{padding:0 7px}
#publica-curtir-sala[aria-pressed="true"] [data-morph-icone]{color:#ff5c7a}
/* Pessoas online agora + visitas — só informativo, não clicável, sem
   hover (nada de feedback de clique num elemento que não clica). */
.publica-nav-social-info{cursor:default;padding:0 7px;color:#cdece0;background:transparent!important}
#publica-online-agora svg{color:#8fff67}
#publica-online-agora.tem-gente{color:#8fff67}
#publica-visitas-info svg{color:#7fc7ff}
.publica-nav-utilidades{display:flex;align-items:center;gap:12px;flex:none;margin-right:14px}
.publica-controles-sistema{display:flex;align-items:center;gap:16px}
.publica-controles-sistema>button:not(.perfil-miniatura){width:36px;height:36px;border:1px solid #ffffff22;border-radius:10px;background:#101b12;color:#eaffdf;font-size:17px}
.publica-controles-sistema .perfil-miniatura{width:38px;height:38px}
.publica-identidade-form{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(130px,1fr) 110px auto;gap:8px;align-items:end;width:100%;padding-top:10px;border-top:1px solid #ffffff18}
.publica-identidade-form label{display:grid;gap:5px;color:#b5d2b7;font-size:10px;font-weight:800}
.publica-identidade-form input{min-height:37px;padding:0 9px;border:1px solid #ffffff1e;border-radius:8px;background:#0c1710;color:#fff}
.publica-identidade-form input[type="color"]{padding:3px}
.publica-identidade-form button{min-height:37px;white-space:nowrap}
@media(max-width:650px){.pagina-publica .publica-cabecera{padding:9px 12px}
.publica-controles-sistema{gap:10px}
.publica-controles-sistema>button:not(.perfil-miniatura){width:31px;height:31px;font-size:14px}
.publica-controles-sistema .perfil-miniatura{width:33px;height:33px}
.publica-identidade-form{grid-template-columns:1fr}
.publica-identidade-form button{width:100%}
}
/* Bug real (2026-09-04, achado pela inspeção visual do próprio dono): sem
   isso, o bloco de identidade (título+subtítulo) crescia até caber o
   texto INTEIRO em uma linha só, avançando por cima de "Ofertas"/"Vídeos"
   à direita — porque um h1 com white-space:nowrap tem largura mínima
   igual ao texto inteiro, e o flexbox nunca encolhe abaixo disso sozinho.
   Este teto força o encolhimento de verdade, deixando o texto-overflow:
   ellipsis do h1 realmente cortar o que sobra. */
.marca-propietario-publica{
    max-width:min(36%,380px);
    /* Bug real de auditoria (2026-09-07): em larguras "de meio" (ex.:
       janela de 1024px) o nome do negócio não cedia espaço nenhum sob
       pressão, e quem quebrava era o nav (Início/Catálogo/Ofertas/
       Vídeos/Entrega), que ficava menor do que o necessário e
       transbordava. Corrigido invertendo qual dos dois "flexiona":
       o nav agora é flex:0 0 auto (nunca encolhe, sempre mostra os 5
       itens no tamanho normal — ver .publica-nav abaixo) e o nome do
       negócio (aqui) passa a ser flex:1 1 auto — absorve o espaço que
       sobra e é quem trunca com "…" primeiro quando o espaço aperta,
       nunca o contrário. Mas nunca deixa encolher até quase 0 — sem um
       piso mínimo, a 760px por exemplo o nome sumia (só sobrava 1 letra)
       e a frase de baixo (.publica-frase-header) quebrava em várias
       linhas, inchando a cabeceira inteira. */
    min-width:170px;
    /* flex-basis:0 (não "auto") — o cálculo de quebra de linha do
       flexbox usa o tamanho NATURAL (hypothetical) do item, não o
       tamanho já encolhido; com basis:auto, o navegador contava os
       461px inteiros do nome pra decidir se quebra linha, e a busca
       (mic/lupa) acabava pulando pra uma segunda fileira sozinha, ANTES
       do encolhimento por ellipsis sequer entrar em cena. Com basis:0,
       o nome conta como 0 nessa conta — cresce depois, normalmente. */
    flex:1 1 0;
}
.publica-identidad-bloque{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:0;
}
.publica-nombre-row{
    display:flex;
    align-items:baseline;
    gap:8px;
    flex-wrap:nowrap;
    min-width:0;
}
.publica-nombre-row h1{
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    flex-shrink:1;
}
.publica-ubicacion-linha{
    flex:0 0 100%;
    order:4;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:2px;
    padding-bottom:0;
}
.publica-ubicacion-linha .publica-nav-social{
    /* Bug real de auditoria (2026-09-07): "left:831px" era um valor fixo
       em pixels, calibrado só pra uma largura de tela específica — em
       qualquer container mais estreito que ~1133px (ex.: 1024px de
       largura de janela), a fileira Seguir/Curtir/Compartilhar saía
       inteira pra fora da borda direita, cortada. "right:0" sempre
       encosta na borda direita de verdade, não importa a largura. */
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
}
.publica-formas-pagamento{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.publica-formas-pagamento[hidden]{display:none!important}
.publica-pagamento-badge{display:inline-block;font-size:10.5px;font-weight:700;color:#e0c477;letter-spacing:.03em;white-space:nowrap;padding:2px 9px;border:1px solid rgba(224,196,119,.35);border-radius:20px;background:rgba(10,6,2,.30);line-height:1.6}
.publica-ubicacion-badge{
    display:inline-block;
    font-size:11px;
    font-weight:700;
    color:#9dff70;
    letter-spacing:.05em;
    white-space:nowrap;
    padding:2px 10px;
    border:1px solid rgba(157,255,112,.28);
    border-radius:20px;
    background:rgba(10,6,2,.30);
    line-height:1.6;
    text-align:center;
}
.publica-ubicacion-badge:empty{
    display:none;
}
@media(max-width:480px){
    /* Aberto + São Paulo + Seguir + Curtir + online + visitas — tudo
       precisa caber numa linha só nessa largura, sem quebrar (o dono
       pediu explicitamente pra nunca criar uma segunda linha aqui, o
       espaço economizado é o que deixa o catálogo/ofertas subirem). */
    .pagina-sala .publica-ubicacion-linha{gap:4px!important}
    .publica-status-atendimento{padding:2px 7px!important;gap:4px!important;font-size:10px!important}
    .publica-status-ponto{width:6px!important;height:6px!important}
    .publica-nav-social-btn{padding:0 6px!important;height:24px!important;gap:3px!important}
}
@media(max-width:480px){.publica-ubicacion-badge{
        font-size:9px;
        padding:1px 5px;
        letter-spacing:.03em;
        max-width:38vw;
        overflow:hidden;
        text-overflow:ellipsis;
    }
}
.pagina-publica.camera-comercial-ativa .produto-escolhido,
.pagina-publica.camera-comercial-ativa .ofertas-trilho{
    display:none;
}
/* Pedido real do dono (2026-09-14): "esos bordes negros... sea en el
   móvil o sea en la versión de escritorio" — a regra base (valia nos
   dois, não só no desktop) tinha borda + canto redondo + sombra +
   espaço entre fotos. Zerado aqui na base, pra nunca mais precisar
   repetir esse ajuste por breakpoint. */
.catalogo-pergaminho .publica-productos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0!important;padding:0!important}
.catalogo-pergaminho .publica-productos article{position:relative;display:block;min-height:135px;overflow:hidden;padding:0;border:0;border-radius:0;background:#1a2a1c;box-shadow:none;transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.catalogo-pergaminho .publica-productos article strong{position:absolute;right:6px;bottom:6px;padding:0;border-radius:0;background:transparent;color:#c9ffb7;font-size:10px;font-weight:950;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.8);box-shadow:none}
.catalogo-pergaminho .publica-productos article strong::before{content:"OFERTA · ";font-size:8px;color:#fff}
/* Mesmo pedido, agora valendo em QUALQUER modo (mosaico ou grade densa)
   e em QUALQUER tela (nunca mais preso dentro de um @media específico):
   nada de faixa escura embaixo do nome/preço do agente de letras. */
.catalogo-pergaminho .publica-productos article .gaba3-price-lettering{background:none!important;max-height:none!important}
.catalogo-pergaminho .publica-productos article .gaba3-letter-name,
.catalogo-pergaminho .publica-productos article .gaba3-letter-price{text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.8)!important}
.publica-busca-sem-resultados{padding:32px 16px;text-align:center;color:#a9c4a6;font-size:13px}
@media(max-width:760px){.catalogo-pergaminho .publica-productos{grid-template-columns:1fr;padding:7px}
.catalogo-pergaminho .publica-productos article{min-height:118px}
.catalogo-pergaminho .publica-productos article strong{font-size:9px}
}
.pagina-sala .publica-modelos button.activo,
.pagina-sala .publica-catalogo nav button.activo,
.pagina-sala .publica-productos button,
.pagina-sala .publica-bloque header button,
.pagina-sala .publica-chat-minimo button{
    border-color:transparent!important;
    color:#061408!important;
    background:linear-gradient(135deg,var(--gaba3-verde-brillante),var(--gaba3-verde))!important;
    box-shadow:0 9px 22px rgba(85,201,0,.22)!important;
    transition:transform .22s ease,box-shadow .22s ease,filter .22s ease,background .22s ease;
}
.pagina-sala .publica-productos button:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 12px 28px rgba(85,201,0,.32)!important}
.pagina-publica .sala-publica-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(235px,285px);gap:0;max-width:1540px;margin:0 auto;padding:8px 0 0}
.pagina-publica .publica-paineis-principais{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;min-width:0}
.pagina-publica .publica-bloque{min-width:0;overflow:hidden;border:1px solid #294d2f;border-radius:15px;background:linear-gradient(145deg,#0b120d,#07100a);box-shadow:0 14px 30px #0005}
.pagina-publica .publica-catalogo{border-right:0;border-radius:15px 0 0 15px}
/* Pedido real do dono (2026-09-14): "tiene que ocupar el cien por
   ciento... quita esa línea" — .publica-catalogo (linha 24, regra
   antiga/genérica) reserva 12px de padding embaixo, sobrando uma tira
   escura visível no fundo de Catálogo, Mais produtos e do vídeo/foto
   central (as 3 caixas usam essa mesma classe). Sem cabeçalho nenhum
   mais nessas caixas, não sobra motivo pra essa margem — zera aqui. */
.pagina-publica .publica-catalogo{padding-bottom:0!important}
.pagina-publica .publica-ofertas{border-left:1px solid #caa23c;border-right:0;border-radius:0;display:grid;grid-template-rows:44px minmax(0,1fr);min-height:360px}
.pagina-publica .publica-chat-panel{border-left:1px solid #caa23c;border-radius:0 15px 15px 0;display:block;min-height:360px}
/* o dono: "CHAT DA SALA" nunca aparece — nem no celular (já tirado antes,
   dentro do bloco mobile) nem no desktop. Regra fora de qualquer
   @media, pra valer sempre. */
.pagina-publica .publica-chat-panel .publica-bloque>header{display:none!important}
/* ── Tela grande: catálogo OU ofertas ocupam o lugar dos dois ── */
.pagina-publica[data-vista-comercio="catalogo"] .publica-paineis-principais{grid-template-columns:1fr}
.pagina-publica[data-vista-comercio="catalogo"] .publica-ofertas{display:none}
.pagina-publica[data-vista-comercio="catalogo"] .publica-catalogo{border-right:1px solid #caa23c}
.pagina-publica[data-vista-comercio="ofertas"] .publica-paineis-principais{grid-template-columns:1fr}
.pagina-publica[data-vista-comercio="ofertas"] .publica-catalogo{display:none}
.pagina-publica[data-vista-comercio="ofertas"] .publica-ofertas{border-left:0;border-right:1px solid #caa23c;border-radius:15px 0 0 15px}
.publica-nav a.ativo{color:#e8ffb8;border-color:#68d428}
.pagina-publica .publica-bloque>header{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 14px;border-bottom:1px solid #ffffff12}
.pagina-publica .publica-bloque>header strong{color:#8fff67;font-size:13px;font-weight:900;letter-spacing:.02em;text-transform:uppercase}
/* "Ver todos →" (2026-09-08, igual à imagem de referência do dono). */
.pagina-publica .publica-ver-todos{flex:none;color:#9dff70;font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap}
.pagina-publica .publica-ver-todos:hover,
.pagina-publica .publica-ver-todos:focus-visible{color:#c8ffb0;text-decoration:underline;outline:none}
.pagina-publica .botao-menu-painel{display:grid;width:30px;height:30px;place-items:center;border:0;border-radius:8px;background:transparent!important;color:#baff9e!important;box-shadow:none!important;font-size:19px;cursor:pointer}
.pagina-publica .botao-menu-painel[hidden]{display:none!important}
.pagina-publica .botao-menu-painel:hover,
.pagina-publica .botao-menu-painel:focus-visible{background:#55c9001c!important;outline:1px solid #7fff5b}
.pagina-publica .catalogo-pergaminho{height:calc(100% - 44px);position:relative;height:100%;min-height:220px;overflow-x:hidden;overflow-y:auto}
.pagina-publica .publica-productos,
.pagina-publica .ofertas-trilho{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;height:100%;box-sizing:border-box;padding:12px;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.pagina-publica .publica-productos::-webkit-scrollbar,
.pagina-publica .ofertas-trilho::-webkit-scrollbar{display:none}
.pagina-publica .publica-productos article,
/* Mesmo pedido do dono (2026-09-14) de novo aqui — "esos bordes
   negros... sea en el móvil o sea en la versión de escritorio": base
   sem borda/canto redondo/sombra, valendo em qualquer tela. */
.pagina-publica .oferta-cartao{position:relative;display:block;min-width:0;min-height:170px;overflow:hidden;border:0;border-radius:0;background:#111b13;scroll-snap-align:start;cursor:pointer;box-shadow:none;transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.pagina-publica .oferta-cartao .gaba3-price-lettering{background:none!important;max-height:none!important}
.pagina-publica .oferta-cartao .gaba3-letter-name,
.pagina-publica .oferta-cartao .gaba3-letter-price{text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.8)!important}
.pagina-publica .publica-productos article .imagem-catalogo-produto,
.pagina-publica .oferta-cartao .imagem-oferta-produto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pagina-publica .publica-productos article strong,
.pagina-publica .oferta-cartao strong{position:absolute;right:7px;bottom:7px;z-index:1;padding:5px 7px;border-radius:7px;background:#071009e8;color:#efffe8;font-size:10px;font-weight:900}
.pagina-publica .publica-productos article strong::before,
.pagina-publica .oferta-cartao strong::before{content:none}
.pagina-publica .publica-categorias{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:4px;padding:5px 4px 0}
/* 2026-09-08 (pedido do dono): pílulas de texto viraram ícone + legenda
   curta — mesmo espírito visual do menu Início/Catálogo/Ofertas/Vídeos,
   mais fácil de ver de relance o que o negócio vende. Bug real de
   auditoria (2026-09-14): com flex-wrap:wrap, numa caixa estreita (ex.
   870px de tela), a 3ª categoria sozinha "caía" pra uma segunda linha e
   ficava centralizada sozinha — bagunçado. flex-wrap:nowrap +
   min-width:0 aqui e no <span> (que já tem text-overflow:ellipsis)
   garante que sempre cabem numa linha só, encolhendo/truncando o texto
   se precisar, nunca quebrando pra uma segunda linha torta. */
.pagina-publica .publica-categorias .publica-categoria-icone{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    padding:0;
    border:none;
    background:transparent;
    color:#c8f090;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
    flex:1 1 0;
    min-width:0;
    max-width:92px;
}
.pagina-publica .publica-categorias .publica-categoria-icone i{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border:0;
    background:transparent;
    color:#fff;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));
}
.pagina-publica .publica-categorias .publica-categoria-icone i svg{width:22px;height:22px}
/* Pedido real do dono (2026-09-14): "esas letras, tienes que sacarla" —
   o rótulo de texto ("Doces & Bebidas" etc.) ocupava uma linha inteira
   só pra isso, espaço que devia ir pra foto do produto. O botão já tem
   aria-label com o mesmo texto, então o rótulo visual fica
   escondido-mas-acessível (sr-only), nunca removido do DOM. */
.pagina-publica .publica-categorias .publica-categoria-icone span{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}
.pagina-publica .publica-categorias .publica-categoria-icone.ativo i{color:#55c900}
/* No celular só cabem 2 fotos bem grandes por vez — para ver mais da
   mesma categoria, usa as setas (ou arrasta com o dedo) em vez de
   espremer tudo numa grade cheia de quadradinhos pequenos. */
/* ── Tela limpa: sem imagem nenhuma = nada; conforme o dono adiciona
   fotos, a caixa se divide sozinha (1 = tela toda, 2 = metade cada,
   3, 4... e assim por diante), sem espaço vazio sobrando. ── */
.pagina-publica .catalogo-pergaminho .publica-productos:empty{
    display:block!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    min-height:0!important;
    padding:0!important;
}
.pagina-publica .catalogo-pergaminho .publica-productos[data-mosaico]{
    display:grid!important;
    grid-auto-flow:row!important;
    gap:2px!important;
    padding:0!important;
}
.pagina-publica .catalogo-pergaminho .publica-productos[data-mosaico] article{
    min-height:0!important;
    border:0!important;
    border-radius:0!important;
    grid-row:auto!important;
}
.pagina-publica .catalogo-pergaminho .publica-productos[data-mosaico="1"]{grid-template-columns:1fr!important;grid-template-rows:1fr!important}
.pagina-publica .catalogo-pergaminho .publica-productos[data-mosaico="2"]{grid-template-columns:1fr 1fr!important;grid-template-rows:1fr!important}
.pagina-publica .catalogo-pergaminho .publica-productos[data-mosaico="3"]{grid-template-columns:1fr 1fr 1fr!important;grid-template-rows:1fr!important}
.pagina-publica .catalogo-pergaminho .publica-productos[data-mosaico="4"]{grid-template-columns:1fr 1fr!important;grid-template-rows:1fr 1fr!important}
.pagina-publica .catalogo-pergaminho .publica-productos[data-mosaico="5"]{grid-template-columns:1fr 1fr 1fr!important;grid-template-rows:1fr 1fr 1fr!important}
.pagina-publica .catalogo-pergaminho .publica-productos[data-mosaico="5"] article:first-child{grid-column:span 3!important}
.pagina-publica .catalogo-pergaminho .publica-productos[data-mosaico="6"]{grid-template-columns:1fr 1fr 1fr!important;grid-template-rows:1fr 1fr!important}
@media(max-width:760px){
    .pagina-publica .catalogo-pergaminho .publica-productos[data-mosaico="3"]{grid-template-columns:1fr!important;grid-template-rows:1fr 1fr 1fr!important}
    .pagina-publica .catalogo-pergaminho .publica-productos[data-mosaico="5"] article:first-child{grid-column:span 2!important}
    /* Muitas fotos numa tela pequena ficam apertadas — em vez de espremer
       tudo, mostra 2 fotos bem grandes por vez; arrasta/toca a seta para
       ver as próximas da mesma categoria. */
    .pagina-publica .catalogo-pergaminho .publica-productos[data-mosaico="5"],
    .pagina-publica .catalogo-pergaminho .publica-productos[data-mosaico="6"]{
        grid-template-columns:none!important;
        grid-template-rows:1fr!important;
        grid-auto-flow:column!important;
        grid-auto-columns:calc(50% - 1px)!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        scroll-snap-type:x mandatory;
    }
    .pagina-publica .catalogo-pergaminho .publica-productos[data-mosaico="5"] article,
    .pagina-publica .catalogo-pergaminho .publica-productos[data-mosaico="6"] article,
    .pagina-publica .catalogo-pergaminho .publica-productos[data-mosaico="5"] article:first-child{
        scroll-snap-align:center;
        grid-column:auto!important;
    }
}
.pagina-publica .publica-ofertas .ofertas-cabecera{grid-row:1}
.pagina-publica .publica-ofertas .ofertas-trilho{grid-row:2;align-content:start;grid-auto-flow:column;grid-template-columns:none;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-columns:minmax(155px,82%);align-content:stretch;overflow-x:auto;overflow-y:auto;scroll-behavior:smooth}
.pagina-publica .produto-escolhido[hidden]{display:none!important}
/* Uma linha só (não mais 44px+resto) — o cabeçalho "CHAT DA SALA" agora
   está sempre escondido (ver regra acima), a antiga linha reservada de
   44px ficaria vazia no topo do painel. */
.pagina-publica .publica-chat-panel>section{height:100%;display:grid;grid-template-rows:minmax(0,1fr)}
.pagina-publica .publica-chat-panel header small{color:#8fff67;font-size:10px;font-weight:800}
.pagina-publica .contenido-chat{display:grid;grid-template-rows:minmax(150px,1fr) auto;min-height:0;
    /* Papel de parede GABA3 — madeira escura (mesmo padrão da sala privada),
       cobrindo lista de mensagens + rodapé juntos (senão fica um corte de
       cor entre as duas áreas). Marca-d'água bem discreta, só a madeira dá
       o contraste para as mensagens. */
    background-color:#1b0f06;
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Ctext%20x='10'%20y='44'%20transform='rotate(-16%2010%2044)'%20font-family='Segoe%20UI,Arial,sans-serif'%20font-size='20'%20font-weight='800'%20fill='%23f1d99a'%20fill-opacity='.04'%3EGABA3%3C/text%3E%3Ctext%20x='110'%20y='116'%20transform='rotate(-16%20110%20116)'%20font-family='Segoe%20UI,Arial,sans-serif'%20font-size='20'%20font-weight='800'%20fill='%23f1d99a'%20fill-opacity='.04'%3EGABA3%3C/text%3E%3Ctext%20x='24'%20y='191'%20transform='rotate(-16%2024%20191)'%20font-family='Segoe%20UI,Arial,sans-serif'%20font-size='20'%20font-weight='800'%20fill='%23f1d99a'%20fill-opacity='.04'%3EGABA3%3C/text%3E%3C/svg%3E"),
        linear-gradient(150deg,rgba(10,5,2,.32),rgba(6,3,1,.42)),
        url("/assets/brand/fondo-madera-oscura-gaba3.png");
    background-repeat:repeat,no-repeat,no-repeat;
    background-size:220px 220px,auto,cover;
    background-position:0 0,center,center;
}
.pagina-publica .lista-mensajes{display:grid;align-content:start;gap:9px;min-height:0;max-height:440px;padding:11px;overflow:auto}
.pagina-publica .lista-mensajes article{display:grid;grid-template-columns:29px minmax(0,1fr);gap:7px;align-items:start;background:transparent;border:0;box-shadow:none}
.pagina-publica .lista-mensajes .avatar-chat{width:29px;height:29px;font-size:9px}
.pagina-publica .lista-mensajes b{font-size:10px}
.pagina-publica .lista-mensajes p{margin:2px 0;color:#dce9d9;font-size:11px;line-height:1.35}
.pagina-publica .lista-mensajes small{color:#8aa58d;font-size:9px}
.pagina-publica .pie-chat{padding:9px;border-top:1px solid #ffffff12;background:transparent;border-top:none}
.pagina-publica .form-chat{display:flex;gap:6px}
/* o dono: a píldora (carita + campo + anexo + câmera juntos, mic verde
   redondo fora) tem que existir SEMPRE — desktop e celular, nunca só no
   mobile. Antes essas regras só existiam dentro de @media(max-width:720px)
   e no desktop a mensagem ficava sem nenhuma cápsula visível, só ícones
   soltos numa fileira crua. Movido pra fora de qualquer @media. */
.pagina-publica .pie-chat{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    padding-left:8px!important;
    padding-right:8px!important;
}
.pagina-publica .form-chat{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    flex:1 1 auto!important;
    min-width:0!important;
}
.pagina-publica .publica-mensagem-pill{
    display:flex!important;
    align-items:center!important;
    flex:1 1 auto!important;
    min-width:0!important;
    gap:2px!important;
    /* o dono: nem opaca nem invisível — vidro fosco de verdade, deixa a
       madeira escura de fundo aparecer um pouco por trás, sem perder a
       leitura da píldora como cápsula. */
    background:rgba(65,94,73,.42)!important;
    backdrop-filter:blur(5px)!important;
    -webkit-backdrop-filter:blur(5px)!important;
    border:1px solid rgba(255,255,255,.30)!important;
    box-shadow:0 1px 3px rgba(0,0,0,.35)!important;
    border-radius:22px!important;
    padding:2px 4px 2px 8px!important;
}
.pagina-publica .publica-mensagem-pill input{
    flex:1 1 auto!important;
    min-width:0!important;
    height:38px!important;
    padding:0 4px!important;
    border:none!important;
    background:transparent!important;
    color:#ffffff!important;
}
.pagina-publica .publica-mensagem-pill input::placeholder{
    color:rgba(255,255,255,.72)!important;
}
.pagina-publica .publica-mensagem-pill input:focus{
    border:none!important;
    box-shadow:none!important;
}
.pagina-publica .publica-mensagem-pill .publica-icon-btn{
    flex:0 0 auto!important;
}
.pagina-publica .form-chat input{min-width:0;flex:1;height:35px;padding:0 9px;border:1px solid #ffffff1c;border-radius:9px;background:#0b130c;color:#fff;outline:none;font-size:11px}
.pagina-publica .form-chat input:focus{border-color:#72e854}
.pagina-publica .form-chat button{width:36px;min-height:35px;padding:0;border-radius:9px}
/* o dono: o ícone do microfone/enviar estava sendo espremido (8x18px em vez
   de um tamanho quadrado de verdade) porque o SVG não tem width/height
   próprios — sem isso, cada navegador decide um tamanho intrínseco
   diferente dentro do botão flex. Fixa um tamanho real e visível. */
.pagina-publica .form-chat button svg,
.pagina-publica .form-chat button span[data-morph-icone]{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    width:20px!important;
    height:20px!important;
    flex:0 0 auto!important;
}
/* Câmera ao vivo mora dentro do palco de ofertas: quando ativa, some o
   carrossel de ofertas e o vídeo toma exatamente aquele lugar — some ao
   encerrar e as ofertas voltam a aparecer. */
.pagina-publica .ofertas-stage .transmissao-comercial{position:absolute;inset:0;z-index:7;padding:10px;overflow:hidden;border-radius:15px;background:#050807}
.pagina-publica .transmissao-comercial[hidden]{display:none!important}
.pagina-publica .video-comercial{position:relative;width:100%;height:100%;overflow:hidden;border:1px solid #55c90062;border-radius:15px;background:#050807}
.pagina-publica .video-comercial video,
.pagina-publica .video-comercial canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pagina-publica .camera-ao-vivo{position:absolute;top:12px;left:12px;padding:6px 8px;border-radius:7px;background:#d62635;color:#fff;font-size:10px;font-weight:900}
.pagina-publica .encerrar-camera-x{position:absolute;top:10px;right:10px;z-index:9;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #ffffff33;border-radius:50%;background:#0009;color:#fff;backdrop-filter:blur(3px)}
.pagina-publica .encerrar-camera-x:active{background:#d62635cc}
.pagina-publica .encerrar-camera-x svg,
.pagina-publica .encerrar-camera-x [data-morph-icone]{width:15px;height:15px}
.pagina-publica .camera-arrastar-handle{display:none}
@media(max-width:850px){
    .pagina-publica.camera-comercial-ativa .camera-arrastar-handle{
        display:flex;
        align-items:center;
        justify-content:center;
        position:absolute;
        left:50%;
        bottom:2px;
        transform:translateX(-50%);
        width:64px;
        height:22px;
        padding:0;
        border:0;
        background:transparent;
        touch-action:none;
        cursor:ns-resize;
        z-index:8;
    }
    .pagina-publica .camera-arrastar-handle span{
        width:44px;
        height:5px;
        border-radius:4px;
        background:#ffffff55;
    }
    .pagina-publica .camera-arrastar-handle:active span{background:#8fff67}
}
/* O catálogo continua 100% visível e navegável — o cliente pode seguir
   procurando outro produto/cor enquanto assiste a câmera nas ofertas. */
.pagina-publica.camera-comercial-ativa .ofertas-trilho,
.pagina-publica.camera-comercial-ativa .ofertas-dots,
.pagina-publica.camera-comercial-ativa .catalogo-flecha,
.pagina-publica.camera-comercial-ativa .produto-escolhido{display:none!important}
.pagina-publica.camera-comercial-ativa .sala-publica-layout{grid-template-columns:minmax(0,1fr) minmax(235px,285px)}
@media(max-width:850px){.pagina-publica .sala-publica-layout{grid-template-columns:1fr;padding:10px 0 0}
.pagina-publica .publica-paineis-principais{grid-template-columns:1fr}
.pagina-publica .publica-catalogo{border-right:1px solid #294d2f;border-radius:15px 15px 0 0}
.pagina-publica .publica-ofertas{border-left:0;border-top:1px solid #caa23c;border-right:1px solid #294d2f;border-radius:0}
.pagina-publica .publica-chat-panel{border-left:0;border-top:1px solid #caa23c;border-radius:0 0 15px 15px;min-height:265px}
.pagina-publica .publica-catalogo,
.pagina-publica .publica-ofertas{min-height:250px}
.pagina-publica[data-vista-comercio="catalogo"] .publica-catalogo,
.pagina-publica[data-vista-comercio="ofertas"] .publica-ofertas{min-height:85vh}
.pagina-publica .publica-productos,
.pagina-publica .ofertas-trilho{grid-template-columns:repeat(3,minmax(130px,1fr));overflow-x:auto}
.pagina-publica .publica-productos article,
.pagina-publica .oferta-cartao{min-height:160px}
.pagina-publica .lista-mensajes{max-height:220px}
.pagina-publica.camera-comercial-ativa .sala-publica-layout{grid-template-columns:1fr}
.pagina-publica .video-comercial{min-height:330px}
/* Câmera ao vivo: no celular a tela com a câmera (ofertas) sobe pra
   primeiro lugar, depois o catálogo, depois o chat por último. */
.pagina-publica.camera-comercial-ativa .publica-ofertas{order:-2}
.pagina-publica.camera-comercial-ativa .publica-catalogo{order:-1}
}
@media(max-width:430px){.pagina-publica .publica-paineis-principais{gap:0}
.pagina-publica .publica-bloque>header{min-height:41px;padding-inline:11px}
.pagina-publica .publica-bloque>header strong{font-size:12px}
.pagina-publica .publica-productos,
.pagina-publica .ofertas-trilho{grid-template-columns:repeat(3,118px);gap:8px;padding:9px}
.pagina-publica .publica-productos article,
.pagina-publica .oferta-cartao{min-height:145px}
.pagina-publica .publica-chat-panel{min-height:240px}
.pagina-publica .lista-mensajes{max-height:180px;padding:9px}
}
.pagina-publica .publica-chat-acoes{display:flex;gap:6px;margin-bottom:7px}
.pagina-publica .publica-chat-acoes button{display:grid;width:30px;height:30px;place-items:center;border:1px solid #ffffff1c;border-radius:8px;background:#112116;color:#dfffd6;font-size:14px;cursor:pointer}
.pagina-publica .publica-chat-acoes button:hover,
.pagina-publica .publica-chat-acoes button:focus-visible{border-color:#79ee57;background:#1d4a22;outline:none}
.pagina-publica .marca-propietario-publica[hidden]{display:none!important}
.pagina-publica .publica-catalogo>header.sem-titulo,
.pagina-publica .publica-ofertas>header.sem-titulo{display:none}
.pagina-publica .publica-catalogo>header.sem-titulo+.catalogo-pergaminho{height:100%}
.pagina-publica .publica-ofertas:has(>header.sem-titulo){grid-template-rows:minmax(0,1fr)}
.pagina-publica .publica-ofertas:has(>header.sem-titulo) .ofertas-trilho{grid-row:1}
.pagina-publica .publica-ofertas:has(>header.sem-titulo) .produto-escolhido{display:none!important}
.pagina-publica .carrinho-miniatura{position:relative;display:grid;width:42px;height:42px;place-items:center;border:1px solid #55c90066;border-radius:50%;background:#102014;color:#eaffdf;font-size:17px;cursor:pointer;border-color:rgba(143,255,103,.38);background:linear-gradient(160deg, rgba(85,201,0,.16), rgba(16,32,20,.9));box-shadow:0 4px 14px rgba(85,201,0,.16);transition:transform .15s ease, box-shadow .15s ease}
.pagina-publica .carrinho-miniatura b{position:absolute;top:-4px;right:-5px;display:grid;min-width:17px;height:17px;place-items:center;border-radius:50%;background:#55c900;color:#061000;font-size:10px}
/* o dono: o carrinho tem que ficar livre, sem essa caixa/círculo escuro
   por trás — o botão do carrinho da cabeceira (#abrir-carrinho-publico)
   é sempre assim, desktop e celular, dentro ou fora do modo compacto do
   chat. O botão flutuante do staff (#publica-staff-abrir) continua com
   a caixa normal — esse SIM precisa se destacar por cima do conteúdo. */
.pagina-publica #abrir-carrinho-publico.carrinho-miniatura{
    display:flex;align-items:center;justify-content:flex-start;
    width:auto;height:auto;
    border:none;border-radius:8px;background:transparent;box-shadow:none;
    padding:4px 8px;gap:5px;
}
.pagina-publica #abrir-carrinho-publico.carrinho-miniatura:hover{
    transform:none;background:rgba(143,255,103,.14);box-shadow:none;
}
.pagina-publica #abrir-carrinho-publico.carrinho-miniatura b{
    position:static;min-width:0;height:auto;border-radius:0;
    background:transparent;color:#9dff70;font-size:11px;font-weight:900;
}
.pagina-publica .publica-controles-sistema{display:flex;align-items:center;gap:16px;margin-left:auto!important;margin-right:42px;justify-content:flex-end;flex:none}
/* No celular o wrapper novo (.publica-painel-direito, ronda 3) fica
   "invisível" pro layout (display:contents) — Ofertas continua exatamente
   como um item direto do grid mobile de sempre (nunca ficou escondida em
   celular), Lançamentos continua escondida pela regra de @media
   max-width:850px já existente. Só em telas largas (abaixo) o wrapper
   vira uma coluna flex de verdade, fundindo as duas numa caixa só. */
.pagina-publica .publica-painel-direito{display:contents}
/* Ícone de curtir da caixa de Vídeos (pedido real do dono, 2026-09-14) —
   fica fora de qualquer @media de propósito, pra valer tanto no mobile
   quanto no desktop (bug real encontrado: uma versão anterior desta
   regra ficou presa dentro do @media(min-width:851px) abaixo, nunca
   aparecia no celular). top:44px (não 6px) porque no modo "foto de
   fallback" (catálogo escasso) o próprio card já tem o ícone de câmera
   nesse canto — empilha embaixo dele em vez de sobrepor. */
.pagina-publica .videos-publicidade-curtir{position:absolute;top:44px;right:6px;z-index:5;display:grid;place-items:center;width:28px;height:28px;border:0;background:transparent;color:#fff;cursor:pointer;filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));transition:transform .15s ease,color .15s ease}
.pagina-publica .videos-publicidade-curtir svg{width:16px;height:16px}
.pagina-publica .videos-publicidade-curtir:hover{transform:scale(1.12)}
.pagina-publica .videos-publicidade-curtir[aria-pressed="true"]{color:#55c900}
@media(min-width:851px){.pagina-publica .sala-publica-layout{grid-template-columns:minmax(170px,1fr) minmax(0,1.3fr) minmax(170px,1fr);grid-template-rows:0.78fr 1fr;gap:0;flex:1 1 auto;min-height:0;max-height:none}
.pagina-publica .publica-bloque>header strong{font-size:16px;letter-spacing:.035em;transition:transform .25s ease,color .25s ease}
.pagina-publica .publica-bloque>header strong[data-effect="pulse"]{animation:titulo-vitrine-brilho 2.8s ease-in-out infinite}
.pagina-publica .publica-bloque>header strong[data-effect="slide"]{animation:titulo-vitrine-deslizar 4s ease-in-out infinite}
/* Rediseño de 6 caixas ao redor do chat (pedido real do dono, 2026-09-04) —
   o wrapper vira "invisível" pro grid (display:contents), assim catálogo e
   ofertas passam a ser peças diretas da grade de 3 colunas × 2 linhas
   abaixo, sem precisar mudar a ordem real do HTML. Nunca toca o celular —
   tudo isto fica dentro deste mesmo media query de telas largas. */
.pagina-publica .publica-paineis-principais{display:contents}
.pagina-publica .publica-catalogo{grid-column:1;grid-row:1}
.pagina-publica .publica-catalogo-secundario{grid-column:1;grid-row:2;display:flex!important}
.pagina-publica .publica-videos-publicidade{grid-column:2;grid-row:1;display:flex!important}
.pagina-publica .publica-chat-panel{grid-column:2;grid-row:2}
.pagina-publica .publica-caixa-vazia{display:none!important}
/* Ronda 3 (pedido real do dono, mesmo dia): Lançamentos + Ofertas deixam
   de ser 2 peças separadas da grade e viram UMA caixa grande só, que
   ocupa as 2 linhas da coluna 3 (mesmo alto total da coluna esquerda) —
   "una sola pantalla grande... arriba lanzamientos, abajo ofertas". O
   wrapper (.publica-painel-direito) é quem vira a peça real da grade e
   quem leva a moldura visual (borda/fundo já vem de .publica-bloque, na
   classe dele); Lançamentos e Ofertas continuam com a classe
   .publica-bloque no HTML (não pode sair — os títulos das caixas
   dependem dela pra cor/tamanho, ver .publica-bloque>header strong
   ~linha 243), só têm a moldura própria anulada aqui dentro pra não
   duplicar borda, e uma linha fina separa as duas partes. Nada do
   conteúdo interno de Ofertas (câmera ao vivo, palco do diretor) foi
   tocado — só o wrapper ao redor. */
.pagina-publica .publica-painel-direito{grid-column:3;grid-row:1 / span 2;display:flex!important;flex-direction:column;min-height:0}
.pagina-publica .publica-painel-direito>.publica-lancamentos{display:flex!important;flex:0 0 auto;max-height:52%;border:0;border-radius:0;background:transparent;box-shadow:none;border-bottom:1px solid #294d2f}
.pagina-publica .publica-painel-direito>.publica-ofertas{flex:1 1 auto;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none}
/* Bug real (2026-09-07, auditoria dos agentes): o "display:flex!important"
   acima é necessário pra caixa aparecer normalmente, mas isso também
   IGNORAVA o estado vazio — a sala de produtos escassos (menos de 2
   lançamentos, catálogo secundário sem produtos) mostrava a caixa
   mesmo sem nada real dentro. O mobile já tinha esse cuidado (ver
   @media(max-width:850px) mais abaixo), o desktop nunca teve. Mais uma
   classe (".publica-caixa-vazia") na combinação vence por especificidade
   só quando a caixa está de fato vazia. */
.pagina-publica .publica-painel-direito>.publica-lancamentos.publica-caixa-vazia,
.pagina-publica .publica-catalogo-secundario.publica-caixa-vazia{display:none!important}
/* Pedido real do dono, mesmo dia: em telas largas, uma caixa com mais de
   6 produtos (sem data-mosaico, ver regra base ~linha 933) caía no rolo
   HORIZONTAL antigo (3 linhas fixas de 150px, rolando pro lado) — numa
   loja real com um catálogo grande isso ficava "colapsado"/apertado,
   pouco profissional. Aqui vira um rolo VERTICAL de verdade: a roda do
   mouse desce a lista, cada caixa rola só a si mesma (nunca a página
   inteira, nunca o chat, que mantém seu tamanho fixo), e o título no
   topo nunca sai da vista porque o cabeçalho já é flex:0 0 auto (ver
   .publica-bloque{display:flex;flex-direction:column} ~linha 2313) —
   só o conteúdo abaixo dele rola. As setinhas (mesmo mecanismo de
   .catalogo-flecha já usado em Ofertas) continuam funcionando, agora
   deslizando pra cima/baixo em vez de pros lados. Nunca toca o celular
   — o padrão de arrastar com o dedo ali continua intencionalmente
   horizontal (ver comentário na regra de @media max-width:720px). */
.pagina-publica .catalogo-pergaminho .publica-productos:not([data-mosaico]){
    grid-auto-flow:row!important;
    /* Segunda correção real (2026-09-14, o dono insistiu — a primeira
       versão desta regra usava "contain" com fundo escuro, e isso criava
       exatamente as "rayas"/"bordes negros" que ele reclamou: quando a
       proporção da foto não batia com a célula, sobrava tarja escura dos
       lados. Agora cada linha do grid ocupa 100% da altura visível da
       caixa (nunca mais um valor fixo em px que podia sobrar meia linha
       cortada embaixo) — assim SEMPRE aparece exatamente 1 linha (2
       fotos) inteira por vez, preenchendo 100% do quadro, sem nenhuma
       tarja: object-fit:cover (ver a regra do article/imagem abaixo)
       cobre a célula toda, nunca deixa fundo aparecer. */
    grid-template-columns:repeat(2,1fr)!important;
    gap:0!important;
    padding:0!important;
    /* grid-auto-rows é calculado e aplicado ao vivo em px via JS
       (trimGridToWholeRows, commercialRoom.js) — "100%" aqui não resolve
       de verdade dentro de um contêiner com scroll (sem !important, pra
       nunca vencer o valor inline calculado). */
    grid-auto-rows:100%;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    /* Sem barra de rolagem visível reservando espaço — senão a altura
       "disponível" medida em JS (antes da barra aparecer) fica maior que
       a altura real depois que ela some com o espaço, sobrando um
       pedacinho da próxima linha espiando embaixo. */
    scrollbar-width:none!important;
    /* O bug antigo de "arrastar pra baixo e voltar pro topo" (2026-09-14)
       era porque os alvos de snap (article) viviam 2 níveis dentro de
       .catalogo-categoria-linha, nunca filhos diretos de verdade — desde
       que o catálogo parou de agrupar por categoria (pedido do dono, mesmo
       dia), article É o filho direto real, então o snap volta a fazer
       sentido. O dono pediu explicitamente: arrastar/rolar TEM que sempre
       parar numa linha completa (2 fotos inteiras, nunca duas linhas
       diferentes pela metade cada) — "mandatory" garante isso pra
       qualquer forma de rolar (arrastar, roda do mouse), não só pras
       setinhas/rotação automática (que já paravam certo via JS). */
    scroll-snap-type:y mandatory!important;
}
.pagina-publica .catalogo-pergaminho .publica-productos:not([data-mosaico])::-webkit-scrollbar{display:none}
.pagina-publica .catalogo-pergaminho .publica-productos:not([data-mosaico]) article{
    scroll-snap-align:start;
    height:100%!important;
    min-height:0!important;
    width:100%!important;
    /* Pedido real do dono (2026-09-14): "sin bordes... divídelo en dos"
       — o cartão base (.catalogo-pergaminho .publica-productos article,
       ~linha 243) tem borda branca sutil + cantos redondos + sombra, o
       que criava uma moldura visível ao redor de cada foto. Aqui a foto
       vai literalmente de ponta a ponta da célula, sem nenhuma moldura —
       só a imagem e o nome flutuando por cima dela (gaba3-price-lettering,
       já sem fundo sólido, só um degradê pra dar contraste ao texto). */
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
}
.pagina-publica .catalogo-pergaminho .publica-productos:not([data-mosaico]) article .imagem-catalogo-produto{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
}
/* Pedido real do dono (2026-09-14): "nada de cintas... líneas negras...
   pura imagen" — o degradê escuro embaixo do nome/preço (pensado pra
   dar contraste, ver .gaba3-price-lettering) ainda lia como uma faixa
   escura sobre a foto. Aqui vira 100% transparente — a legibilidade
   passa a vir só de um text-shadow forte nas próprias letras. */
.pagina-publica .catalogo-pergaminho .publica-productos:not([data-mosaico]) article .gaba3-price-lettering{
    background:none!important;
    max-height:none!important;
}
.pagina-publica .catalogo-pergaminho .publica-productos:not([data-mosaico]) article .gaba3-letter-name,
.pagina-publica .catalogo-pergaminho .publica-productos:not([data-mosaico]) article .gaba3-letter-price{
    text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.8)!important;
}
/* Caixa de vídeos de publicidade (ronda 3, substitui "Destaques") — um
   vídeo por vez, mudo/loop, com setinhas pra trocar manualmente (mesmo
   componente .catalogo-flecha, só left/right, não faz sentido cima/baixo
   pra um vídeo só). */
.pagina-publica .videos-publicidade-pergaminho{position:relative;display:flex;height:100%;background:#050a06}
.pagina-publica .publica-video-publicidade{width:100%;height:100%;object-fit:cover;background:#050a06}
.pagina-publica .videos-publicidade-pergaminho .ofertas-dots{position:absolute;left:0;right:0;bottom:8px;z-index:4}
/* Convite pro dono publicar (ronda 6, pedido real: "tiene que quedar ahí
   marcado" — sem isso a caixa some por inteiro e o dono nunca sabe que
   esse espaço existe). Só o dono vê isto — pro visitante, sem vídeo real
   publicado, a caixa continua escondida como sempre. */
.pagina-publica .publica-video-vazio{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;border:1.5px dashed rgba(143,255,103,.35);border-radius:10px;margin:8px}
.pagina-publica .publica-video-vazio span{font-size:26px;color:#8fff67;opacity:.8}
.pagina-publica .publica-video-vazio p{margin:0;max-width:260px;font-size:12px;color:#c9ddc4;line-height:1.4}
/* Modo catálogo escasso (2026-09-07): a foto de produto reservada pra
   esta caixa preenche 100% do espaço, igual a um cartão de
   data-mosaico="1" — mesma sensação visual de "foto grande", só que
   aqui em cima do chat em vez de dentro do catálogo. */
.pagina-publica .publica-video-publicidade-imagem{position:absolute;inset:0;z-index:1}
.pagina-publica .publica-video-publicidade-imagem article{position:absolute;inset:0;width:100%;height:100%;border-radius:0;border:0}
/* Pedido real do dono (2026-09-14): "nada de bordes negros, pantalla
   completa" — volta a ser "cover" (preenche a caixa toda, sem tarja
   nenhuma dos lados). A versão "contain" (2026-09-14, correção
   anterior) existia porque nessa altura mais baixa de antes um recorte
   cover podia cair numa faixa escura da foto — a caixa ficou mais alta
   desde então (fileira de cima virou 0.78fr), o recorte não cai mais
   nessa faixa. Se aparecer de novo com outra foto real, ajustar
   object-position em vez de voltar pro "contain" (que é exatamente a
   tarja que o dono não quer). */
.pagina-publica .publica-video-publicidade-imagem .imagem-catalogo-produto{object-fit:cover;background:#050a06}
/* Mesmo pedido já aplicado no Catálogo/Mais produtos: nada de faixa
   escura embaixo do nome/preço, só a foto — legibilidade via
   text-shadow nas próprias letras. */
.pagina-publica .publica-video-publicidade-imagem .gaba3-price-lettering{background:none!important;max-height:none!important}
.pagina-publica .publica-video-publicidade-imagem .gaba3-letter-name,
.pagina-publica .publica-video-publicidade-imagem .gaba3-letter-price{text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.8)!important}
}
/* Bug real de auditoria (2026-09-14): este bloco existia antes só DENTRO
   do @media(min-width:851px) acima — uma contradição impossível (nunca
   851px+ E 850px- ao mesmo tempo), então nunca valia em celular nenhum.
   A caixa de Vídeos ficava com altura zero e a foto nunca aparecia no
   mobile. Reposicionado aqui, fora do bloco de telas largas, pra valer
   de verdade. object-fit:contain pelo mesmo motivo da versão desktop
   (ver comentário ~linha 712): essa caixa é bem baixa/larga, um recorte
   "cover" centralizado pode cair numa faixa escura da foto e a imagem
   parece ter sumido. */
@media(max-width:850px){
    .pagina-publica .publica-video-publicidade-imagem{position:absolute!important;inset:0!important;z-index:1}
    .pagina-publica .publica-video-publicidade-imagem article{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border-radius:0!important;border:0!important}
    /* Pedido real do dono (2026-09-14): "esos bordes negros... sea en
       el móvil" — volta pra cover (a versão "contain" com fundo escuro
       criava as barras). Testar visualmente antes de fechar — se essa
       foto real cair numa faixa escura nessa proporção, ajustar
       object-position em vez de voltar pro "contain". */
    .pagina-publica .publica-video-publicidade-imagem .imagem-catalogo-produto{object-fit:cover!important;background:#050a06}
    .pagina-publica .publica-video-publicidade-imagem .gaba3-price-lettering{background:none!important;max-height:none!important}
    .pagina-publica .publica-video-publicidade-imagem .gaba3-letter-name,
    .pagina-publica .publica-video-publicidade-imagem .gaba3-letter-price{text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.8)!important}
}
/* Fora da tela larga, essas 3 caixas novas têm que ficar realmente
   escondidas (hidden no HTML) — mas herdam a classe .publica-catalogo
   pra pegar visual/estrutura, e essa classe já tem uma regra mobile
   antiga (linha ~1706, dentro de @media max-width:720px) que força
   display:block!important nela mesma pra outros motivos, o que vence
   o [hidden]{display:none!important} de base por ordem de origem no
   arquivo (mesma especificidade, essa regra vem depois). Um seletor
   com 3 classes tem mais especificidade que qualquer um dos dois e
   resolve isso sem depender de onde cada regra está no arquivo — só
   entra abaixo de 851px, nunca disputa com o display:flex!important
   de telas largas acima. Bug real encontrado com captura de tela real
   no celular (2026-09-04): as caixas apareciam com produtos de verdade
   mesmo com o atributo hidden presente. */
@media(max-width:850px){
.pagina-publica .publica-catalogo.publica-catalogo-secundario{display:none!important}
/* 2026-09-08 (pedido do dono, com imagem de referência): a estrutura do
   celular muda — em vez de só o catálogo com abas em cima, agora sobem
   "Vídeos" (tela grande) e "Lançamentos" (imagens de 2 em 2, mesmo
   carrossel que já existe pra desktop), NA FRENTE do catálogo principal
   (que continua embaixo, deslizando horizontal). "Mais produtos" (acima)
   segue escondido — o catálogo principal já mostra tudo. */
.pagina-publica .publica-catalogo.publica-videos-publicidade:not(.publica-caixa-vazia),
.pagina-publica .publica-catalogo.publica-lancamentos:not(.publica-caixa-vazia){
    display:flex!important;
    min-height:0!important;
}
/* 2026-09-08 (bug real, achado testando comércio de 1 produto só): quando
   Vídeos/Lançamentos ficam vazios (.publica-caixa-vazia), a regra acima
   não bate mais (é :not(...)) — mas a regra genérica ".publica-catalogo
   {display:flex!important}" (mais abaixo, dentro de @media max-width:720px)
   ainda bate, então a caixa aparecia vazia, só com o título, em vez de
   sumir de vez como o atributo "hidden" do HTML já pedia. Precisa de mais
   especificidade que essa regra genérica pra vencer de verdade. */
.pagina-publica.pagina-sala .publica-catalogo.publica-videos-publicidade.publica-caixa-vazia,
.pagina-publica.pagina-sala .publica-catalogo.publica-lancamentos.publica-caixa-vazia{
    display:none!important;
}
/* 2026-09-08 (pedido do dono, segunda rodada): a pantalla PRINCIPAL do
   celular não é o vídeo, são as OFERTAS — é o que realmente vende. O
   vídeo (se existir) vira uma caixa secundária, do mesmo tamanho das
   outras (Lançamentos) — nunca mais a tela grande de cima. Ofertas já
   tinha carrossel automático + arrastável de verdade (startProductRotation,
   ofertas-trilho) — só precisava virar a caixa principal aqui. */
.pagina-publica.pagina-sala[data-vista-comercio="catalogo"] .publica-ofertas,
.pagina-publica.pagina-sala:not([data-vista-comercio]) .publica-ofertas{
    display:grid!important;
}
.pagina-publica.pagina-sala .publica-ofertas{order:-4!important;height:46vh!important;max-height:320px!important;min-height:0!important}
/* 2026-09-08 (o dono: "está muy cuadrada, tiene que ser más angosta") —
   320px numa tela de 374px de largura ficava quase quadrado. Uma faixa
   de vídeo de verdade é bem mais baixa que larga (perto de 16:9); 208px
   numa largura de tela típica de celular já fica nessa proporção. */
.pagina-publica.pagina-sala .publica-videos-publicidade.publica-catalogo{order:-3!important;flex:0 0 208px!important;height:208px!important;max-height:208px!important;min-height:208px!important;overflow:hidden!important}
.pagina-publica.pagina-sala .publica-lancamentos.publica-catalogo{order:-2!important;flex:0 0 340px!important;height:340px!important;max-height:340px!important;min-height:340px!important;overflow:hidden!important}
.pagina-publica .publica-catalogo:not(.publica-videos-publicidade):not(.publica-lancamentos):not(.publica-catalogo-secundario){order:-1!important}
/* o dono (2026-09-08): "muestra las 4 imágenes juntas... colapsado" — no
   celular, calc(50% - 5px) (regra de desktop, linha 1278) deixa 2
   COLUNAS inteiras (4 cartões: 2 em cima, 2 embaixo) cabendo de uma vez
   na tela toda — no desktop a coluna já é bem mais estreita e só cabe
   1 coluna (2 cartões) por vez, mas no celular a tela é larga o
   bastante pra caber 2. Aqui força só 1 coluna (2 cartões, um em cima
   do outro) por vez, deslizando pra ver a próxima dupla. */
.pagina-publica.pagina-sala .publica-lancamentos .catalogo-pergaminho .publica-productos,
.pagina-publica.pagina-sala .publica-lancamentos .catalogo-pergaminho .publica-productos[data-mosaico="6"]{
    /* Bug real de auditoria (2026-09-14, o dono: "está entrando un
       pedacito de otra imagen... no tiene que haber desbordamiento") —
       os -8px deixavam a próxima dupla de cartões espiar na borda
       direita. 100% exato, sem gap nenhum sobrando pra espiar. */
    grid-auto-columns:100%!important;
    gap:0!important;
}
}
.pagina-publica .publica-titulos-form .boton-principal{grid-column:1 / -1}
.pagina-publica dialog.carrinho-publico:not([open]){display:none!important}
.pagina-publica dialog.carrinho-publico{width:min(430px,calc(100vw - 28px));max-height:calc(100vh - 28px);box-sizing:border-box;padding:21px;border:1px solid #55c90070;border-radius:16px;background:#0b130d;color:#f5fff1;box-shadow:0 24px 80px #000}
.pagina-publica dialog.carrinho-publico::backdrop{background:#010601b8;backdrop-filter:blur(5px)}
.pagina-publica .carrinho-publico>span{color:#8fff67;font-size:11px;font-weight:900;letter-spacing:.08em}
.pagina-publica .carrinho-publico h2{margin:6px 0 16px;font-size:24px}
.pagina-publica .itens-carrinho-publico{display:grid;gap:8px;min-height:75px;max-height:310px;overflow:auto;color:#b9cbb7}
.pagina-publica .itens-carrinho-publico article{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:9px;align-items:center;padding:8px;border:1px solid #ffffff13;border-radius:10px;background:#112014}
.pagina-publica .itens-carrinho-publico img{width:48px;height:48px;border-radius:7px;object-fit:cover;background:#1b2c1d}
.pagina-publica .itens-carrinho-publico b,
.pagina-publica .itens-carrinho-publico small{display:block}
.pagina-publica .itens-carrinho-publico b{font-size:13px;color:#fff}
.pagina-publica .itens-carrinho-publico small{margin-top:3px;font-size:11px;color:#a9d69c}
/* Botão de remover: ícone de lixeira + texto — mais fácil de entender
   pro cliente do que um "×" solto (que pode parecer só "fechar"). */
.pagina-publica .carrinho-item-remover{
    display:flex;
    align-items:center;
    gap:5px;
    padding:7px 10px;
    border:1px solid rgba(220,60,60,.4);
    border-radius:8px;
    background:#351617;
    color:#ffb3b3;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease;
}
.pagina-publica .carrinho-item-remover:hover{background:#4a1c1d;border-color:rgba(220,60,60,.7)}
@media(max-width:420px){
    .pagina-publica .carrinho-item-remover span{display:none}
    .pagina-publica .carrinho-item-remover{padding:7px;border-radius:50%}
}
.pagina-publica .carrinho-publico footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:15px;padding-top:13px;border-top:1px solid #ffffff18}
.pagina-publica .carrinho-publico footer strong{display:grid;gap:3px;font-size:12px}
.pagina-publica .carrinho-publico footer strong b{color:#8fff67;font-size:18px}
.pagina-publica .carrinho-publico footer .boton-principal{min-height:38px;padding:0 16px;border:0;border-radius:8px;background:#55c900;color:#071000;font-weight:900;cursor:pointer}
.pagina-publica .carrinho-publico footer .boton-principal:disabled{opacity:.55;cursor:default}
.pagina-publica .carrinho-acoes{display:flex;gap:8px;align-items:center}
.pagina-publica .carrinho-publico footer .boton-secundario{min-height:38px;padding:0 12px;border:1px solid #ffffff2a;border-radius:8px;background:transparent;color:#cfe8ce;font-weight:800;cursor:pointer}
/* Botão "Suporte técnico/legal" do painel do dono (2026-09-08, pedido de
   o dono): herdava o estilo genérico .boton-secundario (pílula azul cheia,
   46px de alto, ocupando a largura toda) — grande demais perto dos
   outros itens do painel (Meus agentes, Guia da sala). Só o ícone e a
   letra, discreto, do tamanho dos outros botões secundários do painel. */
.pagina-publica #publica-abrir-suporte{
    min-height:34px;
    width:auto;
    padding:0 12px;
    border-color:rgba(255,255,255,.16);
    border-radius:9px;
    background:transparent;
    color:#cfe8ce;
    font-size:12px;
    font-weight:700;
}
.pagina-publica #publica-abrir-suporte:hover{background:rgba(255,255,255,.06)}
.pagina-publica .carrinho-publico footer .boton-secundario:hover{background:#ffffff10}
.pagina-publica .carrinho-status-pedido{margin:10px 0 0;padding:9px 11px;border-radius:9px;font-size:12.5px;line-height:1.4}
.pagina-publica .carrinho-status-pedido[data-tipo="ok"]{background:#123018;border:1px solid #55c90055;color:#c8ffbc}
.pagina-publica .carrinho-status-pedido[data-tipo="erro"]{background:#301212;border:1px solid #ff555555;color:#ffcfcf}
@media(max-width:600px){.pagina-publica .carrinho-miniatura{width:38px;height:38px}
.pagina-publica .publica-titulos-form .boton-principal{grid-column:auto}
}
.pagina-publica .carrinho-publico .fechar-configuracao-publica{position:absolute;top:11px;right:11px;width:34px;height:34px;border:1px solid #ffffff22;border-radius:50%;background:#152017;color:#fff;font-size:22px;cursor:pointer}
.pagina-publica .perfil-miniatura{display:flex!important;align-items:center;justify-content:center;gap:0;width:auto!important;min-width:58px;height:42px!important;padding:0 10px 0 4px!important;border-radius:21px!important;background:linear-gradient(135deg,#55c900,#217e16)!important;color:#fff!important;box-shadow:0 4px 14px rgba(85,201,0,.22);transition:transform .15s ease, box-shadow .15s ease;cursor:pointer;pointer-events:auto;z-index:20;position:relative}
.pagina-publica .perfil-miniatura[hidden]{display:none!important}
.pagina-publica .perfil-miniatura span{display:grid;width:29px;height:29px;place-items:center;border-radius:50%;background:#ed8d68;color:#fff;font-size:11px;font-weight:900;flex:none}
/* Foto do dono da sala (redondinho) separada do ícone de configuração
   (as três rayitas) — pedido do dono (2026-09-08): "estirarlo un poco
   para que se vea más independiente". Zona própria com divisória fina
   e mais respiro, em vez do glifo pequeno colado no avatar. */
.pagina-publica .perfil-miniatura i{font-style:normal;font-size:17px;line-height:1;display:grid;place-items:center;flex:none;width:26px;height:100%;margin-left:6px;padding-left:8px;border-left:1px solid rgba(255,255,255,.3)}
.pagina-publica .badge-propostas-agentes{position:absolute;top:-4px;right:-5px;display:grid;min-width:17px;height:17px;place-items:center;border-radius:50%;background:#ff8a3d;color:#1a0900;font-size:10px;font-weight:900;box-shadow:0 0 0 2px #0c1710}
.pagina-publica .badge-propostas-agentes[hidden]{display:none!important}
/* Bolita do visitante (2026-09-08, pedido do dono): só a identidade do
   negócio, sem as três rayitas — quem não é dono nunca vê o controle
   de configuração, só a foto. */
.pagina-publica .publica-visitante-avatar{display:grid!important;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#55c900,#217e16);background-size:cover;background-position:center;box-shadow:0 4px 14px rgba(85,201,0,.22);color:#fff;font-size:12px;font-weight:900}
.pagina-publica .publica-visitante-avatar[hidden]{display:none!important}
@media(max-width:600px){.pagina-publica .publica-visitante-avatar{width:38px!important;height:38px!important}}
/* o dono: as três rayitas (menu) têm que ficar livres, sem nada em cima —
   essa bolita laranja de propostas pendentes tapava o ícone. O dado
   continua existindo (visível dentro do próprio painel "Meus agentes"),
   só a bolita por cima do ícone some — desktop e celular. */
.pagina-publica #contador-propostas-agentes{display:none!important}
.pagina-publica .publica-catalogo,
.pagina-publica .publica-ofertas{position:relative;display:block}
.pagina-publica .catalogo-pergaminho,
.pagina-publica .publica-ofertas .ofertas-trilho{height:100%!important}
.pagina-publica .publica-catalogo>header:not(.sem-titulo),
.pagina-publica .publica-ofertas>header:not(.sem-titulo){position:absolute;z-index:4;display:flex;min-height:0;padding:9px 12px;border:0;border-radius:0 0 10px 0;background:linear-gradient(90deg,#061207ec,#0612077a,transparent);pointer-events:none;min-width:min(72%,470px);max-width:82%;padding:13px 18px;background:linear-gradient(90deg,#061207f7,#0a2314e6,#0a231466);box-shadow:0 8px 22px #0007}
.pagina-publica .publica-catalogo>header:not(.sem-titulo) strong,
.pagina-publica .publica-ofertas>header:not(.sem-titulo) strong{font-size:clamp(16px,1.5vw,25px);text-transform:none;pointer-events:auto;max-width:100%;font-size:clamp(20px,2vw,32px);line-height:1.12;white-space:normal;text-wrap:balance;text-shadow:0 2px 10px #000}
.pagina-publica .publica-catalogo>header:not(.sem-titulo) .botao-menu-painel,
.pagina-publica .publica-ofertas>header:not(.sem-titulo) .botao-menu-painel{display:none!important}
.pagina-publica [data-title-position="top-left"]>header{top:0;left:0}
.pagina-publica [data-title-position="top-center"]>header{top:0;left:50%;transform:translateX(-50%);border-radius:0 0 10px 10px!important}
.pagina-publica [data-title-position="top-right"]>header{top:0;right:0;left:auto;border-radius:0 0 0 10px!important}
.pagina-publica [data-title-position="bottom-left"]>header{bottom:0;left:0;top:auto;border-radius:0 10px 0 0!important}
.pagina-publica [data-title-position="bottom-center"]>header{bottom:0;left:50%;top:auto;transform:translateX(-50%);border-radius:10px 10px 0 0!important}
.pagina-publica [data-title-position="bottom-right"]>header{right:0;bottom:0;left:auto;top:auto;border-radius:10px 0 0 0!important}
@media(max-width:600px){
.pagina-publica .perfil-miniatura{height:38px!important}
}
.pagina-publica .publica-reacoes-rapidas{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.pagina-publica .publica-reacoes-rapidas[hidden]{display:none!important}
.pagina-publica .publica-reacoes-rapidas button{width:29px;height:29px;padding:0;border:1px solid #ffffff1c;border-radius:7px;background:#102015;cursor:pointer}
@media(min-width:851px){
/* Sala inteira cabe numa tela só — body vira coluna flex (cabeçalho,
   depois a sala, depois a fita), a sala ocupa só o espaço que sobra.
   Assim não depende de adivinhar a altura do cabeçalho/rodapé em px. */
body.pagina-sala.pagina-publica{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
.pagina-publica .publica-footer{flex:0 0 auto}
.pagina-publica .publica-paineis-principais,
.pagina-publica .publica-chat-panel{min-height:0;max-height:none;height:100%}
.pagina-publica .publica-catalogo,
.pagina-publica .publica-ofertas,
.pagina-publica .publica-chat-panel>section{height:100%}
.pagina-publica .publica-chat-panel>section{min-height:0}
.pagina-publica .lista-mensajes{max-height:none}
}
.pagina-publica .publica-titulos-form{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:600px){.pagina-publica .publica-titulos-form{grid-template-columns:1fr}
}
.pagina-publica .publica-cabecera h1{font-family:var(--brand-font,system-ui);font-size:var(--brand-size,20px)!important;font-weight:var(--brand-weight,800);line-height:1.1}
.pagina-publica .publica-cabecera[data-brand-animation="pulse"] h1{animation:titulo-vitrine-brilho 2.8s ease-in-out infinite}
.pagina-publica .publica-cabecera[data-brand-animation="glow"] h1{animation:titulo-vitrine-brilho 1.8s ease-in-out infinite}
.pagina-publica .publica-cabecera[data-brand-animation="slide"] h1{animation:titulo-vitrine-deslizar 4s ease-in-out infinite}
.pagina-publica .lista-mensajes audio{display:block;width:100%;height:32px;margin-top:5px}
.pagina-publica .anexo-chat-imagem{display:block;max-width:100%;max-height:150px;margin-top:5px;border-radius:7px;object-fit:cover}
.pagina-publica .lista-mensajes article audio{display:block;width:100%;max-width:260px;height:34px;margin-top:5px}
.pagina-publica .marca-negocio{width:42px;height:42px;border-radius:11px;font-size:14px;box-shadow:0 0 0 1px rgba(143,255,103,.22), 0 6px 18px rgba(85,201,0,.22)}
@media(max-width:600px){
.pagina-publica .marca-negocio{width:30px;height:30px;border-radius:9px;font-size:11px}
.pagina-publica .publica-cabecera{min-height:40px}
}
.pagina-publica .estado-produto{min-height:15px;color:#9ef080;font-size:10px;font-weight:750}
.pagina-publica .publica-cabecera .marca-propietario-publica small{font-size:var(--brand-subtitle-size,10px)!important;line-height:1.15}
.pagina-publica .gestao-imagens-telas{display:grid;gap:9px;margin-top:14px;padding-top:13px;border-top:1px solid #ffffff18}
.pagina-publica .gestao-imagens-cabecalho{display:grid;gap:3px}
.pagina-publica .gestao-imagens-cabecalho b{color:#efffe9;font-size:12px}
.pagina-publica .gestao-imagens-cabecalho small{font-size:10px;color:#9eb89a}
.pagina-publica .listas-imagens-telas{display:grid;gap:8px}
.pagina-publica .listas-imagens-telas>section{padding:9px;border:1px solid #ffffff17;border-radius:10px;background:#0d1710}
.pagina-publica .listas-imagens-telas>section>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.pagina-publica .listas-imagens-telas>section>header strong{color:#dfffd6;font-size:11px}
.pagina-publica .listas-imagens-telas>section>header small{color:#8fff67;font-size:10px;font-weight:850}
.pagina-publica .lista-imagens-tela{display:grid;gap:6px;max-height:184px;margin:0;padding:0;overflow:auto;list-style:none}
.pagina-publica .item-imagem-tela{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:7px;align-items:center;padding:5px;border-radius:7px;background:#142017}
.pagina-publica .miniatura-imagem-tela{width:34px;height:34px;border-radius:5px;object-fit:cover;background:#203324}
.pagina-publica .item-imagem-tela b,
.pagina-publica .item-imagem-tela small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pagina-publica .item-imagem-tela b{color:#fff;font-size:10px}
.pagina-publica .item-imagem-tela small{margin-top:2px;color:#a7c6a1;font-size:9px}
.pagina-publica .remover-imagem-tela{min-height:29px;padding:0 8px;border:1px solid #8b4e4e;border-radius:6px;background:#32191a;color:#ffe0e0;font-size:9px;font-weight:850;cursor:pointer}
.pagina-publica .remover-imagem-tela:hover,
.pagina-publica .remover-imagem-tela:focus-visible{background:#5a2527;outline:none}
.pagina-publica .lista-imagens-vazia{padding:7px;border:1px dashed #ffffff1c;border-radius:6px;color:#8da48b;font-size:10px;text-align:center}
@media(max-width:850px){.pagina-publica .publica-ofertas .ofertas-trilho{grid-auto-columns:minmax(155px,72%)}
}
@media(max-width:430px){.pagina-publica .publica-ofertas .ofertas-trilho{grid-auto-columns:78%}
}
.pagina-sala .publica-cabecera:has(.gaba3-header-back){
    display:flex;
    align-items:center;
    gap:10px;
}
@media(max-width:720px){.pagina-sala .publica-cabecera{min-height:52px!important;flex-wrap:wrap!important;padding-top:calc(5px + env(safe-area-inset-top,0px))!important;padding-right:12px!important;padding-bottom:4px!important;padding-left:12px!important;gap:3px!important}
.pagina-sala .publica-paineis-principais{grid-template-columns:1fr!important;gap:0!important}
.pagina-sala .publica-catalogo{border-right:1px solid #294d2f!important;border-radius:14px 14px 0 0!important}
.pagina-sala .publica-ofertas{border-left:0!important;border-top:1px solid #caa23c!important;border-right:1px solid #294d2f!important;border-radius:0!important}
.pagina-sala .publica-chat-panel{border-left:0!important;border-top:1px solid #caa23c!important;border-radius:0 0 14px 14px!important;min-height:300px!important}
.pagina-sala .publica-bloque header{padding:10px 12px!important}
/* Bug real de auditoria (2026-09-14, o dono: "está entrando un pedacito
   de otra imagen... no tiene que haber desbordamiento"): esta regra
   antiga (grid horizontal por coluna, 130px fixos) é de antes do
   sistema de mosaico/grade atual — com a largura real da tela quase
   nunca é múltiplo exato de 130px, sobrava uma coluna cortada
   espiando na borda direita. Volta a ser um grid vertical de 2
   colunas iguais (mesmo padrão já usado no resto da sala), sem coluna
   nenhuma cortada. */
.pagina-sala .catalogo-pergaminho .publica-productos{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-flow:row!important;grid-template-rows:none!important;grid-auto-columns:auto!important;gap:0!important;padding:0!important}
.pagina-sala .publica-productos article{min-height:142px!important}
/* Bug real de auditoria (2026-09-13): margin-right:42px (linha ~605) é da
   versão de escritório — sobrava sem uso nenhum no celular, e era
   exatamente esse espaço que faltava pro nome do negócio (ficava "P…").
   Zerado só aqui dentro do celular. */
.pagina-sala .publica-controles-sistema{gap:6px!important;flex:0 0 auto!important;margin-right:0!important}
/* Bug real de auditoria (2026-09-13, celular): o limite de "max-width:36%"
   é coisa da versão de escritório (linha ~131), pensado pra quando ainda
   sobra bastante espaço ao lado. No celular, com o carrinho+engrenagem+
   Seguir todos comprimidos na mesma fileira (2026-09-08), esse teto de 36%
   sobrava só uns 30px reais pro nome — o negócio truncava pra "P…". Sem
   teto nenhum aqui: o nome usa TODO o espaço que sobra depois dos
   controles de largura fixa ao lado. */
.pagina-sala .marca-propietario-publica{flex:1 1 0!important;min-width:0!important;max-width:none!important}
.pagina-sala .publica-identidad-bloque{flex:1 1 0!important;min-width:0!important}
.pagina-sala .publica-nombre-row{flex-wrap:wrap!important}
.pagina-sala .perfil-miniatura span{display:none!important}
/* Uma linha só: lupa/mic à esquerda, Início/Catálogo/Ofertas/Entrega
   coladinho na direita — antes eram duas linhas separadas (uma só pra
   busca, outra só pro menu), ocupando altura à toa. O span invisível
   (.publica-quiebre-movil) força a quebra de linha bem aqui — sem ele,
   a lupa/mic caberiam na primeira linha (junto do carrinho/perfil) e
   subiam pra lá, já que sobra espaço ali. */
.publica-quiebre-movil{display:none}
.pagina-sala .publica-quiebre-movil{display:block!important;order:2;flex-basis:100%!important;height:0}
/* utilidades (lupa/mic) usa margin-left:auto pra grudar já junto do nav
   — antes o nav ocupava flex:1 (toda a largura restante) e ficava com
   o conteúdo alinhado à direita dentro da própria caixa, deixando um
   vão vazio enorme ENTRE a lupa e "Início" mesmo os dois já estando
   "juntos" tecnicamente. Sem o flex:1 no nav, a lupa fica coladinha. */
/* Buscador some da cabeceira no celular (pedido do dono, 2026-09-08, com
   imagem de referência: nenhum ícone de mic/lupa lá em cima) — a busca
   por texto continua existindo, só não fica mais nesse lugar aqui. */
.pagina-sala .publica-nav-utilidades{display:none!important}
.pagina-sala .publica-nav{order:4;flex:0 0 100%!important;justify-content:center!important;margin:0!important;padding:0!important;border-top:none!important}
.pagina-sala .publica-nav-links{overflow-x:auto!important;flex-wrap:nowrap!important;justify-content:center!important}
.pagina-sala .publica-nav a{flex:0 0 auto!important}
/* Lupa/mic no mesmo tamanho visual dos ícones do menu ao lado — nem
   menor nem maior, mesmo estilo. */
.pagina-sala .publica-busca-lupa{width:30px!important;height:30px!important}
.pagina-sala .publica-busca-lupa svg{width:17px!important;height:17px!important}
.pagina-sala .publica-ubicacion-linha .publica-nav-social{position:static!important;transform:none!important;margin-top:8px}
/* 2026-09-08 (pedido do dono, com imagem de referência): esta fileira
   (local/reputação/vendas/aberto + Seguir) sobe pra ficar logo abaixo
   do nome do negócio — antes vinha depois do nav (Início/Catálogo/...),
   longe do título. Só "Seguir" fica visível dos botões sociais; curtir/
   compartilhar/denunciar/pessoas-agora/visitas somem no celular (a
   referência só mostra "Seguir" ali). */
.pagina-sala .publica-ubicacion-linha{order:1!important;flex-wrap:wrap!important;justify-content:center!important;gap:6px;margin-top:0!important}
.pagina-sala #publica-curtir-sala,
.pagina-sala #publica-compartilhar-sala,
.pagina-sala #publica-denunciar-sala,
.pagina-sala #publica-online-agora,
.pagina-sala #publica-visitas-info{display:none!important}
/* o dono corrigiu (2026-09-08): a bolita do visitante não vai mais ali no
   canto — no lugar dela entra o próprio botão "Seguir" (o mesmo real,
   nunca duplica o botão nem sua lógica). */
.pagina-sala .publica-visitante-avatar{display:none!important}
/* 2026-09-08 (segunda rodada, pedido do dono): "Seguir" sobe pra ficar
   ao lado do carrinho, na mesma fileira de cima — antes ficava solto
   com position:absolute perto da fileira de baixo. Agora é movido de
   verdade (ver script no fim do body, só quando a tela é mobile) pra
   dentro de .publica-controles-sistema, logo depois do carrinho — este
   seletor só bate quando ele está lá dentro, então nunca afeta o
   desktop (onde o script nunca move o botão). */
.pagina-sala .publica-controles-sistema #publica-seguir-sala{
    position:static!important;
    height:32px!important;
    min-height:32px!important;
    width:auto!important;
    min-width:0!important;
    padding:0 9px!important;
    gap:3px!important;
    font-size:10.5px!important;
    border-radius:9px!important;
    background:rgba(85,201,0,.24)!important;
    white-space:nowrap!important;
}
.pagina-sala .publica-controles-sistema #publica-seguir-sala svg{width:12px!important;height:12px!important}
.pagina-sala .publica-controles-sistema #publica-seguir-sala b{font-size:10px!important}
/* Cabeçalho móvel mais enxuto (pedido do dono, "está muy grande") — a
   fileira Início/Catálogo/Ofertas/Vídeos/Entrega é o maior peso vertical
   (ícone+legenda empilhados com padding generoso); encolhe ícone/legenda/
   padding só no mobile, sem tirar nenhum item nem esconder texto. */
.pagina-sala .publica-nav a{padding:2px 6px!important;gap:0!important;font-size:9px!important}
.pagina-sala .publica-nav a svg{width:13px!important;height:13px!important}
.pagina-sala .publica-entrega-info{padding:2px 6px!important;gap:0!important;font-size:9px!important}
.pagina-sala .publica-entrega-info svg{width:13px!important;height:13px!important}
}
.publica-cabecera{position:relative}

/* ════════════════════════════════════════════════════════════════
   Cabecera (2026-08-19, ajustado 2026-08-20): a textura de madeira é
   identidade obrigatória da plataforma em TODAS as salas — nunca
   removê-la, é o que diferencia a marca ("eso es lo que nos va a
   hacer la diferencia"). A melhoria aqui é só profundidade extra em
   CIMA da madeira (brilho verde radial + reforço de contraste), não
   uma substituição. Também separa visualmente os grupos de
   pastilhas, e dá mais peso ao carrinho/perfil (ações da PESSOA) em
   relação a buscar/mic (ações de DESCOBERTA) — sem remover nenhum botão.
   ════════════════════════════════════════════════════════════════ */
.pagina-publica .cabecera-sala{
    background:
        linear-gradient(180deg, rgba(4,6,4,.22), rgba(4,6,4,.4)),
        url("/assets/brand/fondo-madera-oscura-gaba3.png") center/cover no-repeat;
    border-bottom:1px solid rgba(0,0,0,.35);
    box-shadow:0 10px 22px rgba(0,0,0,.35);
}

/* Buscar/mic — precisa ser bem visível (pedido explícito do dono,
   2026-09-08: "el buscador te tiene que ver"), não mais discreto que
   o carrinho/perfil. */
.pagina-publica .publica-busca-lupa{
    border-color:rgba(157,255,112,.45);
    background:rgba(85,201,0,.14);
    color:#c8ffb0;
}
.pagina-publica .publica-busca-lupa:hover,
.pagina-publica .publica-busca-lupa:focus-visible{
    background:rgba(85,201,0,.16);
    color:#c8ffb0;
}

/* Carrinho e perfil — as ações que importam, com mais presença. */
.pagina-publica .carrinho-miniatura:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(85,201,0,.28);
}
.pagina-publica .perfil-miniatura:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 20px rgba(85,201,0,.34);
}

/* Nav (Início/Catálogo/Ofertas/Entrega) — sublinhado com brilho em vez
   de fundo chapado, sensação de aba de app em vez de lista de links. */
.pagina-publica .publica-nav a{
    position:relative;
    border-bottom-color:transparent;
}
.pagina-publica .publica-nav a::after{
    content:'';
    position:absolute;
    left:14px;
    right:14px;
    bottom:-1px;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg, transparent, #8fff67, transparent);
    opacity:0;
    transform:scaleX(.5);
    transition:opacity .18s ease, transform .18s ease;
}
.pagina-publica .publica-nav a:hover::after,
.pagina-publica .publica-nav a:focus-visible::after,
.pagina-publica .publica-nav-links a:first-child::after{
    opacity:1;
    transform:scaleX(1);
}

/* Linha de pastilhas (status/localização | social) — separador sutil
   entre os dois grupos, pra não ler como um muro único do mesmo verde. */
.pagina-publica .publica-ubicacion-linha{position:relative}
@media(min-width:721px){
    .pagina-publica .publica-ubicacion-linha .publica-nav-social{
        padding-left:14px;
        border-left:1px solid rgba(255,255,255,.1);
    }
}

/* ════════════════════════════════════════════════════════════════
   Chat — balões reais (2026-08-20): antes cada mensagem era só texto
   flutuando no painel escuro, sem nenhum contêiner. Agora tem um
   balão de verdade, e a mensagem da própria pessoa (Você) se destaca
   com o acento dourado secundário (mesmo tom já usado no selo de
   oferta em destaque — linguagem visual consistente) alinhada à
   direita, como qualquer app de chat real.
   ════════════════════════════════════════════════════════════════ */
.pagina-publica .lista-mensajes article > div{
    background:transparent;
    border:0;
    border-radius:0;
    padding:2px 0;
    text-shadow:0 2px 8px rgba(0,0,0,.58);
}
.pagina-publica .lista-mensajes article.gaba3-mensagem-propria{
    display:flex;
    flex-direction:row-reverse;
    gap:9px;
}
.pagina-publica .lista-mensajes article.gaba3-mensagem-propria > div{
    text-align:right;
    background:transparent;
    border:0;
    border-radius:0;
}
.pagina-publica .lista-mensajes article.gaba3-mensagem-propria b{
    justify-content:flex-end;
    color:#ffd76a;
}
.pagina-publica .lista-mensajes article.gaba3-mensagem-propria small{
    display:block;
    text-align:right;
}

/* Rodapé do composer — tirar a caixa azul/lilás genérica (2026-08-20):
   .pie-chat e o campo de texto usavam um azul-marinho (#0f1323/#191e31)
   herdado de um estilo compartilhado com outros tipos de sala, que nunca
   foi adaptado à paleta verde daqui — destoava visivelmente. Ícones
   ficam soltos (sem caixa atrás); só a bolha onde se escreve continua
   se destacando, agora na paleta certa. */
.pagina-publica .form-chat input,
.pagina-publica #publica-mensaje-chat{
    background:rgba(255,255,255,.055);
    border:1px solid rgba(143,255,103,.18);
    color:#eafce8;
}
.pagina-publica .form-chat input:focus,
.pagina-publica #publica-mensaje-chat:focus{
    border-color:rgba(143,255,103,.4);
    outline:none;
}

/* ════════════════════════════════════════════════════════════════
   Divisores entre painéis — versão web só (2026-08-20): as linhas
   douradas retas entre catálogo/ofertas e o chat viravam um traço
   plano. Trocado por uma linha com degradê que brilha suave no meio
   e desaparece nas pontas (verde + dourado, os dois acentos já
   usados na sala) — mesma posição, mesmo espaço, só mais bonito.
   ════════════════════════════════════════════════════════════════ */
@media(min-width:851px){
    .pagina-publica .publica-ofertas,
    .pagina-publica .publica-chat-panel,
    .pagina-publica[data-vista-comercio="catalogo"] .publica-catalogo,
    .pagina-publica[data-vista-comercio="ofertas"] .publica-ofertas{
        position:relative;
    }
    .pagina-publica .publica-ofertas{border-left-color:transparent}
    .pagina-publica .publica-chat-panel{border-left-color:transparent}
    .pagina-publica[data-vista-comercio="catalogo"] .publica-catalogo{border-right-color:transparent}
    .pagina-publica[data-vista-comercio="ofertas"] .publica-ofertas{border-right-color:transparent}

    .pagina-publica .publica-ofertas::before,
    .pagina-publica .publica-chat-panel::before{
        content:'';
        position:absolute;
        left:-1px;
        top:14%;
        bottom:14%;
        width:2px;
        border-radius:2px;
        background:linear-gradient(180deg, transparent, rgba(255,183,3,.6) 22%, rgba(143,255,103,.7) 50%, rgba(255,183,3,.6) 78%, transparent);
        box-shadow:0 0 10px rgba(255,183,3,.28);
        pointer-events:none;
    }
    .pagina-publica[data-vista-comercio="catalogo"] .publica-catalogo::after,
    .pagina-publica[data-vista-comercio="ofertas"] .publica-ofertas::after{
        content:'';
        position:absolute;
        right:-1px;
        top:14%;
        bottom:14%;
        width:2px;
        border-radius:2px;
        background:linear-gradient(180deg, transparent, rgba(255,183,3,.6) 22%, rgba(143,255,103,.7) 50%, rgba(255,183,3,.6) 78%, transparent);
        box-shadow:0 0 10px rgba(255,183,3,.28);
        pointer-events:none;
    }
}

/* ════════════════════════════════════════════════════════════════
   Cartões de produto — mais profundidade (2026-08-20): antes eram
   planos (borda fina, sem sombra, sem reação ao toque). Agora têm
   sombra real e um leve realce ao passar o mouse/tocar, pra parecer
   vitrine de verdade em vez de lista de retângulos.
   ════════════════════════════════════════════════════════════════ */
.catalogo-pergaminho .publica-productos article:hover{
    transform:translateY(-2px);
    border-color:rgba(143,255,103,.4);
    box-shadow:0 8px 22px rgba(0,0,0,.4), 0 0 0 1px rgba(85,201,0,.14);
}
.pagina-publica .oferta-cartao:hover{
    transform:translateY(-2px);
    border-color:rgba(143,255,103,.4);
    box-shadow:0 10px 26px rgba(0,0,0,.42), 0 0 0 1px rgba(85,201,0,.16);
}
.publica-aviso-banner{
    display:flex;
    align-items:center;
    gap:6px;
    padding:4px 12px;
    border-radius:20px;
    background:rgba(46,204,85,.14);
    border:1px solid rgba(85,201,0,.28);
    font-size:12px;
    font-weight:800;
    letter-spacing:.01em;
    color:var(--cor-proprietario,#55c900);
    flex:none;
}
.publica-aviso-banner[hidden]{display:none!important}
.publica-aviso-banner [data-morph-icone]{flex:none;color:var(--cor-proprietario,#55c900)}
.publica-aviso-banner span:last-child{min-width:0;overflow-wrap:break-word}
/* Status "Aberto/Fechado" + horário — obrigatório em qualquer tela
   (web e mobile), colado no badge de localização. */
.publica-status-atendimento{
    display:flex;
    align-items:center;
    gap:6px;
    padding:4px 12px;
    border-radius:20px;
    background:rgba(46,204,85,.14);
    border:1px solid rgba(85,201,0,.28);
    font-size:12px;
    font-weight:800;
    letter-spacing:.01em;
    color:#8fff67;
    flex:none;
    white-space:nowrap;
}
.publica-status-ponto{width:8px;height:8px;flex:none;border-radius:50%;background:#55c900;box-shadow:0 0 6px #55c900}
.publica-status-atendimento.fechado{background:rgba(214,38,53,.14);border-color:rgba(214,38,53,.35);color:#ff8f8f}
.publica-status-atendimento.fechado .publica-status-ponto{background:#d62635;box-shadow:0 0 6px #d62635}
.publica-status-horario{font-weight:700;opacity:.85}
/* Só na versão web: o aviso desce e fica alinhado à esquerda, na mesma
   altura da localização — embaixo do nome/logo do negócio. Mais largo
   agora, pra dar espaço a avisos de urgência (ex.: "Feriado dia 6..."). */
@media(min-width:721px){
    .publica-esquerda-info{position:absolute;left:20px;bottom:9px;z-index:2;display:flex;align-items:center;max-width:60%}
    .publica-aviso-banner{max-width:340px}
    .publica-aviso-banner span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    /* Puxa o grupo (status + localização) um pouco pra esquerda —
       centralizado perfeito ficava exagerado, muito à direita na prática. */
    .publica-ubicacion-linha{justify-content:flex-start;padding-left:calc(50% - 150px)}
}
@media(max-width:720px){
    .publica-esquerda-info{display:contents}
    /* Aberto/Fechado é obrigatório também no mobile — cliente precisa
       saber se o comércio está atendendo agora. Entra na mesma linha
       de São Paulo/Seguir/Curtir, à esquerda (já é o primeiro elemento
       na ordem do HTML), com o mesmo tamanho compacto dos outros badges
       dessa linha. */
    .publica-status-atendimento{padding:3px 10px;font-size:11px;order:1}
    .publica-aviso-banner{flex:0 0 100%!important;min-width:0;order:1;font-size:11px;padding:6px 12px}
    /* Ordem pedida: Aberto → Seguir/Curtir/online/visitas → São Paulo por
       último (não colado no Aberto). */
    .publica-nav-social{order:2}
    .publica-ubicacion-badge{order:3}
}
.publica-frase-header{
    margin:0;
    font-size:12px;
    color:rgba(200,170,110,.75);
    font-style:italic;
    line-height:1.3;
    /* Bug real de auditoria (2026-09-07): sem isso, quando o nome do
       negócio (flex:1 1 0, ver .marca-propietario-publica) encolhia sob
       pressão, essa frase quebrava palavra por palavra numa pilha de
       linhas, inchando a altura da cabeceira inteira. Trunca com "…"
       igual ao h1 do nome, nunca quebra linha. */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:100%;
}
.pagina-publica .conf-panel{
    overflow:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(85,201,0,.4) transparent;
}
.pagina-publica .conf-panel .conf-acordeon,
.pagina-publica .conf-panel .conf-agentes-topo{
    flex:none;
}
.pagina-publica .conf-panel::-webkit-scrollbar{width:6px}
.pagina-publica .conf-panel::-webkit-scrollbar-button{display:none;height:0;width:0}
.pagina-publica .conf-panel::-webkit-scrollbar-track{background:transparent}
.pagina-publica .conf-panel::-webkit-scrollbar-thumb{background:rgba(85,201,0,.4);border-radius:6px}
.pagina-publica .conf-panel::-webkit-scrollbar-thumb:hover{background:rgba(85,201,0,.6)}
.pagina-publica .catalogo-pergaminho .publica-productos{
    width:100%;
    height:100%;
    box-sizing:border-box;
    overflow:auto;
    scroll-behavior:smooth;
    scrollbar-width:thin;
    display:grid;
    grid-auto-flow:column;
    grid-template-columns:none;
    grid-template-rows:repeat(3,150px);
    grid-auto-columns:150px;
    gap:8px;
    padding:10px;
}
/* Lançamentos (2026-09-08, pedido do dono): "muy colapsado" com 3 fileiras
   apertadas — passa pra só 2, uma em cima da outra, com imagem bem maior,
   deslizando horizontal pra ver mais (scroll-snap, um "quadro" de cada vez).
   Precisa de !important + [data-mosaico] pra vencer o sistema de "catálogo
   escasso" (linha 332+), que também mexe nesta mesma caixa quando o total
   de itens bate com um dos números fixos dele (ex.: 6) — pensado pra outro
   caso de uso (poucos produtos, mosaico ajustado), não pra este carrossel. */
.pagina-publica .publica-lancamentos .catalogo-pergaminho .publica-productos,
.pagina-publica .publica-lancamentos .catalogo-pergaminho .publica-productos[data-mosaico],
.pagina-publica .publica-lancamentos .catalogo-pergaminho .publica-productos[data-mosaico="6"],
.pagina-publica .publica-lancamentos .catalogo-pergaminho .publica-productos[data-mosaico="5"],
.pagina-publica .publica-lancamentos .catalogo-pergaminho .publica-productos[data-mosaico="4"]{
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-template-rows:repeat(2,1fr)!important;
    grid-auto-columns:calc(50% - 5px)!important;
    /* [data-mosaico] (linha 320) força gap:2px!important e padding:0!important
       — sem neutralizar os dois aqui, a conta do card ficava errada e
       sobrava uma tira fina do 3º card (achado real testando ao vivo,
       depurado com getBoundingClientRect). Padding:0 aqui de propósito —
       com padding a conta de 100% ficava imprevisível; o respiro vem de
       dentro de cada article (ver regra .publica-lancamentos article). */
    gap:0!important;
    padding:0!important;
    scroll-snap-type:x mandatory;
}
.pagina-publica .publica-lancamentos .catalogo-pergaminho .publica-productos article,
.pagina-publica .publica-lancamentos .catalogo-pergaminho .publica-productos[data-mosaico] article{
    grid-column:auto!important;
    scroll-snap-align:start;
    /* Mesmo pedido do dono (2026-09-14) já aplicado no Catálogo: sem
       borda, sem sombra, sem canto redondo, sem espaço entre as fotos —
       "la unión de las imágenes se ve perfecto". */
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
}
.pagina-publica .publica-lancamentos .catalogo-pergaminho .publica-productos article .gaba3-price-lettering{
    background:none!important;
    max-height:none!important;
}
.pagina-publica .publica-lancamentos .catalogo-pergaminho .publica-productos article .gaba3-letter-name,
.pagina-publica .publica-lancamentos .catalogo-pergaminho .publica-productos article .gaba3-letter-price{
    text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.8)!important;
}
/* Bug real (2026-09-08): o teto de "20% da altura do cartão" na etiqueta
   de preço (linha 1415) foi pensado pra cartões grandes — nestes
   cartões pequenos e mais verticais de Lançamentos, 20% vira só ~28px,
   curto demais pra caber o nome E o preço juntos, e o preço ficava
   cortado pelo overflow:hidden. Aqui a etiqueta ganha altura fixa
   suficiente pras duas linhas. */
.pagina-publica .publica-lancamentos .gaba3-price-lettering{max-height:52px!important}
/* Move-se nas 4 direções: as setas só aparecem passando o mouse por
   cima da caixa (desktop). No toque (celular), ficam escondidas — lá
   o cliente arrasta com o dedo para qualquer lado. */
.pagina-publica .catalogo-flecha{
    position:absolute;
    z-index:5;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border:0;
    background:transparent;
    color:#fff;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));
    transition:opacity .15s ease;
}
.pagina-publica .catalogo-flecha-up{top:8px;left:50%;transform:translateX(-50%)}
.pagina-publica .catalogo-flecha-down{bottom:8px;left:50%;transform:translateX(-50%)}
.pagina-publica .catalogo-flecha-left{left:8px;top:50%;transform:translateY(-50%) rotate(-90deg)}
.pagina-publica .catalogo-flecha-right{right:8px;top:50%;transform:translateY(-50%) rotate(90deg)}
.pagina-publica .ofertas-flecha-up{top:8px;left:50%;transform:translateX(-50%)}
.pagina-publica .ofertas-flecha-down{bottom:8px;left:50%;transform:translateX(-50%)}
.pagina-publica .ofertas-flecha-left{left:8px;top:50%;transform:translateY(-50%) rotate(-90deg)}
.pagina-publica .ofertas-flecha-right{right:8px;top:50%;transform:translateY(-50%) rotate(90deg)}
.pagina-publica .catalogo-flecha:hover{
    color:#fff;
}
@media(hover:hover){
    .pagina-publica .catalogo-pergaminho:hover .catalogo-flecha,
    .pagina-publica .ofertas-stage:hover .catalogo-flecha{
        opacity:1;
        pointer-events:auto;
    }
}
@media(hover:none){
    .pagina-publica .catalogo-flecha{display:none}
}
.pagina-publica .ofertas-stage{
    position:relative;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    height:100%;
    min-height:220px;
}
.pagina-publica .ofertas-logo-static{
    position:absolute;
    top:10px;
    right:10px;
    z-index:6;
    width:52px;
    height:52px;
    border-radius:14px;
    border:1px solid rgba(85,201,0,.35);
    background:#0d1a10 center/cover no-repeat;
    box-shadow:0 8px 22px #0008;
    pointer-events:none;
}
.pagina-publica .ofertas-logo-static:not(.com-imagem){display:none}
.pagina-publica .ofertas-carousel{
    display:grid !important;
    grid-row:2!important;
    grid-auto-flow:column;
    grid-auto-columns:92%;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:12px 10px 8px;
    height:100%;
    min-height:0;
}
.pagina-publica .ofertas-carousel .oferta-cartao{
    scroll-snap-align:center;
    min-height:200px;
    border-radius:14px;
    border:1px solid rgba(85,201,0,.28);
}
.pagina-publica .ofertas-dots{
    display:flex;
    justify-content:center;
    gap:6px;
    padding:6px 0 10px;
}
.pagina-publica .ofertas-dot{
    width:7px;
    height:7px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.22);
    cursor:pointer;
}
.gaba3-cart-interest-stack{
    position:fixed;
    top:104px;
    right:16px;
    z-index:9998;
    display:flex;
    flex-direction:column;
    gap:8px;
    max-width:280px;
    pointer-events:none;
}
.gaba3-cart-interest-card{
    background:rgba(10,26,12,.96);
    border:1px solid rgba(85,201,0,.45);
    border-radius:12px;
    padding:10px 14px;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
    color:#eafce8;
    font-size:12.5px;
    animation:gaba3-cart-interest-in .22s ease;
}
.gaba3-cart-interest-card b{
    display:block;
    color:#8fff67;
    font-size:12px;
    margin-bottom:3px;
}
.gaba3-cart-interest-card span{
    display:block;
    opacity:.9;
    line-height:1.4;
}
@keyframes gaba3-cart-interest-in{
    from{opacity:0;transform:translateX(16px)}
    to{opacity:1;transform:translateX(0)}
}
@media (max-width:720px){
    .gaba3-cart-interest-stack{top:auto;bottom:70px;right:10px;max-width:240px}
}
.pagina-publica .ofertas-dot.is-active{
    background:#55c900;
    box-shadow:0 0 0 2px rgba(85,201,0,.25);
}
.pagina-publica .gaba3-offer-selo{
    position:absolute;
    top:6px;
    left:6px;
    z-index:4;
    max-width:calc(100% - 12px);
    padding:3px 8px;
    border-radius:999px;
    background:rgba(85,201,0,.92);
    color:#04220a;
    font-size:10.5px;
    font-weight:800;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.pagina-publica .oferta-cartao.is-main .gaba3-offer-selo{
    background:rgba(255,183,3,.95);
}
.pagina-publica .gaba3-price-lettering{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:3;
    display:grid;
    gap:1px;
    padding:8px 10px 9px;
    /* o dono (2026-09-07): "nada de mucho amarillo, solo letras flotando
       en la imagen" — trocado o bloco sólido amarelo por um degradê
       escuro (só pra dar contraste real ao texto sobre qualquer foto),
       deixando a foto do produto visível quase até o fim. A cor mora
       nas próprias letras agora (ver .gaba3-letter-price/--name e as
       variantes de cor logo abaixo), não no fundo do cartão. */
    background:linear-gradient(180deg,rgba(4,8,4,0) 0%,rgba(4,8,4,.55) 55%,rgba(4,8,4,.82) 100%);
    text-align:left;
    pointer-events:none;
    /* Nunca passa de 20% da altura da foto — em cartões grandes (a foto
       única que cresce pra cobrir a prateleira toda) ficaria enorme
       sem esse teto. */
    max-height:20%;
    overflow:hidden;
}
.pagina-publica .gaba3-letter-name{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:clamp(13px,1.6vw,18px);
    font-weight:950;
    letter-spacing:.02em;
    line-height:1.1;
    text-transform:uppercase;
    color:#fff;
    text-shadow:0 1px 3px #000,0 0 10px rgba(0,0,0,.85);
}
.pagina-publica .gaba3-letter-price{
    display:block;
    font-size:clamp(16px,2vw,22px);
    font-weight:950;
    letter-spacing:-.02em;
    line-height:1.05;
    color:#ff5252;
    text-shadow:0 1px 3px #000,0 0 10px rgba(0,0,0,.85);
}
.pagina-publica .gaba3-letter-previous{
    display:inline-block;
    margin-left:6px;
    font-size:clamp(11px,1.3vw,14px);
    font-weight:800;
    color:#e8e0d0;
    text-decoration:line-through;
    opacity:.8;
    text-shadow:0 1px 2px #000;
}
/* Variedade de cor por produto (o mesmo agente escolhe 1 de 3 paletas,
   fixa pelo id — nunca pisca a cada re-render), pedido explícito do
   dono: "los precios pueden ser rojo, las letras pueden cambiar azul" —
   mostra variedade real, não sempre o mesmo amarelo em toda vitrine. */
.pagina-publica .gaba3-price-lettering--paleta-vermelho .gaba3-letter-price{color:#ff5252}
.pagina-publica .gaba3-price-lettering--paleta-vermelho .gaba3-letter-name{color:#fff}
.pagina-publica .gaba3-price-lettering--paleta-azul .gaba3-letter-name{color:#6fc6ff}
.pagina-publica .gaba3-price-lettering--paleta-azul .gaba3-letter-price{color:#ffd23f}
.pagina-publica .gaba3-price-lettering--paleta-verde .gaba3-letter-name{color:#fff}
.pagina-publica .gaba3-price-lettering--paleta-verde .gaba3-letter-price{color:#7dffb0}
.pagina-publica .gaba3-letter-discount{
    position:absolute;
    top:-10px;
    right:8px;
    padding:3px 8px;
    border-radius:999px;
    background:#d40000;
    color:#fff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.02em;
    box-shadow:0 3px 8px #0006;
}
.pagina-publica .gaba3-letter-spoken{
    /* Linha decorativa (legenda falada) — em cartões curtos ela é o que
       mais ameaça empurrar o preço pra fora do teto de 20% da faixa
       amarela; o preço é o que realmente importa, então ela some sempre. */
    display:none;
}
/* Cartão de oferta pequeno (os 2 de baixo, não o grande em destaque):
   é curto, então o texto tem que ser mais compacto pra caber inteiro
   dentro do teto de 20% sem cortar o preço — o motivo desse ajuste. */
.pagina-publica .ofertas-trilho[data-ofertas] .oferta-cartao:not(:first-child) .gaba3-letter-name{
    font-size:11px;
}
.pagina-publica .ofertas-trilho[data-ofertas] .oferta-cartao:not(:first-child) .gaba3-letter-price{
    font-size:13px;
}
.pagina-publica .ofertas-trilho[data-ofertas] .oferta-cartao:not(:first-child) .gaba3-letter-previous{
    font-size:10px;
}
.pagina-publica .ofertas-trilho[data-ofertas] .oferta-cartao:not(:first-child) .gaba3-price-lettering{
    padding:4px 7px 5px;
    /* Bug real (2026-09-08, achado ao vivo): mesmo com o texto compacto
       acima, nome+preço juntos passavam de 25px de altura — o teto de
       20% da altura do cartão (regra geral, linha 1415) dava só uns
       24px nesses cartões pequenos, cortando o preço pelo overflow:
       hidden. O texto compacto sozinho nunca ia ser suficiente sem
       também dar mais altura à própria etiqueta. */
    max-height:38px!important;
}
/* O cartão grande em destaque (o primeiro) usa o texto padrão (maior),
   e mesmo com mais altura de sobra o teto de 20% ainda cortava a linha
   do preço por baixo (achado ao vivo, medindo o texto de verdade, não
   só a caixa). */
.pagina-publica .ofertas-trilho[data-ofertas] .oferta-cartao:first-child .gaba3-price-lettering{
    max-height:56px!important;
}
/* Variedade de layout do preço (agente de Visibilidade/Preços escolhe
   uma por produto, fixa pelo id — nunca sempre no mesmo lugar/jeito):
   "faixa" = a faixa amarela de baixo (padrão, acima); "esquinas" = sem
   faixa nenhuma, só 2 selinhos pequenos nos cantos (a foto fica quase
   toda à mostra); "salto" = a faixa normal, mas o preço pula/chama
   atenção com uma animação leve. */
.pagina-publica .gaba3-price-lettering--esquinas{
    display:contents;
}
.pagina-publica .gaba3-corner-name{
    /* Empilhado ACIMA do preço, mesmo canto (esquerda embaixo) — nunca ao
       lado: um cartão de catálogo estreito (~140px) faz nome+preço lado a
       lado colidirem de verdade (confirmado visualmente, não só medido). */
    position:absolute;
    left:8px;
    bottom:40px;
    z-index:3;
    max-width:calc(100% - 16px);
    padding:3px 8px;
    border-radius:8px;
    background:rgba(6,12,7,.72);
    color:#f2f7ee;
    font-weight:800;
    font-size:clamp(10px,1.5vw,13px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    box-shadow:0 2px 8px #0006;
    pointer-events:none;
}
.pagina-publica .gaba3-price-lettering--catalog .gaba3-corner-name{
    bottom:30px;
    font-size:10px;
    padding:2px 6px;
    max-width:calc(100% - 12px);
}
.pagina-publica .gaba3-corner-price{
    /* Mesma filosofia da variante "faixa" (2026-09-07): sem selinho
       sólido amarelo — só a letra flutuando, com sombra forte pra ler
       bem sobre qualquer foto. Cor por paleta, ver regras logo abaixo. */
    position:absolute;
    left:8px;
    bottom:8px;
    z-index:3;
    color:#ff5252;
    font-weight:950;
    font-size:clamp(13px,1.9vw,18px);
    text-shadow:0 1px 3px #000,0 0 10px rgba(0,0,0,.85);
    pointer-events:none;
}
.pagina-publica .gaba3-price-lettering--paleta-azul .gaba3-corner-price{color:#ffd23f}
.pagina-publica .gaba3-price-lettering--paleta-verde .gaba3-corner-price{color:#7dffb0}
.pagina-publica .gaba3-corner-discount{
    position:absolute;
    right:8px;
    top:8px;
    z-index:3;
    padding:3px 9px;
    border-radius:999px;
    background:#d40000;
    color:#fff;
    font-weight:900;
    font-size:11px;
    letter-spacing:.02em;
    box-shadow:0 3px 8px #0006;
    pointer-events:none;
}
.pagina-publica .gaba3-price-lettering--catalog .gaba3-corner-price{
    font-size:11px;
    padding:3px 7px;
}
@keyframes gaba3-preco-salto{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-4px) scale(1.06)}
}
.pagina-publica .gaba3-price-lettering--salto{
    overflow:visible; /* deixa o preço pular sem cortar no teto de 20% */
}
.pagina-publica .gaba3-letter-price--salto{
    display:inline-block;
    animation:gaba3-preco-salto 1.15s ease-in-out infinite;
}
.pagina-publica .oferta-cartao > strong{
    display:none; /* substituído pela faixa amarela */
}
.pagina-publica .gaba3-vis-polished{
    position:relative;
    overflow:hidden;
}
.pagina-publica .gaba3-vis-img,
.pagina-publica .gaba3-vis-polished img{
    object-fit:cover !important;
    object-position:center center !important;
    transform:none !important;
    width:100% !important;
    height:100% !important;
}
.pagina-publica .gaba3-vis-needs-image{
    outline:1px dashed rgba(250,204,21,.45);
}
.pagina-publica .gaba3-price-lettering--catalog{
    padding:5px 7px 6px;
}
.pagina-publica .gaba3-price-lettering--catalog .gaba3-letter-name{
    font-size:11px;
}
.pagina-publica .gaba3-price-lettering--catalog .gaba3-letter-price{
    font-size:13px;
}
.pagina-publica .gaba3-price-lettering--catalog .gaba3-letter-spoken{
    display:none;
}
.pagina-publica .publica-productos article.gaba3-vis-polished > strong{
    display:none;
}
.pagina-publica[data-public-view="owner"] .publica-catalogo>header .botao-menu-painel,
.pagina-publica[data-public-view="owner"] .publica-ofertas>header .botao-menu-painel{
    display:grid !important;
    pointer-events:auto;
    place-items:center;
}
.pagina-publica .conf-agentes-topo{
    margin:0 14px 14px;
    padding:12px 12px 14px;
    border:1px solid rgba(85,201,0,.22);
    border-radius:14px;
    background:linear-gradient(160deg,rgba(12,22,14,.96),rgba(7,14,9,.96));
}
.pagina-publica .conf-agentes-topo-head{
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(85,201,0,.16);
}
.pagina-publica .conf-agentes-topo-head strong{
    display:block;
    font-size:14px;
    color:#eaffd8;
    font-weight:850;
}
.pagina-publica .conf-agentes-topo-head small{
    display:block;
    margin-top:4px;
    font-size:11px;
    line-height:1.4;
    color:#8fa08c;
}
.pagina-publica .agents-panel-in-profile{
    max-height:min(46vh, 420px);
    overflow:auto;
    padding-right:2px;
    scrollbar-width:thin;
    scrollbar-color:rgba(85,201,0,.4) transparent;
}
.pagina-publica .agents-panel-in-profile::-webkit-scrollbar{width:6px}
.pagina-publica .agents-panel-in-profile::-webkit-scrollbar-button{display:none;height:0;width:0}
.pagina-publica .agents-panel-in-profile::-webkit-scrollbar-track{background:transparent}
.pagina-publica .agents-panel-in-profile::-webkit-scrollbar-thumb{background:rgba(85,201,0,.4);border-radius:6px}
.pagina-publica .agents-panel-in-profile::-webkit-scrollbar-thumb:hover{background:rgba(85,201,0,.6)}
.pagina-publica .agents-activate-all{
    min-height:26px;
    padding:0 8px;
    border-radius:7px;
    border:1px solid rgba(85,201,0,.4);
    background:rgba(85,201,0,.12);
    color:#d8ffb0;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
}
.pagina-publica .agents-activate-all:hover{
    background:rgba(85,201,0,.2);
}
/* Painel "Meus agentes": ficou escondido desde que foi criado (bug já
   corrigido em outro lugar), então este visual nunca tinha sido testado
   nem finalizado — layout completo abaixo. */
.pagina-publica .agents-header{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:8px 12px;
    padding-bottom:10px;
    margin-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.1);
}
.pagina-publica .agents-header-text{
    display:grid;
    gap:2px;
    flex:1 1 160px;
    min-width:0;
}
.pagina-publica .agents-header-text strong{font-size:13px;color:#eafff0}
.pagina-publica .agents-header-text small{font-size:10px;color:#9eb89a;line-height:1.3}
.pagina-publica .agents-header-meta{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
}
.pagina-publica .agents-count-badge{
    padding:3px 8px;
    border-radius:999px;
    border:1px solid rgba(85,201,0,.35);
    background:rgba(85,201,0,.1);
    color:#c8f090;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}
.pagina-publica .agents-owner-presence{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 14px;
    width:100%;
    font-size:11px;
    color:#cde2c8;
}
.pagina-publica .agents-owner-presence label{
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}
.pagina-publica .agents-owner-presence select{
    min-height:28px;
    padding:0 6px;
    border-radius:7px;
    border:1px solid rgba(255,255,255,.2);
    background:#101a11;
    color:#eafff0;
    font-size:11px;
}
.pagina-publica .agents-upgrade-notice,
.pagina-publica .agents-empty{
    margin:0 0 10px;
    padding:8px 10px;
    border-radius:8px;
    background:rgba(255,255,255,.05);
    color:#cde2c8;
    font-size:11px;
    line-height:1.4;
}
.pagina-publica .agents-list{
    display:grid;
    gap:8px;
}
.pagina-publica .agent-card{
    display:grid;
    gap:8px;
    padding:10px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    background:rgba(255,255,255,.03);
}
.pagina-publica .agent-card--active{border-color:rgba(85,201,0,.35);background:rgba(85,201,0,.06)}
.pagina-publica .agent-card--locked{opacity:.6}
.pagina-publica .agent-card-top{
    display:flex;
    align-items:flex-start;
    gap:9px;
}
.pagina-publica .agent-icon{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    flex:0 0 auto;
    border-radius:8px;
    background:rgba(85,201,0,.12);
    color:#8fff67;
}
.pagina-publica .agent-icon svg{width:17px;height:17px}
.pagina-publica .agent-info{flex:1 1 auto;min-width:0;display:grid;gap:2px}
.pagina-publica .agent-name{font-size:12px;color:#eafff0}
.pagina-publica .agent-desc{margin:0;font-size:10px;line-height:1.4;color:#9eb89a}
.pagina-publica .agent-controls{flex:0 0 auto}
.pagina-publica .agent-toggle{
    display:flex;
    align-items:center;
    gap:5px;
    min-height:28px;
    padding:0 10px;
    border-radius:7px;
    border:1px solid rgba(255,255,255,.2);
    background:#101a11;
    color:#cde2c8;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
}
.pagina-publica .agent-toggle i{
    width:7px;height:7px;border-radius:50%;background:#8a8a8a;flex:0 0 auto;
}
.pagina-publica .agent-toggle--on{
    border-color:rgba(85,201,0,.45);
    background:rgba(85,201,0,.14);
    color:#d8ffb0;
}
.pagina-publica .agent-toggle--on i{background:#8fff67;box-shadow:0 0 6px rgba(85,201,0,.7)}
.pagina-publica .agent-lock-badge{
    padding:3px 8px;
    border-radius:7px;
    background:rgba(255,183,3,.14);
    color:#ffd76a;
    font-size:9px;
    font-weight:800;
    white-space:nowrap;
}
.pagina-publica .agent-card-status{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:10px;
    color:#9eb89a;
}
.pagina-publica .agent-status-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:#8a8a8a}
.pagina-publica .agent-status-dot--active{background:#8fff67;box-shadow:0 0 6px rgba(85,201,0,.7)}
.pagina-publica .agent-status-dot--error{background:#ff6b6b;box-shadow:0 0 6px rgba(255,60,60,.6)}
.pagina-publica .agent-proposals-btn{
    margin-left:auto;
    min-height:24px;
    padding:0 8px;
    border-radius:7px;
    border:1px solid rgba(24,144,255,.4);
    background:rgba(24,144,255,.12);
    color:#9ad0ff;
    font-size:9px;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
}
.pagina-publica .agent-proposals-popup{
    margin-top:6px;
    padding:8px;
    border:1px solid rgba(24,144,255,.35);
    border-radius:9px;
    background:#0b130d;
}
.pagina-publica .agent-proposals-popup header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:6px;
    font-size:11px;
    color:#eafff0;
}
.pagina-publica .agent-popup-close{
    border:0;background:transparent;color:#cde2c8;font-size:16px;cursor:pointer;line-height:1;
}
.pagina-publica .agent-proposals-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pagina-publica .agent-proposal-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:6px 8px;
    border-radius:7px;
    background:rgba(255,255,255,.04);
    font-size:10px;
    color:#cde2c8;
}
.pagina-publica .proposal-actions{display:flex;gap:5px;flex:0 0 auto}
.pagina-publica .proposal-btn-approve,
.pagina-publica .proposal-btn-reject{
    min-height:22px;
    padding:0 7px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,.2);
    background:#101a11;
    color:#eafff0;
    font-size:9px;
    font-weight:800;
    cursor:pointer;
}
.pagina-publica .proposal-btn-approve{border-color:rgba(85,201,0,.4);background:rgba(85,201,0,.14);color:#d8ffb0}
.pagina-publica .proposal-btn-reject{border-color:rgba(255,107,107,.4);background:rgba(255,107,107,.12);color:#ffb3b3}
.pagina-publica .publica-composer-tools{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    margin-bottom:8px;
}
.pagina-publica .publica-composer-tools[hidden]{display:none!important}
.pagina-publica .publica-icon-btn{
    position:relative;
    display:inline-grid;
    place-items:center;
    width:34px;
    height:34px;
    padding:0;
    border:none;
    border-radius:10px;
    background:transparent;
    color:#9fdc7a;
    cursor:pointer;
    transition:background .18s ease, color .18s ease;
}
.pagina-publica .publica-icon-btn svg{display:block}
.pagina-publica .publica-icon-btn[hidden]{display:none!important}
.pagina-publica .publica-icon-btn:hover,
.pagina-publica .publica-icon-btn:focus-visible{
    background:rgba(143,255,103,.12);
    color:#e8ffb8;
    outline:none;
}
.pagina-publica .publica-icon-btn.activo{
    background:rgba(85,201,0,.22);
    color:#f2ffd0;
}
.pagina-publica .publica-icon-btn.publica-env-fora{
    border-color:rgba(24,144,255,.45);
    color:#9ad0ff;
}
.pagina-publica .publica-icon-btn.publica-env-fora.activo,
.pagina-publica .publica-icon-btn.publica-env-fora:hover{
    background:rgba(24,144,255,.18);
    border-color:rgba(24,144,255,.7);
    color:#dff0ff;
}
.pagina-publica .publica-figurinhas-panel{
    margin:0 0 8px;
    padding:10px;
    border:1px solid rgba(85,201,0,.22);
    border-radius:12px;
    background:rgba(7,14,9,.96);
}
.pagina-publica .publica-figurinhas-tabs{
    display:flex;
    gap:6px;
    margin-bottom:8px;
}
.pagina-publica .publica-figurinhas-tabs button{
    min-height:28px;
    padding:0 10px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.12);
    background:transparent;
    color:#9bb29a;
    font-size:11px;
    font-weight:750;
    cursor:pointer;
}
.pagina-publica .publica-figurinhas-tabs button.activo{
    border-color:rgba(85,201,0,.45);
    background:rgba(85,201,0,.12);
    color:#d8ffb0;
}
.pagina-publica .publica-figurinhas-fechar{
    margin-left:auto;
    min-width:28px;
    padding:0!important;
}
.pagina-publica .publica-figurinhas-grid{
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:5px;
}
.pagina-publica .publica-figurinhas-grid button,
.pagina-publica .publica-criar-emojis button{
    min-height:34px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
    background:rgba(255,255,255,.03);
    font-size:18px;
    cursor:pointer;
}
.pagina-publica .publica-figurinhas-grid button:hover,
.pagina-publica .publica-criar-emojis button:hover,
.pagina-publica .publica-criar-emojis button.activo{
    border-color:rgba(85,201,0,.4);
    background:rgba(85,201,0,.1);
}
.pagina-publica .publica-figurinhas-criar p{
    margin:0 0 8px;
    font-size:11px;
    color:#8fa08c;
}
.pagina-publica .publica-criar-emojis{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-bottom:8px;
}
.pagina-publica .publica-figurinhas-criar input{
    width:100%;
    min-height:34px;
    margin-bottom:8px;
    padding:0 10px;
    border-radius:8px;
    border:1px solid rgba(85,201,0,.22);
    background:#0a140c;
    color:#eaffd8;
}
@media(max-width:560px){.pagina-publica .publica-figurinhas-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.pagina-publica .agents-panel-in-profile{max-height:38vh}
}
@media (max-width:720px){.pagina-publica .sala-publica-layout{
        display:grid!important;
        grid-template-columns:1fr!important;
        width:100%!important;
        max-width:none!important;
        margin:0!important;
        padding:8px 0 0!important;
        box-sizing:border-box!important;
        gap:0!important;
        /* 2026-09-07: tentei mudar isto pra "flex:0 1 auto" achando que o
           vão vazio embaixo do catálogo (salas com poucos produtos) vinha
           daqui — errado: o composer é position:fixed, sua posição na
           tela NUNCA dependeu da altura deste <main>, então aquilo não
           mudava nada visível. O dono confirmou que o comportamento certo
           É esse "crescer sempre" (o catálogo tem que poder rolar de
           verdade, passando por baixo da píldora fixa) — revertido pro
           original. O vão vazio em salas com poucos produtos é outra
           causa, ainda sendo investigada. */
        flex:1 1 auto!important;
        min-height:0!important;
        padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))!important;
    }
.pagina-sala .publica-cabecera{
        width:100%!important;
        max-width:none!important;
        box-sizing:border-box!important;
        padding-left:max(10px,env(safe-area-inset-left,10px))!important;
        padding-right:max(10px,env(safe-area-inset-right,10px))!important;
        padding-top:calc(6px + env(safe-area-inset-top,0px))!important;
        flex-shrink:0!important;
    }
    /* o dono: quando o chat expande pra escrever, o body (flex column, altura
       fixa) tirava esse espaço espremendo a própria cabeçalho até ela sumir
       — nunca pode encolher, quem cede espaço é o <main>, que já rola por
       dentro. */
.pagina-publica #publica-topo{
        flex-shrink:0!important;
    }
.pagina-publica .publica-chat-panel,
.pagina-publica .publica-bloque{
        width:100%!important;
        max-width:none!important;
        min-width:0!important;
        box-sizing:border-box!important;
    }
.pagina-publica .form-chat{
        padding-bottom:0!important;
        box-sizing:border-box!important;
    }
.pagina-publica .pie-chat{
        padding-bottom:max(6px, var(--gaba3-nav-inset-bottom, env(safe-area-inset-bottom, 0px)))!important;
        box-sizing:border-box!important;
    }
    /* A píldora em si (fundo, borda, ícones dentro, mic fora) agora vive
       fora de qualquer @media — ver logo depois de .form-chat{gap:6px}
       no topo do arquivo — pra valer igual no desktop e no celular. */
.pagina-publica .publica-paineis-principais{
        display:grid!important;
        grid-template-columns:1fr!important;
        width:100%!important;
        gap:0!important;
        /* 2026-09-08: com Vídeos+Lançamentos somados na frente do catálogo
           (pedido do dono), o conteúdo real passou a ser mais alto que uma
           tela — sem isto, tudo que passasse da altura da tela ficava
           cortado pra sempre (o body é altura fixa + overflow:hidden, de
           propósito, pra manter a píldora do chat sempre grudada embaixo).
           Aqui dentro rola sozinho, sem mexer nesse comportamento do chat. */
        flex:1 1 auto!important;
        min-height:0!important;
        overflow-y:auto!important;
        -webkit-overflow-scrolling:touch;
    }
.pagina-publica .publica-catalogo{
        /* 2026-09-07: "display:block" quebrava a cadeia flex (ver
           explicação antiga abaixo) — trocado por "display:flex;
           flex-direction:column", restaura a cadeia SEM precisar de
           nenhum número fixo em px. Isso é o que realmente fazia o
           catálogo ficar preso numa altura fixa (460px) mesmo sobrando
           bastante tela real embaixo — o número nunca acompanhava o
           tamanho de tela de verdade do aparelho, só um valor "achado
           por tentativa" numa tela específica. */
        display:flex!important;
        flex-direction:column!important;
        width:100%!important;
        max-width:none!important;
        min-height:0!important;
        /* "align-items:stretch" (padrão do grid pai) devia bastar, mas
           não esticava sozinho aqui — forçando "height:100%" explícito
           pra realmente ocupar 100% da linha do grid (a altura real
           disponível na tela), não só o tamanho do próprio conteúdo. */
        height:100%!important;
        border-right:1px solid #294d2f!important;
        border-radius:14px 14px 0 0!important;
    }
.pagina-publica .catalogo-pergaminho{
        /* Antigo bug (histórico, mantido no comentário pra não repetir):
           ".publica-catalogo" virava display:block aqui, e sem um
           contêiner flex, "flex:1 1 auto" (regra base) não fazia nada —
           o pergaminho colapsava pra 0px mesmo com produtos reais
           carregados. A correção de então foi um número fixo em px
           (460px) — resolvia o colapso, mas criava um teto arbitrário
           que nunca acompanha o tamanho real da tela (sobra vão vazio
           em telas altas, cortava em telas baixas). Com ".publica-
           catalogo" de volta a ser flex de verdade (regra acima), volta
           a usar flex:1 1 auto (regra base do arquivo) — cresce até
           preencher o espaço real disponível, sem nenhum número mágico. */
        flex:1 1 auto!important;
        min-height:220px!important;
        height:auto!important;
    }
.pagina-publica .publica-ofertas{
        display:block!important;
        width:100%!important;
        max-width:none!important;
        min-height:340px!important;
        border-left:0!important;
        border-top:1px solid #caa23c!important;
        border-right:1px solid #294d2f!important;
        border-radius:0!important;
    }
.pagina-publica .publica-ofertas .ofertas-trilho{
        /* Mesmo problema do catálogo: #ofertas-trilho usa height:100%,
           que sem um ancestral com altura definida colapsa pra 0px.
           Mesmo motivo do 340px acima: 200px cortava o preço da oferta
           pequena embaixo. */
        height:340px!important;
    }
.pagina-publica .publica-chat-panel{
        display:block!important;
        width:100%!important;
        max-width:none!important;
        border-left:0!important;
        border-top:1px solid #caa23c!important;
        border-radius:0 0 14px 14px!important;
    }
.pagina-publica .publica-productos,
.pagina-publica .ofertas-trilho{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:8px!important;
        padding:8px!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
        width:100%!important;
        max-width:100%!important;
        box-sizing:border-box!important;
    }
.pagina-publica .publica-productos article,
.pagina-publica .oferta-cartao{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        box-sizing:border-box!important;
    }
.pagina-publica .publica-nombre-row{
        flex-wrap:wrap!important;
        gap:4px 8px!important;
        max-width:100%!important;
    }
.pagina-publica .marca-propietario-publica{
        min-width:0!important;
        max-width:100%!important;
        overflow:hidden!important;
    }
.pagina-publica .conf-panel{
        width:min(100vw,420px)!important;
        max-width:100vw!important;
        width:100vw!important;
        top:0!important; right:0!important; bottom:0!important; left:0!important;
        border-left:0!important;
        border-radius:0!important;
        padding-top:env(safe-area-inset-top,0px);
        padding-bottom:env(safe-area-inset-bottom,0px);
        overflow-x:hidden!important;
        overflow-y:auto!important;
        overscroll-behavior:contain;
        box-sizing:border-box!important;
    }
}
/* No celular, "Catálogo"/"Ofertas" no menu de cima devem mostrar aquele
   painel em tela quase cheia (não os dois espremidos e empilhados) — o
   bloco de regras acima já empilha os dois com altura fixa de 200px
   pensando na tela "Início" (os dois lado a lado viram um embaixo do
   outro). Aqui, com o seletor de atributo [data-vista-comercio] (mais
   específico, então ganha mesmo com !important nos dois lados), quando o
   dono clicou em "Catálogo" ou "Ofertas" a gente esconde o outro painel
   de vez e dá bastante altura ao que ficou, em vez dos 200px fixos. */
@media(max-width:720px){
    .pagina-publica[data-vista-comercio="ofertas"] .publica-catalogo{display:none!important}
    /* 2026-09-08 (pedido do dono): "catalogo" virou o estado PADRÃO da tela
       Início (ver linha ~2532 do sala-publica.html) — antes só existia uma
       caixa de catálogo e uma de ofertas, então esticar ".publica-catalogo"
       inteiro fazia sentido. Agora Vídeos/Lançamentos também têm essa
       classe (pra herdar visual) mas cada um já tem seu próprio tamanho
       fixo definido acima (320px/340px) — sem excluir eles aqui, esta
       regra sobrescrevia esse tamanho com min-height:340px!important,
       fazendo o vídeo nunca poder ficar do mesmo tamanho da oferta. */
    .pagina-publica[data-vista-comercio="catalogo"] .publica-catalogo:not(.publica-videos-publicidade):not(.publica-lancamentos):not(.publica-catalogo-secundario),
    .pagina-publica[data-vista-comercio="ofertas"] .publica-ofertas{
        /* 2026-09-07: "62vh" era um número fixo, calculado numa tela de
           referência qualquer — nunca acompanhava o espaço realmente
           disponível (que muda com a altura do cabeçalho + a reserva da
           píldora fixa embaixo). Isso é a causa real do vão vazio que
           O dono reportou (imagens de produtos não usando o espaço real
           da tela). ".publica-catalogo"/".publica-ofertas" já são item
           direto do grid pai (".publica-paineis-principais"), que já
           ocupa 100% do espaço real disponível — "height:100%" usa esse
           espaço de verdade, em qualquer tamanho de tela. */
        height:100%!important;
        min-height:340px!important;
    }
    .pagina-publica[data-vista-comercio="catalogo"] .publica-catalogo .catalogo-pergaminho,
    .pagina-publica[data-vista-comercio="ofertas"] .publica-ofertas .ofertas-trilho{
        height:100%!important;
    }
}
@media (max-width:720px){body.pagina-sala.pagina-publica{
    padding-bottom:0!important;
    /* o dono: sem isso o body ficava em fluxo normal (bloco), então o <main>
       nunca esticava até o fim da tela — sobrava um vão vazio de verdade
       (madeira da própria página aparecendo) entre o catálogo e a barra
       fixa do chat. Precisa ser flex igual ao desktop, só que aqui
       também. */
    display:flex!important;
    flex-direction:column!important;
    height:100vh!important;
    height:100dvh!important;
    overflow:hidden!important;
}
}
@media (max-width:720px){
.pagina-publica .conf-panel-header{
        position:sticky; top:0; z-index:3;
        padding:12px 14px!important;
        background:rgba(10,14,10,.96);
        box-sizing:border-box;
    }
.pagina-publica .conf-panel-titulo{ font-size:16px!important; line-height:1.25!important; }
.pagina-publica .conf-acordeon,
.pagina-publica .conf-agentes-topo,
.pagina-publica .conf-seccion{
        width:100%!important;
        max-width:100%!important;
        box-sizing:border-box!important;
        padding-left:12px!important;
        padding-right:12px!important;
    }
.pagina-publica .conf-agentes-topo{
        margin:10px 0!important;
        border-radius:12px!important;
    }
.pagina-publica .agents-panel-in-profile{
        max-height:none!important;
        overflow:visible!important;
    }
.pagina-publica .agent-card,
.pagina-publica .agents-panel-in-profile article{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        box-sizing:border-box!important;
        overflow:hidden!important;
    }
.pagina-publica .conf-panel input,
.pagina-publica .conf-panel select,
.pagina-publica .conf-panel textarea,
.pagina-publica .conf-panel button{
        max-width:100%!important;
        box-sizing:border-box!important;
    }
.pagina-publica .conf-panel-footer{
        position:sticky; bottom:0; z-index:3;
        padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;
        background:rgba(8,12,8,.96);
        box-sizing:border-box;
    }
.pagina-publica .publica-bloque,
.pagina-publica .publica-catalogo,
.pagina-publica .publica-ofertas,
.pagina-publica .publica-chat-panel{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        overflow:hidden!important;
        box-sizing:border-box!important;
        border-radius:14px!important;
    }
.pagina-publica .publica-productos article img,
.pagina-publica .oferta-cartao img{
        width:100%!important;
        height:auto!important;
        aspect-ratio:1/1;
        object-fit:cover;
    }
.pagina-publica .publica-productos article strong,
.pagina-publica .publica-productos article b,
.pagina-publica .oferta-cartao strong,
.pagina-publica .oferta-cartao b{
        display:block;
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
.pagina-publica .publica-composer-tools{
        display:flex!important;
        flex-wrap:wrap!important;
        gap:8px!important;
        width:100%!important;
        max-width:100%!important;
        box-sizing:border-box!important;
        margin-bottom:8px!important;
    }
.pagina-publica .publica-icon-btn{
        width:42px!important;
        height:42px!important;
        min-width:42px!important;
        border-radius:11px!important;
    }
.pagina-publica .publica-icon-btn.publica-env-fora{
        min-width:52px!important;
        padding:0 10px!important;
    }
.pagina-publica .form-chat,
.pagina-publica .pie-chat,
.pagina-publica #publica-form-chat{
        width:100%!important;
        max-width:100%!important;
        box-sizing:border-box!important;
        overflow:hidden!important;
    }
.pagina-publica #publica-mensaje-chat,
.pagina-publica .form-chat input[type="text"],
.pagina-publica .form-chat textarea{
        min-width:0!important;
        max-width:100%!important;
        flex:1 1 auto!important;
        box-sizing:border-box!important;
    }
.pagina-publica .lista-mensajes{
        max-width:100%!important;
        overflow-x:hidden!important;
        word-break:break-word;
    }
.pagina-publica .publica-cabecera{
        width:100%!important;
        max-width:100%!important;
        gap:4px!important;
        padding:calc(7px + env(safe-area-inset-top,0px)) 10px 6px!important;
        box-sizing:border-box!important;
        overflow:hidden!important;
    }
.pagina-publica .marca-propietario-publica h1{
        font-size:15px!important;
        line-height:1.2!important;
        /* 2026-09-08 (pedido do dono, com imagem de referência): igual à
           referência, o nome fica numa linha só, cabeceira mais enxuta —
           corta com "…" em vez de quebrar em 2-3 linhas (que empurrava
           carrinho/avatar pra baixo do espaço disponível). */
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }
.pagina-publica .publica-controles-sistema{
        flex:none!important;
        gap:12px!important;
    }
.pagina-publica .publica-controles-sistema > button:not(#publica-seguir-sala),
.pagina-publica .perfil-miniatura,
.pagina-publica .carrinho-miniatura{
        min-width:40px!important;
        min-height:40px!important;
    }
}
.form-video-curto{display:grid;gap:10px}
.form-video-curto label{display:grid;gap:6px}
.form-video-curto input,
.form-video-curto select{min-width:0}
.lista-videos-curtos-sala{display:grid;gap:8px;margin:14px 0}
.video-curto-gerenciado{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;border:1px solid #2e5236;border-radius:10px;background:#09130b}
.video-curto-gerenciado div:first-child{display:grid;gap:3px;min-width:0}
.video-curto-gerenciado b,
.video-curto-gerenciado small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.video-curto-gerenciado small{color:#b7c9ba}
.video-curto-gerenciado div:last-child{display:flex;gap:5px}
.video-curto-gerenciado button{border:1px solid #3b7045;border-radius:7px;padding:6px;background:#122417;color:#eef8ef;font-weight:700;font-size:.75rem}
@media(max-width:640px){.video-curto-gerenciado{align-items:flex-start;flex-direction:column}
.video-curto-gerenciado div:last-child{width:100%;flex-wrap:wrap}
}

/* ── Rodapé de confiança GABA3 (2026-09-08, pedido do dono com imagem
   de referência: 4 colunas ícone+texto, igual a um app de delivery
   profissional — substitui a fita corrida de texto que havia antes).
   Compacto de propósito (1 linha só, ~40px) — a fita antiga foi
   removida numa sessão anterior por "ocupar espaço à toa"; essa
   preocupação continua válida, por isso aqui é enxuto, não uma faixa
   grande. ── */
/* Bug real (2026-09-08): tinha um preto sólido (#060b07) tapando a
   madeira do body — o dono pediu explicitamente que o fundo inteiro,
   incluindo o rodapé, seja a mesma madeira escura contínua da
   referência, nunca uma faixa preta separada por cima. */
.publica-footer{border-top:1px solid rgba(120,78,42,.55);background:linear-gradient(180deg,rgba(6,8,4,.55),rgba(6,8,4,.72)),url("/assets/brand/fondo-madera-oscura-gaba3.png") center/cover no-repeat;padding:9px 20px 13px}
.publica-footer-confianca{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap}
.publica-footer-item{display:flex;align-items:center;gap:9px;padding:0 clamp(14px,3vw,36px);border-right:1px solid rgba(202,162,60,.22);color:#9dff70;white-space:nowrap}
.publica-footer-item:first-child{padding-left:0}
.publica-footer-item svg{flex:0 0 auto}
.publica-footer-item div{display:flex;flex-direction:column;line-height:1.25}
.publica-footer-item b{color:#eafff0;font-size:12px;font-weight:800;letter-spacing:.01em}
.publica-footer-item span{color:#8a9a86;font-size:10.5px}
/* Assinatura real da loja — mesma fileira dos 4 selos de confiança, os
   selos ficam encostados à esquerda (nunca mais centralizados) pra
   sempre sobrar espaço pra assinatura na ponta direita, igual já
   acontece em Criadores/Profissional. Nunca inventa nome nenhum. */
.publica-footer-signature{flex:1 1 auto;min-width:0;margin-left:14px;text-align:right;font-family:"Brush Script MT",cursive;font-size:17px;color:#e0c477;white-space:nowrap;display:inline-block;transform:rotate(-5deg) translateY(-3px);transform-origin:bottom center}
/* Frases próprias do dono (commerceRibbon.js) — só existe/aparece
   quando ele definiu alguma, uma segunda fileira fina abaixo da de
   confiança. */
.publica-footer-ribbon{overflow:hidden;margin-top:7px;padding-top:7px;border-top:1px solid rgba(202,162,60,.25)}
.publica-footer-ribbon[hidden]{display:none!important}
.publica-footer-track{display:flex;width:max-content;animation:gaba3-footer-marquee-comercio 22s linear infinite}
.publica-footer-track span{display:flex;align-items:center;gap:8px;padding:0 40px;font-size:12px;font-weight:800;letter-spacing:.02em;color:#eafff0;white-space:nowrap}
.publica-footer-track svg{flex:0 0 auto;color:#9dff70}
@keyframes gaba3-footer-marquee-comercio{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sr-only-footer{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
@media(prefers-reduced-motion:reduce){.publica-footer-track{animation:none}}
/* No celular a tela é pequena — o rodapé inteiro (4 selos + assinatura +
   ribbon) rouba espaço da tela principal e do chat. Pedido do dono
   (2026-09-14): no mobile não vai assinatura nenhuma — só a píldora do
   chat, mesmo critério já usado na sala profissional. */
@media(max-width:720px){
    .publica-footer{display:none!important}
}

/* ── Lembrete de convites em horário fixo (só dono vê) ── */
.publica-invite-reminder{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2000;max-width:min(90vw,380px);padding:16px 18px;border-radius:14px;background:#0e1c11;border:2px solid #caa23c;box-shadow:0 14px 30px #0007,0 0 0 2px #e0c47755;color:#eafff0;animation:publica-invite-reminder-luzes 1.8s ease-in-out infinite}
.publica-invite-reminder-titulo{margin:0 0 12px;font-size:14.5px;font-weight:800;color:#eafff0;overflow-wrap:break-word}
.publica-invite-reminder-acoes{display:flex;gap:8px;flex-wrap:wrap}
@keyframes publica-invite-reminder-luzes{0%,100%{box-shadow:0 14px 30px #0007,0 0 0 2px #e0c47755}50%{box-shadow:0 14px 30px #0007,0 0 0 4px #e0c477cc}}
@media(prefers-reduced-motion:reduce){.publica-invite-reminder{animation:none}}

/* 2026-09-08 (pedido do dono): a lupa saiu — tocar na própria foto já
   amplia a imagem (ver o addEventListener('click', ...) de cada card em
   commercialRoom.js), o ícone era redundante. "+" (adicionar ao carrinho)
   fica sozinho à esquerda; câmera ao vivo passa pro canto direito. */
.pagina-publica .carrinho-rapido-btn{position:absolute;top:6px;left:6px;z-index:4;display:grid;place-items:center;width:28px;height:28px;border:0;background:transparent;color:#fff;cursor:pointer;filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));transition:transform .15s ease,color .15s ease}
.pagina-publica .carrinho-rapido-btn:hover{transform:scale(1.12)}
.pagina-publica .carrinho-rapido-btn--ok{color:#55c900}
.pagina-publica .carrinho-rapido-btn--esgotado{color:#ff8a8a;cursor:default;pointer-events:none}
/* Pedir câmera ao vivo — só aparece pro cliente (nunca pro próprio dono
   vendo a vitrine). */
.pagina-publica .camera-ao-vivo-btn{position:absolute;top:6px;right:6px;z-index:4;display:grid;place-items:center;width:28px;height:28px;border:0;background:transparent;color:#fff;cursor:pointer;filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));transition:transform .15s ease,color .15s ease}
.pagina-publica .camera-ao-vivo-btn:hover{transform:scale(1.12)}
.pagina-publica .camera-ao-vivo-btn--pendente{color:#ffb347;cursor:default;pointer-events:none;animation:gaba3-camera-pulso 1.4s ease-in-out infinite}
@keyframes gaba3-camera-pulso{0%,100%{opacity:1}50%{opacity:.45}}

/* Modal do cliente enquanto assiste — igual em espírito ao zoom de
   produto (tela cheia escura), mas com vídeo ao vivo e um contador. */
.gaba3-camera-modal{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;background:rgba(4,6,4,.88)}
.gaba3-camera-modal-caixa{position:relative;width:min(92vw,480px);border-radius:16px;overflow:hidden;background:#0a0f0a;border:1px solid rgba(255,255,255,.14)}
.gaba3-camera-modal-caixa video{width:100%;aspect-ratio:3/4;object-fit:cover;background:#000;display:block}
.gaba3-camera-modal-contador{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;font-variant-numeric:tabular-nums}
.gaba3-camera-modal-fechar{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;font-size:14px}
/* Câmera do próprio cliente — sempre opt-in, canto oposto ao contador,
   escondida até a pessoa decidir ligar (vídeo sem srcObject não mostra
   nada, então não precisa de hidden extra). */
.gaba3-camera-modal-eu{position:absolute;bottom:52px;right:10px;width:84px;height:112px;border-radius:10px;object-fit:cover;background:#000;border:1px solid rgba(255,255,255,.25)}
.gaba3-camera-modal-eu-btn{position:absolute;bottom:10px;left:10px;right:10px;border:0;border-radius:10px;padding:9px;background:rgba(255,255,255,.14);color:#fff;font-size:13px;cursor:pointer}
.gaba3-camera-modal-eu-btn--ativo{background:#55c900;color:#07200b}

/* Pedidos pendentes pro dono — canto inferior direito, uma pilha de
   cartões chicos (cabe 1, 2 ou 3 pedidos ao mesmo tempo, nunca a sala
   inteira pedindo de uma vez por causa do limite do servidor). */
#gaba3-camera-dono-painel{position:fixed;bottom:16px;right:16px;z-index:8500;display:flex;flex-direction:column;gap:8px;max-width:min(92vw,320px)}
.gaba3-camera-pedido-card{background:#12190f;border:1px solid rgba(255,180,60,.4);border-radius:12px;padding:10px 12px;color:#fff;font-size:13px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.gaba3-camera-pedido-card p{margin:0 0 8px}
.gaba3-camera-pedido-card button{border:0;border-radius:8px;padding:6px 12px;font-size:12px;cursor:pointer;margin-right:6px}
.gaba3-camera-pedido-aceitar{background:#55c900;color:#07200b}
.gaba3-camera-pedido-recusar{background:rgba(255,255,255,.12);color:#fff}

/* Barra do dono enquanto está transmitindo pra alguém — mesmo canto do
   painel de pedidos (fica no lugar dele quando a sessão já começou). */
#gaba3-camera-dono-status{position:fixed;bottom:16px;right:16px;z-index:8500;display:flex;align-items:center;gap:8px;background:#12190f;border:1px solid rgba(255,180,60,.4);border-radius:999px;padding:8px 12px;color:#fff;font-size:13px;flex-wrap:wrap;max-width:min(92vw,360px)}
#gaba3-camera-dono-status[hidden]{display:none}
#gaba3-camera-dono-status button{border:0;border-radius:999px;padding:5px 10px;font-size:12px;cursor:pointer;background:rgba(255,255,255,.14);color:#fff}
.gaba3-camera-dono-status-tempo{font-variant-numeric:tabular-nums}
/* Miniatura do cliente que decidiu ligar a própria câmera — só aparece
   se ELE ligou, nunca por iniciativa do dono. */
.gaba3-camera-dono-thumb{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #55c900}
/* Selo ESGOTADO — cobre a foto inteira com uma faixa escura, pra ficar
   claro pro cliente ANTES de tentar pedir (o servidor já bloqueia o
   pedido de qualquer jeito, mas descobrir só lá seria uma experiência
   ruim). Fica embaixo da faixa de preço, então usa z-index um degrau
   abaixo, e não cobre o texto do preço. */
.pagina-publica .gaba3-esgotado-selo{
    position:absolute;
    inset:0;
    z-index:2;
    display:grid;
    place-items:center;
    background:rgba(10,4,4,.62);
    color:#ffdede;
    font-size:15px;
    font-weight:900;
    letter-spacing:.08em;
    text-shadow:0 2px 6px #000a;
    pointer-events:none;
}
.pagina-publica .gaba3-estoque-baixo-selo{
    position:absolute;
    top:6px;
    left:6px;
    z-index:3;
    padding:3px 8px;
    border-radius:999px;
    background:rgba(230,140,20,.94);
    color:#2a1400;
    font-size:10.5px;
    font-weight:900;
    letter-spacing:.02em;
    box-shadow:0 3px 10px #0006;
    pointer-events:none;
}
.pagina-publica .publica-zoom-add:disabled{
    background:rgba(120,40,40,.5);
    color:#ffb3b3;
    cursor:default;
    box-shadow:none;
}
.pagina-publica .publica-zoom-add:disabled:hover{filter:none;transform:none}
.publica-zoom-lightbox{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(3,6,4,.94);backdrop-filter:blur(4px)}
.publica-zoom-viewport{position:relative;width:100%;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;cursor:grab}
.publica-zoom-viewport img{max-width:92%;max-height:88%;object-fit:contain;user-select:none;-webkit-user-drag:none;transition:transform .04s linear;will-change:transform}
.publica-zoom-fechar{position:absolute;top:14px;left:14px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(10,20,12,.85);color:#fff;cursor:pointer;display:grid;place-items:center}
.publica-zoom-denunciar{position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(10,20,12,.85);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:15px}
.publica-zoom-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(10,20,12,.72);color:#fff;cursor:pointer;display:grid;place-items:center}
.publica-zoom-prev{left:10px}
.publica-zoom-next{right:10px}
.publica-zoom-fotos{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:8px 16px 0;max-width:100%;box-sizing:border-box}
.publica-zoom-foto-mini{width:44px;height:44px;flex:none;border-radius:7px;overflow:hidden;border:2px solid transparent;background:rgba(10,20,12,.6);padding:0;cursor:pointer;opacity:.62;transition:opacity .15s,border-color .15s}
.publica-zoom-foto-mini img{width:100%;height:100%;object-fit:cover;display:block}
.publica-zoom-foto-mini:hover{opacity:.85}
.publica-zoom-foto-mini--ativa{opacity:1;border-color:var(--gaba3-verde-brillante,#7fff5b)}
.publica-zoom-variantes{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:8px 16px 0;max-width:100%;box-sizing:border-box}
.publica-zoom-variante-chip{padding:7px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(10,20,12,.55);color:#e8f5e6;font-size:13px;cursor:pointer;transition:background .15s,border-color .15s}
.publica-zoom-variante-chip:hover{border-color:rgba(255,255,255,.6)}
.publica-zoom-variante-chip--ativa{background:linear-gradient(135deg,var(--gaba3-verde-brillante,#7fff5b),var(--gaba3-verde,#55c900));color:#07200b;border-color:transparent;font-weight:600}

/* ── Avaliações do produto (dentro do zoom) ── */
.publica-zoom-avaliacoes-toggle{background:none;border:0;color:#f0d878;font-size:13px;cursor:pointer;padding:2px 0;text-decoration:underline;text-underline-offset:2px}
.publica-zoom-avaliacoes-toggle:hover{color:#ffe89a}
.publica-zoom-avaliacoes-painel{position:absolute;left:0;right:0;bottom:0;max-height:70%;overflow-y:auto;background:rgba(6,12,8,.97);border-top:1px solid rgba(255,255,255,.15);border-radius:16px 16px 0 0;padding:16px;box-sizing:border-box;z-index:3}
.publica-zoom-avaliacoes-painel h3{margin:0 0 10px;color:#fff;font-size:15px}
.publica-zoom-avaliacoes-fechar,#publica-zoom-avaliacoes-fechar{position:absolute;top:10px;right:10px}
.publica-zoom-avaliacoes-lista{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.publica-zoom-avaliacoes-vazio{color:#a9c4a6;font-size:13px;text-align:center;padding:8px 0}
.publica-avaliacao-item{border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;background:rgba(255,255,255,.03)}
.publica-avaliacao-item-estrelas{color:#f0d878;font-size:13px;letter-spacing:1px}
.publica-avaliacao-item-data{color:#9fb89b;font-size:11px;margin-left:6px}
.publica-avaliacao-item p{margin:6px 0 0;color:#dfeedc;font-size:13px;line-height:1.4}
.publica-zoom-avaliacoes-form{border-top:1px solid rgba(255,255,255,.1);padding-top:12px}
.publica-zoom-avaliacoes-hint{color:#c9e8c8;font-size:12px;margin:0 0 6px}
.publica-zoom-avaliacoes-estrelas{display:flex;gap:4px;margin-bottom:8px}
.publica-zoom-avaliacoes-estrela{background:none;border:0;font-size:26px;line-height:1;color:rgba(255,255,255,.28);cursor:pointer;padding:0}
.publica-zoom-avaliacoes-estrela--ativa{color:#f0d878}
.publica-zoom-avaliacoes-form textarea{width:100%;box-sizing:border-box;min-height:56px;resize:vertical;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;font-size:13px;padding:8px;font-family:inherit;margin-bottom:8px}
#publica-zoom-avaliacoes-enviar:disabled{opacity:.5;cursor:not-allowed}
#publica-zoom-avaliacoes-status{display:block;margin-top:6px}
.publica-zoom-rodape{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;padding:10px 16px calc(14px + env(safe-area-inset-bottom,0));box-sizing:border-box}
.publica-zoom-dica{margin:0;color:#c9e8c8;font-size:13px;text-align:center}
.publica-zoom-add{
    padding:11px 26px;
    border:0;
    border-radius:999px;
    background:linear-gradient(135deg,var(--gaba3-verde-brillante,#7fff5b),var(--gaba3-verde,#55c900));
    color:#07200b;
    font-weight:900;
    font-size:14px;
    letter-spacing:.02em;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(85,201,0,.35);
    transition:transform .15s ease,filter .15s ease;
}
.publica-zoom-add:hover{filter:brightness(1.06);transform:translateY(-1px)}
.publica-zoom-add:active{transform:translateY(0)}

/* Título do catálogo como barra fixa (com espaço próprio), em vez do
   selo flutuante por cima das imagens usado no resto da sala — aqui ele
   fica sempre visível, nunca cobrindo os produtos logo abaixo. */
.pagina-publica .publica-catalogo{display:flex;flex-direction:column}
.pagina-publica .publica-catalogo>header:not(.sem-titulo){
    position:static!important;
    z-index:auto!important;
    flex:0 0 auto;
    min-width:0!important;
    max-width:100%!important;
    padding:11px 16px 4px!important;
    background:none!important;
    box-shadow:none!important;
    border-radius:0!important;
    pointer-events:auto!important;
}
.pagina-publica .publica-catalogo>header:not(.sem-titulo) strong{
    font-size:clamp(12px,1.15vw,14px)!important;
    line-height:1.2;
    text-shadow:none!important;
    color:#eaffdc;
    font-weight:800;
    white-space:nowrap!important;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
    display:block;
}
.pagina-publica .publica-catalogo>header.sem-titulo{display:none}
.pagina-publica .publica-catalogo #publica-categorias{flex:0 0 auto}
/* flex:1 1 auto só faz sentido com .publica-catalogo em display:flex —
   no mobile (≤720px) esse mesmo seletor vira display:block (ver media
   query acima), e height:auto!important nessas condições colapsava o
   catálogo inteiro pra 0px de altura (confirmado: produtos reais
   carregados, só ficavam com altura 0 e invisíveis). Restrito a telas
   largas, onde o contexto flex realmente existe. */
@media(min-width:721px){
    .pagina-publica .publica-catalogo .catalogo-pergaminho{flex:1 1 auto;min-height:0;height:auto!important}
}

/* Setores do catálogo (painel de configuração do dono) */
.conf-setor-item{
    display:flex;
    align-items:center;
    gap:8px;
    background:rgba(10,6,2,.45);
    border:1px solid rgba(182,132,52,.12);
    border-radius:8px;
    padding:7px 10px;
}
.conf-setor-ico{
    width:30px;
    height:30px;
    border-radius:7px;
    background:rgba(30,18,6,.55);
    display:grid;
    place-items:center;
    font-size:15px;
    flex:none;
    color:#e6c88c;
}
.conf-setor-ico svg{width:16px;height:16px}
.conf-setor-icone-select{
    flex:none;
    max-width:92px;
    padding:4px 6px;
    border:1px solid rgba(182,132,52,.3);
    border-radius:6px;
    background:#160f06;
    color:#e6c88c;
    font-size:10px;
}
.conf-setor-info{flex:1;min-width:0}
.conf-setor-info b{
    display:block;
    font-size:12px;
    color:rgba(230,200,140,.90);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.conf-setor-info small{font-size:11px;color:#2ecc55}
.conf-setor-add{
    flex:none;
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border:1px solid rgba(85,201,0,.5);
    border-radius:50%;
    background:rgba(85,201,0,.12);
    color:#8fff67;
    font-size:16px;
    font-weight:900;
    cursor:pointer;
}
.conf-setor-add:hover{background:rgba(85,201,0,.28)}
.conf-setor-del{
    flex:none;
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    background:transparent;
    color:rgba(255,255,255,.6);
    font-size:13px;
    cursor:pointer;
}
.conf-setor-del:hover{background:rgba(255,80,80,.18);color:#ffb3b3}

/* Guia do painel de configuração — ajuda o dono a entender qual bloco
   controla qual tela que o cliente vê. */
.conf-guia-painel{
    margin:0 18px 12px;
    padding:10px 12px;
    border:1px solid rgba(85,201,0,.25);
    border-radius:9px;
    background:rgba(85,201,0,.08);
    color:#cdeec0;
    font-size:11.5px;
    line-height:1.5;
}
.conf-seccion-explicacao{
    margin:0 0 12px;
    padding:8px 10px;
    border-left:2px solid rgba(85,201,0,.45);
    background:rgba(85,201,0,.06);
    border-radius:0 6px 6px 0;
    color:#d7f0cc;
    font-size:11.5px;
    line-height:1.5;
}
.conf-seccion-explicacao b{color:#9dff70}

/* Ofertas: 1 oferta grande em cima + as demais menores embaixo, lado a
   lado — o normal e mais bonito é 3 no total (1 + 2); 4 é o teto, quando
   O dono tem muitas ofertas e quer colocar mais uma. */
.pagina-publica .publica-ofertas .ofertas-trilho[data-ofertas]{
    display:grid!important;
    grid-row:2!important;
    grid-auto-flow:row!important;
    grid-template-rows:minmax(0,1.35fr) minmax(0,1fr)!important;
    gap:0!important;
    /* Bug real de auditoria (2026-09-14, o dono insistiu de novo: "bordes
       negros... parte de abajo del lado derecho"): faltava zerar o
       padding aqui — .ofertas-carousel (outra classe do mesmo elemento)
       tem padding:12px 10px 8px, e por não ter !important nenhum lá,
       eu achava que meu gap:0 já bastava. O padding sobrava como uma
       moldura escura ao redor das 4 fotos. */
    padding:0!important;
    overflow:hidden!important;
    scroll-snap-type:none!important;
    min-height:0!important;
}
.pagina-publica .publica-ofertas .ofertas-trilho[data-ofertas] .oferta-cartao{
    min-height:0!important;
    width:100%!important;
    /* Mesmo pedido do dono (2026-09-14) já aplicado no Catálogo/
       Lançamentos: sem borda, sem sombra, sem canto redondo, sem faixa
       escura embaixo do nome/preço — só a foto, texto com text-shadow. */
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
}
.pagina-publica .publica-ofertas .ofertas-trilho[data-ofertas] .oferta-cartao .gaba3-price-lettering{
    background:none!important;
    max-height:none!important;
}
.pagina-publica .publica-ofertas .ofertas-trilho[data-ofertas] .oferta-cartao .gaba3-letter-name,
.pagina-publica .publica-ofertas .ofertas-trilho[data-ofertas] .oferta-cartao .gaba3-letter-price{
    text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.8)!important;
}
.pagina-publica .publica-ofertas .ofertas-trilho[data-ofertas="2"]{grid-template-columns:1fr!important}
.pagina-publica .publica-ofertas .ofertas-trilho[data-ofertas="2"] .oferta-cartao:nth-child(1){grid-column:1;grid-row:1}
.pagina-publica .publica-ofertas .ofertas-trilho[data-ofertas="2"] .oferta-cartao:nth-child(2){grid-column:1;grid-row:2}

.pagina-publica .publica-ofertas .ofertas-trilho[data-ofertas="3"]{grid-template-columns:repeat(2,1fr)!important}
.pagina-publica .publica-ofertas .ofertas-trilho[data-ofertas="3"] .oferta-cartao:nth-child(1){grid-column:1/3;grid-row:1}
.pagina-publica .publica-ofertas .ofertas-trilho[data-ofertas="3"] .oferta-cartao:nth-child(2){grid-column:1;grid-row:2}
.pagina-publica .publica-ofertas .ofertas-trilho[data-ofertas="3"] .oferta-cartao:nth-child(3){grid-column:2;grid-row:2}

.pagina-publica .publica-ofertas .ofertas-trilho[data-ofertas="4"]{grid-template-columns:repeat(3,1fr)!important}
.pagina-publica .publica-ofertas .ofertas-trilho[data-ofertas="4"] .oferta-cartao:nth-child(1){grid-column:1/4;grid-row:1}
.pagina-publica .publica-ofertas .ofertas-trilho[data-ofertas="4"] .oferta-cartao:nth-child(2){grid-column:1;grid-row:2}
.pagina-publica .publica-ofertas .ofertas-trilho[data-ofertas="4"] .oferta-cartao:nth-child(3){grid-column:2;grid-row:2}
.pagina-publica .publica-ofertas .ofertas-trilho[data-ofertas="4"] .oferta-cartao:nth-child(4){grid-column:3;grid-row:2}

.pagina-publica .publica-ofertas:has(.ofertas-trilho[data-ofertas]) .ofertas-dots{display:none}

/* Buscador de produtos — mesmo modelo visual da lupa da plataforma
   (ícone + campo pill), agora dentro da própria barra de navegação,
   do lado direito (ver .publica-nav-utilidades). */
.publica-busca-lupa{
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    flex:none;
    border:1px solid rgba(157,255,112,.28);
    border-radius:50%;
    background:rgba(10,6,2,.30);
    color:#9dff70;
    cursor:pointer;
}
.publica-busca-lupa:hover,
.publica-busca-lupa:focus-visible{background:rgba(85,201,0,.22);outline:none}
.publica-busca-lupa[hidden]{display:none}
.publica-busca-lupa.ouvindo{
    background:#d62635;
    border-color:#d62635;
    color:#fff;
    animation:publica-busca-pulso 1.1s ease-in-out infinite;
}
@keyframes publica-busca-pulso{
    0%,100%{box-shadow:0 0 0 0 rgba(214,38,53,.55)}
    50%{box-shadow:0 0 0 6px rgba(214,38,53,0)}
}
/* Pílula de busca sempre visível (2026-09-08, pedido do dono com imagem
   de referência) — campo+botão de lupa dentro de um único recipiente
   "estirado", igual a um app de delivery profissional. */
.publica-busca-pildora{
    display:flex;
    align-items:center;
    gap:2px;
    width:min(30vw,260px);
    height:34px;
    padding:0 4px 0 14px;
    border:1px solid rgba(157,255,112,.32);
    border-radius:18px;
    background:rgba(10,6,2,.42);
    transition:border-color .15s ease,background .15s ease;
}
.publica-busca-pildora:focus-within{border-color:rgba(157,255,112,.6);background:rgba(10,6,2,.6)}
.publica-busca-input{
    flex:1 1 auto;
    min-width:0;
    width:auto;
    height:100%;
    padding:0;
    border:0;
    background:transparent;
    color:#eaffdc;
    font-size:12.5px;
    outline:none;
}
.publica-busca-input::placeholder{color:rgba(234,255,220,.45)}
.publica-busca-submeter{
    display:grid;
    place-items:center;
    flex:none;
    width:26px;
    height:26px;
    border:0;
    border-radius:50%;
    background:rgba(85,201,0,.28);
    color:#c8ffb0;
    cursor:pointer;
}
.publica-busca-submeter:hover,
.publica-busca-submeter:focus-visible{background:rgba(85,201,0,.42);outline:none}
@media(max-width:480px){
    .publica-busca-pildora{width:38vw}
}
/* Classe genérica de "X fechar", reusada por outros painéis (funcionário,
   avaliações de produto) — não é mais usada pela busca (agora sempre
   aberta), mas continua servindo esses outros lugares. */
.publica-busca-fechar{
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    flex:none;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#eaffdc;
    font-size:12px;
    cursor:pointer;
}
.publica-busca-fechar[hidden]{display:none}

/* Título "Ofertas" proporcional ao tamanho do painel — estava enorme
   (herdado de um clamp pensado pra telas maiores). */
.pagina-publica .publica-ofertas>header:not(.sem-titulo){
    padding:8px 12px!important;
    background:linear-gradient(90deg,#061207f2,#0612079a,transparent)!important;
    box-shadow:none!important;
    min-width:0!important;
    max-width:90%!important;
}
.pagina-publica .publica-ofertas>header:not(.sem-titulo) strong{
    font-size:clamp(13px,1.3vw,16px)!important;
    text-shadow:none!important;
    letter-spacing:.01em;
}

/* Vida e movimento no painel de ofertas: as fotos entram com um leve
   deslize + zoom suave contínuo na oferta principal, pra não ficar
   parado feito uma foto estática. */
.pagina-publica .oferta-cartao{animation:oferta-entrada .5s ease both}
.pagina-publica .oferta-cartao:nth-child(2){animation-delay:.06s}
.pagina-publica .oferta-cartao:nth-child(3){animation-delay:.12s}
.pagina-publica .oferta-cartao:nth-child(4){animation-delay:.18s}
@keyframes oferta-entrada{
    from{opacity:0;transform:translateY(10px) scale(.98)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
.pagina-publica .ofertas-trilho[data-ofertas] .oferta-cartao:first-child .imagem-oferta-produto{
    animation:oferta-zoom-lento 9s ease-in-out infinite alternate;
}
@keyframes oferta-zoom-lento{
    from{transform:scale(1)}
    to{transform:scale(1.07)}
}
@media(prefers-reduced-motion:reduce){
    .pagina-publica .oferta-cartao,
    .pagina-publica .ofertas-trilho[data-ofertas] .oferta-cartao:first-child .imagem-oferta-produto{animation:none}
    .pagina-publica .gaba3-letter-price--salto{animation:none}
}

/* Convite de funcionário + painel simplificado (modo funcionário) */
.publica-convite-modal{
    position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
    background:rgba(3,6,4,.82);backdrop-filter:blur(3px);padding:16px;
}
.publica-convite-modal-caixa{
    width:min(420px,100%);max-height:calc(100vh - 32px);overflow:auto;
    padding:20px;border-radius:16px;border:1px solid rgba(85,201,0,.35);
    background:linear-gradient(160deg,#0d1710,#070c08);color:#eaffdc;
    box-shadow:0 24px 70px #000a;
}
.publica-convite-modal-caixa h2{margin:0 0 10px;font-size:17px;color:#9dff70}
.publica-convite-modal-caixa p{font-size:13px;line-height:1.5;color:#d7f0cc}
.publica-convite-modal-acoes{display:flex;gap:8px;margin-top:14px}
.publica-convite-modal-acoes button{flex:1}
#publica-staff-abrir{
    position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;font-size:26px;
    background:#55c900;color:#061000;box-shadow:0 10px 26px #000a;
}
#publica-staff-abrir[hidden]{display:none}
#publica-staff-painel .conf-label{margin-top:10px}

/* ════════════════════════════════════════════════════════════════
   Regra final e definitiva: NENHUMA barra de rolagem nativa (com
   setinhas) pode aparecer em nenhum painel rolável da sala de
   comércio. Pedido explícito do dono, repetido várias vezes — vem
   por último no arquivo para vencer qualquer regra anterior.
   ════════════════════════════════════════════════════════════════ */
.pagina-publica .publica-productos,
.pagina-publica .ofertas-trilho,
.pagina-publica .catalogo-pergaminho,
.pagina-publica .lista-mensajes,
.pagina-publica .conf-panel,
.pagina-publica .agents-panel-in-profile{
    scrollbar-width:thin!important;
    scrollbar-color:rgba(85,201,0,.4) transparent!important;
}
.pagina-publica .publica-productos::-webkit-scrollbar,
.pagina-publica .ofertas-trilho::-webkit-scrollbar,
.pagina-publica .catalogo-pergaminho::-webkit-scrollbar,
.pagina-publica .lista-mensajes::-webkit-scrollbar,
.pagina-publica .conf-panel::-webkit-scrollbar,
.pagina-publica .agents-panel-in-profile::-webkit-scrollbar{
    width:6px!important;
    height:6px!important;
}
.pagina-publica .publica-productos::-webkit-scrollbar-button,
.pagina-publica .ofertas-trilho::-webkit-scrollbar-button,
.pagina-publica .catalogo-pergaminho::-webkit-scrollbar-button,
.pagina-publica .lista-mensajes::-webkit-scrollbar-button,
.pagina-publica .conf-panel::-webkit-scrollbar-button,
.pagina-publica .agents-panel-in-profile::-webkit-scrollbar-button{
    display:none!important;
    width:0!important;
    height:0!important;
}
.pagina-publica .publica-productos::-webkit-scrollbar-track,
.pagina-publica .ofertas-trilho::-webkit-scrollbar-track,
.pagina-publica .catalogo-pergaminho::-webkit-scrollbar-track,
.pagina-publica .lista-mensajes::-webkit-scrollbar-track,
.pagina-publica .conf-panel::-webkit-scrollbar-track,
.pagina-publica .agents-panel-in-profile::-webkit-scrollbar-track{
    background:transparent!important;
}
.pagina-publica .publica-productos::-webkit-scrollbar-thumb,
.pagina-publica .ofertas-trilho::-webkit-scrollbar-thumb,
.pagina-publica .catalogo-pergaminho::-webkit-scrollbar-thumb,
.pagina-publica .lista-mensajes::-webkit-scrollbar-thumb,
.pagina-publica .conf-panel::-webkit-scrollbar-thumb,
.pagina-publica .agents-panel-in-profile::-webkit-scrollbar-thumb{
    background:rgba(85,201,0,.4)!important;
    border-radius:6px!important;
}

/* ════════════════════════════════════════════════════════════════
   Chat fixo no rodapé, só no celular (ronda 7, pedido real do dono:
   "igual como pasa en WhatsApp" — a barra de escrever nunca some).
   Fica pequena (só o compositor) enquanto o cliente navega o catálogo;
   expande (mostra o histórico) ao focar o campo ou mandar mensagem.
   Nunca mexe no desktop — tudo dentro de max-width:850px. Vem de
   propósito no FIM do arquivo, pra vencer por ordem de cascata as
   regras !important dos blocos 850px/720px já existentes, sem precisar
   reescrevê-las nem brigar de especificidade com elas. ════════════ */
@media(max-width:850px){
.pagina-publica .publica-chat-panel{
    position:fixed!important;
    left:0!important; right:0!important; top:auto!important; bottom:0!important;
    z-index:40;
    width:100%!important; max-width:100%!important;
    min-height:0!important;
    max-height:calc(64px + env(safe-area-inset-bottom,0px));
    border-radius:14px 14px 0 0!important;
    box-shadow:0 -6px 20px rgba(0,0,0,.4);
    transition:max-height .28s ease;
    overflow:hidden!important;
}
.pagina-publica .publica-chat-panel.publica-chat-expandido{
    /* o dono (ronda nova): não é mais um painel grande cobrindo a tela —
       agora a cabeça encolhe pra liberar espaço de verdade (ver
       .publica-topo-compacto abaixo), então o chat só precisa crescer o
       suficiente pra mostrar as últimas mensagens, nunca uma gaveta de
       histórico completo. */
    max-height:min(36dvh,280px);
}
/* Cabeça compacta: ativada junto com o chat expandido (foco no campo de
   escrever). Some tudo — marca, nav, busca, controles, localização,
   pagamento, dados legais, reputação, denunciar, online/visitas, selo —
   só sobra "Aberto" + Seguir/Curtir/Compartilhar, flutuando bem no topo.
   Isso é o que de verdade libera espaço vertical pro catálogo esticar e
   a imagem do produto aparecer completa (o chat crescendo sozinho não
   bastava — ver comentário acima). */
#publica-topo.publica-topo-compacto{
    min-height:0!important;
    padding-top:calc(4px + env(safe-area-inset-top,0px))!important;
    padding-bottom:4px!important;
    row-gap:0!important;
    transition:padding .2s ease;
}
#publica-topo.publica-topo-compacto .marca-propietario-publica,
#publica-topo.publica-topo-compacto .publica-esquerda-info,
#publica-topo.publica-topo-compacto .publica-nav,
#publica-topo.publica-topo-compacto .publica-nav-utilidades,
#publica-topo.publica-topo-compacto .publica-controles-sistema,
#publica-topo.publica-topo-compacto .publica-quiebre-movil,
#publica-topo.publica-topo-compacto #publica-ubicacion,
#publica-topo.publica-topo-compacto #publica-formas-pagamento,
#publica-topo.publica-topo-compacto #publica-dados-legais,
#publica-topo.publica-topo-compacto #publica-reputacao,
#publica-topo.publica-topo-compacto #publica-denunciar-sala,
#publica-topo.publica-topo-compacto #publica-online-agora,
#publica-topo.publica-topo-compacto #publica-visitas-info,
#publica-topo.publica-topo-compacto #publica-selo-verificada{
    display:none!important;
}
#publica-topo.publica-topo-compacto .publica-ubicacion-linha{
    margin:0!important;
    padding:0!important;
    min-height:0!important;
}
/* O visual livre do carrinho (sem caixa) já vem da regra geral de
   #abrir-carrinho-publico.carrinho-miniatura, lá em cima — vale também
   aqui reparentado dentro de .publica-nav-social, sem precisar duplicar
   nada. Só a altura pra bater com os vizinhos de 28px da fileira: */
#publica-topo.publica-topo-compacto #abrir-carrinho-publico.publica-carrinho-compacto{
    height:28px!important;
}
/* "Chat da sala" já escondido sempre (regra unscoped lá em cima, perto de
   .publica-chat-panel) — aqui só o resto do layout mobile encolhido. */
.pagina-publica .publica-chat-panel>section{
    display:flex!important;
    flex-direction:column;
    height:100%;
    max-height:inherit;
}
.pagina-publica .contenido-chat{
    display:flex;
    flex-direction:column;
    min-height:0;
    height:100%;
}
/* Encolhido: some cabeçalho + histórico + painel de figurinhas — só sobra
   o rodapé (.pie-chat), que já tem carita, anexo, campo de escrever e o
   botão de enviar (fileira única, estilo WhatsApp). #publica-composer-tools
   NÃO entra nessa lista de propósito — ele agora é parte fixa da própria
   .pie-chat (display:contents), tem que aparecer sempre, encolhido ou não. */
.pagina-publica .publica-chat-panel:not(.publica-chat-expandido) .publica-bloque>header,
.pagina-publica .publica-chat-panel:not(.publica-chat-expandido) .lista-mensajes,
.pagina-publica .publica-chat-panel:not(.publica-chat-expandido) .publica-figurinhas-panel{
    display:none!important;
}
/* o dono (2026-09-07): encolhido, a barra (64px) sobra mais alta que a
   píldora (~57px) — sem os outros itens do flex-column (escondidos
   acima), a píldora ficava presa no TOPO da barra, sobrando um vão
   embaixo dela até o limite real. `margin-top:auto` empurra ela pro
   fundo da barra, sempre, não importa a altura exata de nenhum dos dois. */
.pagina-publica .publica-chat-panel:not(.publica-chat-expandido) .pie-chat{
    margin-top:auto!important;
}
/* A causa real do vão no celular: uma regra genérica de estilo.css
   (".pagina-sala .contenido-chat{min-height:260px!important}", pensada
   pro chat EXPANDIDO de qualquer sala) também batia na barra ENCOLHIDA
   da Sala Pública (64px) — o .contenido-chat ficava 260px de altura real
   por baixo do pano (cortado só visualmente pelo overflow:hidden do
   painel), e a píldora (ancorada com margin-top:auto acima) ia pro fundo
   DESSE bloco de 260px, saindo da área visível de verdade. 3 classes
   pra vencer a especificidade daquela regra global sem precisar tocar
   nela (outras salas ainda precisam do mínimo de 260px no chat expandido
   delas). */
.pagina-publica .publica-chat-panel:not(.publica-chat-expandido) .contenido-chat{
    min-height:0!important;
    height:100%!important;
}
.pagina-publica .publica-chat-panel.publica-chat-expandido .lista-mensajes{
    display:block!important;
    flex:1 1 auto;
    min-height:0;
    max-height:none;
}
.pagina-publica .publica-chat-panel .pie-chat{
    flex:0 0 auto;
    /* o dono (2026-09-07): sem "mínimo de conforto" nenhum — só a proteção
       real de segurança (notch/gesto do aparelho). Mesma correção já
       aplicada em Privada e Transporte. */
    padding-bottom:env(safe-area-inset-bottom,0px)!important;
}
/* Reserva espaço embaixo do catálogo/ofertas pra nada ficar escondido
   atrás da barra fina fixa. */
.pagina-publica .sala-publica-layout{
    padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))!important;
}
/* Botão flutuante do staff (mesmo canto) sobe pra não ficar embaixo
   da barra nova. */
#publica-staff-abrir{
    bottom:calc(64px + env(safe-area-inset-bottom,0px) + 14px)!important;
}
}