/* GABA3 — Sala Profesionales — reglas propias extraídas de estilo.css.
   Generado automáticamente: mismas declaraciones, mismos selectores,
   sin cambios visuales. */

.professional-page [hidden],
.professional-consultation [hidden]{display:none!important}
html{background:#060b07}
/* Sala estática — pedido do dono, repetido várias vezes: a página inteira
   NUNCA rola, em nenhuma altura de tela. Cabeçalho e rodapé ficam fixos,
   o miolo ocupa o espaço que sobra e quem precisar rolar (lista de
   serviços, chat, meu painel) rola só por dentro, sem barra visível. */
body.pagina-sala.professional-page{height:100dvh;overflow:hidden;display:flex;flex-direction:column;min-height:0;background:radial-gradient(circle at 20% 0,#193622,#07100b 48%);color:#fff}
body.pagina-sala.professional-consultation{min-height:0;background:radial-gradient(circle at 20% 0,#193622,#07100b 48%);color:#fff}
/* 2026-09-08 (referência real, Roberto Lima): cabeçalho o mais fino
   possível, numa fileira só — antes só cabia assim acima de 1180px de
   largura; a maioria das telas reais (e o próprio painel de preview,
   ~1175px) caía no modo empilhado de 3 fileiras (quase 200px de altura).
   Encolhendo cada peça, a fileira única passa a caber bem mais estreito. */
/* Bug real de auditoria (2026-09-14): fondo-madera-gaba3.png (a madeira
   CLARA, reusada de outros cantos da plataforma) com um véu fraco
   (opacidade .32) deixava a cabeceira com um tom visivelmente diferente
   do resto da sala (fundo escuro sólido, sem madeira nenhuma no
   desktop). Véu bem mais forte, quase opaco, pra ela se misturar de
   verdade com o escuro ao redor em vez de destacar como um remendo. */
.professional-header{flex:0 0 auto;min-height:56px;display:flex;align-items:center;gap:8px;padding:8px clamp(10px,2vw,24px);background:linear-gradient(rgba(4,8,5,.88),rgba(4,8,5,.88)),url("../../../assets/brand/fondo-madera-gaba3.png");background-size:cover;background-position:center;border-bottom:1px solid #285130;position:relative}
/* Seguir/curtir/online/visitas — mesmo visual da sala de comércio
   (frontend/commerce-room/styles/commerce-room.css), reaproveitado aqui.
   Sem a moto de entrega: profissionais em geral não fazem entrega. */
.publica-nav-social{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.professional-header .professional-social-linha{margin-left:auto;flex:0 0 auto;flex-wrap:nowrap}
.publica-nav-social-btn{display:flex;align-items:center;gap:3px;height:24px;padding:0 7px;border:1px solid rgba(157,255,112,.28);border-radius:12px;background:rgba(10,6,2,.30);color:#9dff70;font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap}
.publica-nav-social-btn:hover,
.publica-nav-social-btn:focus-visible{background:rgba(85,201,0,.22);outline:none}
.publica-nav-social-btn[aria-pressed="true"]{background:linear-gradient(135deg,#55c900,#217e16);border-color:transparent;color:#06210a}
.publica-nav-social-btn b{font-weight:900;font-size:10px}
.publica-nav-social-btn svg{width:13px;height:13px}
#professional-curtir-sala[aria-pressed="true"] [data-morph-icone]{color:#ff5c7a}
.publica-nav-social-info{cursor:default;padding:0 9px;color:#cdece0}
.publica-nav-social-info:hover{background:rgba(10,6,2,.30)}
#professional-online-agora svg{color:#8fff67}
#professional-online-agora.tem-gente{background:rgba(46,204,85,.14);border-color:rgba(85,201,0,.4);color:#8fff67}
#professional-visitas-info svg{color:#7fc7ff}
.professional-back{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border:1px solid #397842;border-radius:50%;color:#b9ff8b;text-decoration:none;font-size:22px;text-shadow:0 1px 3px #000a}
.professional-identity{display:flex;gap:7px;align-items:center;min-width:0;flex:0 1 auto}
.professional-identity>div{min-width:0}
/* 2026-09-08 (defeito real achado pelo dono): este seletor pegava TODO
   span filho direto — inclusive #professional-reputacao/#professional-
   dados-legais (os dois também são <span>), espremendo o texto "★
   6.7/10" dentro de um círculo de 32x32 igual ao avatar, ilegível. Só o
   avatar (primeiro span) deve ficar redondo pequeno. */
#professional-avatar{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border-radius:50%;background:#4b9e35;color:#061006;font-weight:900;box-shadow:0 1px 4px #0007;overflow:hidden;font-size:13px}
#professional-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* Insignias de reputação/dados legais — pílula real (a classe
   .publica-ubicacion-badge delas vem de commerce-room.css, que esta
   página nem carrega), nunca o círculo do avatar. */
.professional-identity .publica-ubicacion-badge{flex:0 0 auto;display:inline-block;white-space:nowrap;padding:3px 9px;border-radius:999px;border:1px solid rgba(157,255,112,.35);background:rgba(10,6,2,.35);color:#9dff70;font-size:10px;font-weight:800}
.professional-identity h1{margin:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px #000c,0 1px 1px #000;font-size:15px;font-weight:800;line-height:1.15}
.professional-identity small{margin:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px #000c,0 1px 1px #000;font-size:9.5px}
.professional-identity small,
.professional-kicker,
.professional-owner-panel small{color:#9dff70;font-weight:800;letter-spacing:.06em}
.professional-status{flex:0 0 auto;font-size:10px;font-weight:800;padding:5px 9px;border:1px solid #5c3d1f;border-radius:999px;color:#bfff98;background:#3a2413;text-shadow:0 1px 2px #000a}
.professional-page button,
.professional-consultation button{border:1px solid #3e7644;border-radius:10px;background:#102514;color:#efffed;padding:9px 12px;font-weight:800;cursor:pointer}
#professional-owner-toggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:#3a2413;border-color:#5c3d1f;color:#fff}
.professional-owner-toggle-txt{display:none}
.professional-layout{display:grid;grid-template-columns:260px minmax(0,1fr) 320px;grid-template-rows:auto minmax(0,1fr) auto;gap:0;align-items:stretch;background:#0a150d;width:100%;max-width:none;margin:0;padding:0;flex:1 1 auto;min-height:0;overflow:hidden}
/* As 3 colunas reais têm que ficar na linha 2 (a "1fr", flexível) — sem
   isso caíam por padrão na linha 1 ("auto", do tamanho do conteúdo),
   deixando a linha 2 vazia e a coluna do chat sem esticar até o limite
   real de baixo. */
.professional-catalog-rail,
.professional-main-wrap,
.professional-side{grid-row:2}
/* o dono (2026-09-14, 3ª volta): nada de deslizamento vertical próprio
   em Serviços nem na coluna central — sala estática, como uma peça só.
   Em vez de rolar, cada uma remata embaixo com uma ripa de madeira do
   mesmo tom (mesma imagem já usada no rodapé do chat), pra fechar a
   sala como um único acabado, mesmo quando o conteúdo é curto. */
.professional-main-wrap{min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:10px 0 0}
.professional-center{display:grid;gap:6px;min-width:0;flex:0 0 auto}
.professional-center-ripa{flex:0 0 auto;margin-top:auto;height:16px;background:url("../../../assets/brand/fondo-madera-oscura-gaba3.png") center/cover;border-top:1px solid #caa23c}
.professional-card{background:#0a150d;border:1px solid #294d2f;border-radius:12px;padding:10px;box-shadow:0 8px 20px #0004}
.professional-services{display:flex;flex-wrap:wrap;gap:8px}
.professional-services span{background:#17331b;border:1px solid #3c7541;border-radius:999px;padding:7px 10px}
.professional-card .boton-principal{background:#68d428;color:#061006;border-color:#68d428}
.professional-btn-icon{display:inline-flex;align-items:center;gap:7px}
.professional-btn-icon svg{flex:0 0 auto;display:block}
.professional-section-header{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}
.professional-section-header h2{margin:0;font-size:18px}
.professional-section-header small{color:#abc2ad}
.professional-ver-todos{flex:0 0 auto;color:#68d428;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap}
.professional-ver-todos:hover{text-decoration:underline}
.professional-upload{cursor:pointer;border:1px dashed #4b9e4c;border-radius:9px;padding:8px 10px;color:#baff8b;font-weight:750;display:inline-flex;align-items:center;justify-content:center}
.professional-upload svg{display:block;pointer-events:none}
.professional-promo-panel-item label.professional-upload{padding:8px;width:36px;height:36px;flex:0 0 auto}
.professional-nav{flex:1;display:flex;justify-content:center;gap:2px;min-width:0}
.professional-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;color:#c9e8c8;text-decoration:none;font-weight:700;font-size:9.5px;padding:4px 8px;border-radius:8px;border-bottom:2px solid transparent;transition:background .15s ease,color .15s ease,border-color .15s ease;white-space:nowrap;text-shadow:0 1px 3px #000a}
.professional-nav a svg{flex:0 0 auto;width:15px;height:15px}
.professional-nav a:hover,
.professional-nav a:focus-visible{background:#132a17;color:#e8ffb8;outline:none}
/* o dono (2026-09-14): o mesmo brilho/barrinha verde do "Início" (antes só
   no primeiro ícone) agora em todos os 5 — "dá mais vida", pedido dele. */
.professional-nav a{color:#e8ffb8;border-color:#68d428}
.professional-unified-block{background:#0a150d;border:1px solid #294d2f;border-radius:14px;overflow:hidden;box-shadow:0 8px 20px #0004}
.professional-unified-block>.professional-location-bar{border:0;border-radius:0}
.professional-unified-block>.professional-hero-offer{border:0;border-radius:0;border-top:6px solid;border-image:linear-gradient(90deg,#8a5a2b,#caa23c 35%,#e0c477 50%,#caa23c 65%,#8a5a2b) 1;box-shadow:none}
.professional-unified-block>.professional-promo-row{border-top:6px solid;border-image:linear-gradient(90deg,#8a5a2b,#caa23c 35%,#e0c477 50%,#caa23c 65%,#8a5a2b) 1;gap:0}
.professional-unified-block>.professional-promo-row .professional-promo-slot{border-radius:0;border-right:1px solid #caa23c}
.professional-unified-block>.professional-promo-row .professional-promo-slot:last-child{border-right:0}
/* 2026-09-08 (referência real, Roberto Lima): faixa fina de localização —
   cidade real à esquerda (badge), aviso do dono à direita, lápis de
   editar só pro dono. Substitui o antigo "Aviso" (caixa maior, mesma
   informação em outro lugar). */
.professional-location-bar{display:flex;align-items:center;gap:10px;margin-top:0;padding:8px 12px;border:1px solid #1c3621;border-radius:12px;background:transparent}
.professional-location-badge{display:flex;align-items:center;gap:6px;flex:0 0 auto;color:#9dff70;font-size:12px;font-weight:800}
.professional-location-badge [data-morph-icone]{width:15px;height:15px}
.professional-location-note{flex:1;min-width:0;color:#d9e6d7;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.professional-location-bar>button{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;padding:0}
.professional-catalog-rail{position:sticky;top:0;align-self:stretch;height:100%;max-height:100%;overflow:hidden;display:flex;flex-direction:column;border-radius:0;border-left:0;border-top:0;border-bottom:0;border-right:6px solid;border-image:linear-gradient(180deg,#8a5a2b,#caa23c 35%,#e0c477 50%,#caa23c 65%,#8a5a2b) 1;box-shadow:none;background:linear-gradient(150deg,rgba(10,5,2,.32),rgba(6,3,1,.42)),url("../../../assets/brand/fondo-madera-oscura-gaba3.png");background-size:cover;background-position:center}
.professional-catalog-showcase{display:grid;margin:0 -10px 10px;border-radius:0;overflow:hidden;border:0;border-bottom:1px solid #caa23c}
.professional-catalog-showcase[hidden]{display:none!important}
.professional-showcase-cell{position:relative;min-height:150px;border-bottom:1px solid #caa23c;background:#081009}
.professional-showcase-cell:last-child{border-bottom:0}
.professional-showcase-cell img,
.professional-showcase-cell video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.professional-showcase-panel{margin:14px 0;padding:10px;border:1px solid #294d2f;border-radius:12px;background:#07100a}
.professional-showcase-panel h3{margin:0 0 4px}
.professional-showcase-panel small{display:block;margin-bottom:8px;color:#9bb59a}
.professional-showcase-panel label{display:grid;gap:6px;font-weight:700;margin-bottom:8px}
.professional-showcase-panel input,.professional-showcase-panel select{font-weight:400}
.professional-ajuda{font-size:12px;color:#9bb59a;margin:2px 0 8px}
.professional-showcase-manage-list{display:grid;gap:8px;margin-top:10px}
.professional-panel-group-title{margin:18px 0 2px;padding-top:14px;border-top:1px solid #294d2f;font-size:12px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:#caa23c}
.professional-panel-group-title:first-of-type{margin-top:8px;padding-top:0;border-top:0}
.professional-promo-panel-item{display:flex;align-items:center;gap:10px;background:#0d1c11;border:1px solid #294d2f;border-radius:10px;padding:8px}
.professional-promo-panel-item img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:#081009}
.professional-promo-panel-item .professional-promo-panel-label{flex:1;min-width:0;font-size:12px;font-weight:800;color:#dff5d8}
.professional-promo-panel-item button{padding:6px 8px}
.professional-avatar-preview-row{display:flex;align-items:center;gap:10px}
.professional-short-file-row{display:flex;align-items:center;gap:10px;margin:8px 0}
.professional-short-file-name{font-size:12px;color:#a9c9a3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.professional-avatar-preview-row img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:1px solid #294d2f;background:#081009}
.professional-showcase-manage-row{display:flex;align-items:center;gap:8px;border:1px solid #294d2f;border-radius:8px;padding:6px}
.professional-showcase-manage-row img,
.professional-showcase-manage-row video{width:34px;height:34px;flex:0 0 34px;object-fit:cover;border-radius:6px;background:#081009}
.professional-showcase-manage-row span{flex:1;font-size:12px;color:#c9d8c7}
.professional-showcase-manage-row button{flex:0 0 auto;width:26px;height:26px;border-radius:50%;padding:0;display:grid;place-items:center}
/* 2026-09-08 (referência real, Roberto Lima): lista vertical de fileiras
   (foto + texto + preço + botão), não mais uma grade de cartões com
   texto por cima da foto — mesmo dado real (title/duration/price/image
   de CatalogItem), só o layout muda. */
.professional-catalog-list{display:flex;flex-direction:column;gap:6px;padding:6px}
.professional-catalog-box{position:relative;display:flex;align-items:center;gap:10px;min-height:0;border-radius:12px;overflow:visible;background:#0d1c11;border:1px solid #1c3621;padding:6px}
.professional-catalog-box img{position:static;width:52px;height:52px;flex:0 0 52px;object-fit:cover;border-radius:10px;background:#081009}
.professional-catalog-box .professional-promo-card-scrim{display:none}
.professional-catalog-box-info{position:static;height:auto;padding:0;flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.professional-catalog-box-info b{font-size:13px;color:#eafff0;white-space:normal;line-height:1.2;font-weight:800}
.professional-catalog-box-info small{font-size:11px;color:#9bb59a;white-space:normal;line-height:1.25}
.professional-catalog-box-info span{font-size:13px;color:#68d428;font-weight:900}
.professional-catalog-ask{position:static;flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid rgba(85,201,0,.3);background:#0d1c11;color:#9dff70;display:grid;place-items:center;cursor:pointer;padding:0}
.professional-catalog-ask.activo{border-color:#68d428;background:linear-gradient(160deg,#2f7a12,#1a4a0c);color:#e8ffb0}
.professional-page button.professional-catalog-denunciar{position:absolute;top:6px;right:6px;z-index:3;width:22px;height:22px;border-radius:0;border:0;background:transparent;color:#fff;font-size:11px;display:grid;place-items:center;cursor:pointer;padding:0;opacity:0;filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));transition:opacity .15s ease}
.professional-catalog-box:hover .professional-catalog-denunciar,.professional-catalog-box:focus-within .professional-catalog-denunciar{opacity:1}
@media(max-width:780px){.professional-catalog-denunciar{opacity:1}}
/* 2026-09-08 (referência real, Roberto Lima): 3 avisos de confiança
   embaixo da lista de serviços, no mesmo rail esquerdo — o dono chamou
   de "indicaciones" que estavam faltando ali. */
/* o dono (2026-09-09): os 3 avisos ficavam pequenos, comprimidos, sobrando
   madeira vazia embaixo deles — viram caixas maiores e do MESMO tamanho
   (min-height igual pras 3), preenchendo de verdade a coluna. */
.professional-rail-info-row{display:flex;flex-direction:column;gap:8px;padding:8px;margin-top:4px;border-top:1px solid #1c3621;flex:1 1 auto;min-height:0}
.professional-rail-info-row>div{display:flex;align-items:center;gap:11px;flex:1 1 0;min-height:52px;padding:9px 11px;border:1px solid #1c3621;border-radius:11px;background:#07100a}
.professional-rail-info-row [data-morph-icone]{width:23px;height:23px;flex:0 0 23px;color:#68d428}
.professional-rail-info-row b{display:block;font-size:12px;color:#eafff0}
.professional-rail-info-row small{display:block;font-size:10.5px;color:#9bb59a;margin-top:2px}

/* Cartão de horário real (mesmo dado já editável em "Horário, regras e
   preços") — mesma família visual dos 3 avisos acima, pra fechar a coluna
   com informação de verdade em vez de deixar madeira vazia embaixo. */
.professional-rail-hours-card{display:flex;align-items:center;gap:11px;flex:0 0 auto;min-height:52px;padding:9px 11px;margin:8px 8px 0;border:1px solid #1c3621;border-radius:11px;background:#07100a}
.professional-rail-hours-card[hidden]{display:none!important}
.professional-rail-hours-card [data-morph-icone]{width:23px;height:23px;flex:0 0 23px;color:#68d428}
.professional-rail-hours-card b{display:block;font-size:12px;color:#eafff0}
.professional-rail-hours-card small{display:block;font-size:10.5px;color:#9bb59a;margin-top:2px}
.professional-cart-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;min-width:0}
.professional-cart-row[hidden]{display:none!important}
.professional-cart-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 10px;border-radius:999px;background:#132a17;border:1px solid #3c7541;color:#dcf5d8;font-size:12px;font-weight:700;cursor:pointer;max-width:100%}
.professional-cart-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.professional-cart-chip button{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:0;background:#0009;color:#ffc9cf;display:grid;place-items:center;padding:0;cursor:pointer;font-size:11px}
.professional-catalog-form{display:grid;gap:8px;margin-bottom:12px;padding:10px;border:1px solid #294d2f;border-radius:12px;background:#07100a}
.professional-catalog-form[hidden]{display:none!important}
.professional-catalog-form img{width:100%;max-height:160px;object-fit:cover;border-radius:9px}
.professional-catalog-form input{box-sizing:border-box;width:100%;border:1px solid #315f37;border-radius:10px;background:#0a150d;color:#fff;padding:9px}
.professional-catalog-form-actions{display:flex;gap:8px;justify-content:flex-end}
.professional-catalog-form-actions button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;padding:0}
.professional-catalog-form-actions #professional-catalog-cancel,
.professional-catalog-form-actions #professional-offer-cancel{border:1px solid #9a4d58;background:#2a1116;color:#ffc9cf}
.professional-hero-offer{position:relative;min-height:220px;border-radius:18px;overflow:hidden;border:1px solid #294d2f;box-shadow:0 16px 40px #0006}
.professional-hero-offer[hidden]{display:none!important}
.professional-hero-offer>.professional-catalog-form{position:relative;z-index:6;margin:16px}
.professional-hero-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:220px;padding:24px;text-align:center;color:#6a8a6c;background:linear-gradient(135deg,#153420,#081109)}
.professional-hero-empty[hidden]{display:none!important}
.professional-hero-empty p{margin:0;max-width:320px;color:#9bb59a;font-size:14px}
.professional-hero-empty label{cursor:pointer}
.professional-hero-slide[hidden]{display:none!important}
.professional-hero-slide{position:relative;min-height:220px;background:linear-gradient(135deg,#153420,#081109)}
.professional-hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.professional-hero-scrim{position:absolute;inset:0;background:linear-gradient(100deg,#050c07f2 0%,#050c07cc 32%,#050c0740 65%,transparent 100%)}
.professional-hero-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;padding:0;background:#081109cc;backdrop-filter:blur(4px)}
.professional-hero-arrow[hidden]{display:none!important}
.professional-hero-arrow-prev{left:14px}
.professional-hero-arrow-next{right:14px}
.professional-hero-info{position:relative;z-index:2;max-width:min(560px,92%);padding:18px clamp(20px,4vw,44px);display:grid;gap:6px;min-height:220px;align-content:center}
.professional-hero-info .professional-kicker{margin:0}
.professional-hero-info h3{margin:0;font-size:clamp(20px,2.8vw,30px);line-height:1.1}
.professional-hero-info p{margin:0;color:#d9e6d7;max-width:460px}
.professional-offer-badge{justify-self:start;background:#68d428;color:#061006;font-weight:900;font-size:13px;padding:6px 12px;border-radius:999px}
.professional-hero-info .professional-btn-icon{justify-self:start;margin-top:6px}
.professional-hero-dots{position:absolute;z-index:4;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:6px}
.professional-hero-dots span{width:7px;height:7px;border-radius:50%;background:#ffffff55}
.professional-hero-dots span.activo{background:#68d428;width:20px;border-radius:999px;transition:width .2s ease}
/* 2026-09-08 (referência real, Roberto Lima): 3 números reais (nunca
   inventados) — Clientes satisfeitos/Avaliação média/Atendimentos
   realizados, já calculados no servidor (public_statistics). */
.professional-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 12px;background:#0a150d}
.professional-stats-row[hidden]{display:none!important}
.professional-stats-row>div{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;border:1px solid #1c3621;border-radius:10px;background:#07100a}
.professional-stats-row [data-morph-icone]{width:15px;height:15px;flex:0 0 15px;color:#68d428}
.professional-stats-row b{display:block;font-size:12.5px;color:#eafff0}
.professional-stats-row small{display:block;font-size:9px;color:#9bb59a}
/* Avaliação de clientes — dados reais de ProfessionalEvaluation, rota
   pública /evaluations/recent (nunca inventa nota nem comentário). */
/* Menor destaque que os trabalhos — pedido explícito do dono: os nomes
   de quem avalia e o cartão inteiro ficam pequenos, discretos. */
.professional-reviews-section{padding:6px 12px}
.professional-reviews-section .professional-section-header{margin-bottom:6px}
.professional-reviews-section .professional-section-header h2{font-size:13px}
.professional-reviews-section[hidden]{display:none!important}
.professional-reviews-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:5px}
.professional-review-card{padding:4px 6px;border:1px solid #294d2f;border-radius:8px;background:#07100a}
.professional-review-card header{display:flex;align-items:center;gap:4px;margin-bottom:1px}
.professional-review-avatar{width:13px;height:13px;flex:0 0 13px;border-radius:50%;display:grid;place-items:center;background:#4b9e35;color:#061006;font-weight:900;font-size:6px}
.professional-review-card header>div{flex:1;min-width:0}
.professional-review-card header b{display:block;font-size:9.5px;color:#c9d8c7;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.professional-review-card header small{display:none}
.professional-review-stars{flex:0 0 auto;color:#ffc94d;font-size:8.5px;letter-spacing:1px}
.professional-review-card p{margin:0;color:#a8bfa7;font-size:9.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* Trabalhos realizados — galeria real (dados de currentDisplay.portfolio,
   já usados no modal "Sobre"), imagens grandes (mais espaço que avaliações,
   pedido explícito do dono), o 4º vira "+N" quando há mais itens. */
.professional-trabalhos-section{padding:14px 12px}
.professional-trabalhos-section[hidden]{display:none!important}
.professional-trabalhos-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.professional-trabalho-card{position:relative;padding:0;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid #294d2f;background:#081009;cursor:pointer}
.professional-trabalho-card img,
.professional-trabalho-card video{display:block;width:100%;height:100%;object-fit:cover}
.professional-trabalho-badge{position:absolute;right:8px;bottom:8px;font-size:14px;padding:3px 8px;border-radius:999px;background:#050c07cc;line-height:1.4}
.professional-trabalho-mais{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:900;color:#eafff0;background:#050c07b3}
.professional-promo-row{display:grid;grid-template-columns:repeat(3,1fr)}
.professional-promo-row[hidden]{display:none!important}
.professional-promo-slot{position:relative;min-height:220px;overflow:hidden;background:#081009}
.professional-promo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.professional-promo-card-scrim{position:absolute;inset:0;background:linear-gradient(to top,#050c07a0,transparent 55%)}
.professional-promo-slot-empty{display:none!important}
.professional-promo-slot-clickable{cursor:pointer}
.professional-promo-slot-clickable:hover img,
.professional-promo-slot-clickable:focus-visible img{transform:scale(1.04)}
.professional-promo-slot-clickable img{transition:transform .2s ease}
.professional-trust-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.professional-trust-row>div{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:12px 8px;border:1px solid #1c3621;border-radius:12px;background:#07100a;color:#c8f090}
.professional-trust-row span{font-size:11.5px;font-weight:700;color:#c9d8c7;line-height:1.3}
.professional-chat-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-width:0}
.professional-chat-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;background:#4b9e35;color:#061006;font-weight:900;background-size:cover;background-position:center}
.professional-chat-id{min-width:0;flex:1}
.professional-chat-id b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.professional-chat-id small{color:#9dff70;font-size:11.5px}
.professional-live-stage{position:absolute;inset:0;z-index:5;background:#081009;display:grid;gap:8px;margin-bottom:2px}
.professional-live-stage video,
.professional-live-stage img{width:100%;height:100%;object-fit:cover;display:block}
.professional-live-badge{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:20px;background:#c0202099;color:#fff;font-size:11px;font-weight:900;letter-spacing:.04em;text-shadow:0 1px 2px #000a}
#professional-live-stop{position:absolute;top:14px;right:14px;z-index:2;width:32px;height:32px;padding:0;border-radius:0;display:grid;place-items:center;background:transparent;border:0;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.85))}
#professional-live-toggle.activo{background:#c02020cc;border-color:#e05a5a;color:#fff}
.professional-emoji-wrap{position:relative;flex:0 0 auto}
#professional-emoji-toggle{width:30px;height:30px;flex:0 0 auto;border-radius:0;border:none;background:transparent;display:grid;place-items:center;padding:0;color:#8fd858;cursor:pointer;transition:color .18s ease,transform .12s ease}
#professional-emoji-toggle:hover,
#professional-emoji-toggle:focus-visible{color:#e8ffb8;transform:scale(1.08);outline:none}
#professional-emoji-toggle[aria-expanded="true"]{color:#f2ffd0}
.professional-emoji-panel{position:absolute;z-index:10;bottom:calc(100% + 8px);left:0;width:220px;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:8px;border-radius:12px;background:#0a150d;border:1px solid #294d2f;box-shadow:0 12px 30px #0007}
.professional-emoji-panel[hidden]{display:none!important}
.professional-emoji-panel button{border:0;background:transparent;font-size:19px;padding:4px;border-radius:8px;cursor:pointer}
.professional-emoji-panel button:hover{background:#132a17}
.professional-portfolio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.professional-work{padding:0!important;min-height:130px;overflow:hidden;background:#081009!important}
.professional-work img,
.professional-work video{display:block;width:100%;height:100%;min-height:130px;object-fit:cover}
.professional-empty{color:#a4b9a5;margin:10px 0}
.professional-availability p{margin:8px 0;color:#d9e6d7}
.professional-side{position:sticky;top:0;align-self:stretch;height:100%;max-height:100%;display:flex;flex-direction:column;min-width:0;padding:0}
/* Abas do painel direito — Chat/Sobre/Localização/Links, mesmo dado já
   buscado pra sala, só reorganizado em abas (referência real, Roberto
   Lima). "Chat" fica ativa por padrão, sem mudar o comportamento de hoje. */
.professional-side-tabs{flex:0 0 auto;display:flex;background:#0a150d;border-bottom:1px solid #294d2f}
.professional-side-tab{flex:1 1 0;padding:10px 6px;font-size:11.5px;font-weight:800;color:#8fae8f;background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer}
.professional-side-tab:hover{color:#c9d8c7}
.professional-side-tab[aria-selected="true"]{color:#eafff0;border-bottom-color:#68d428}
.professional-side-scroll{overflow:hidden}
.professional-side-content{padding:14px;overflow-y:auto;height:100%;box-sizing:border-box}
.professional-side-subtitle{margin:14px 0 6px;font-size:13px;color:#c9d8c7}
.professional-links-list{display:flex;flex-direction:column;gap:8px}
.professional-link-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #294d2f;border-radius:10px;background:#07100a;color:#eafff0;text-decoration:none;font-size:13px;font-weight:700}
.professional-link-item:hover{border-color:#68d428}
.professional-link-add-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.professional-link-add-row input{flex:1 1 140px;min-width:0}
.professional-links-manage-row{display:flex;align-items:center;gap:8px;padding:6px 0}
.professional-links-manage-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.professional-public-chat{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;border-radius:0;border-top:0;border-bottom:0;border-right:0;border-left:6px solid;border-image:linear-gradient(180deg,#8a5a2b,#caa23c 35%,#e0c477 50%,#caa23c 65%,#8a5a2b) 1;box-shadow:none;
    /* Papel de parede GABA3 — madeira escura (mesmo padrão da sala de
       comércio/privada), pedido do dono: essa madeira, não a clara do
       cabeçalho. */
    background-color:#1b0f06;
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='190'%20height='190'%3E%3Ctext%20x='6'%20y='36'%20transform='rotate(-16%206%2036)'%20font-family='Segoe%20UI,Arial,sans-serif'%20font-size='15'%20font-weight='700'%20fill='rgba(150,255,110,0.07)'%3EGABA3%3C/text%3E%3Ctext%20x='96'%20y='96'%20transform='rotate(-16%2096%2096)'%20font-family='Segoe%20UI,Arial,sans-serif'%20font-size='15'%20font-weight='700'%20fill='rgba(150,255,110,0.07)'%3EGABA3%3C/text%3E%3Ctext%20x='16'%20y='156'%20transform='rotate(-16%2016%20156)'%20font-family='Segoe%20UI,Arial,sans-serif'%20font-size='15'%20font-weight='700'%20fill='rgba(150,255,110,0.07)'%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:190px 190px,auto,cover;
    background-position:left top,center,center;
}
/* Sala estática — pedido do dono: nada de barra de rolagem visível se
   arrastando na tela, em nenhum painel. A rolagem continua funcionando
   pelo mouse/toque, só não aparece a "elevador" vertical se movendo. */
.professional-catalog-rail,
.professional-public-chat,
.professional-messages,
.professional-owner-panel{scrollbar-width:none}
/* o dono (2026-09-07): a píldora sem NENHUM espaço no limite de baixo —
   ".professional-card" dá padding:10px nos 4 lados, sobrando um respiro
   embaixo do form mesmo depois da coluna inteira já esticar até o fim. */
.professional-public-chat{padding-bottom:0!important}
.professional-chat-form.form-chat-privada{padding-bottom:0!important}
.professional-catalog-rail::-webkit-scrollbar,
.professional-public-chat::-webkit-scrollbar,
.professional-messages::-webkit-scrollbar,
.professional-owner-panel::-webkit-scrollbar{display:none}
.professional-messages{flex:1;min-height:150px;max-height:430px;overflow-y:auto;display:grid;align-content:start;gap:9px;min-width:0}
.professional-message{display:flex;gap:7px;padding:6px 0;border-bottom:none;margin-bottom:2px;min-width:0}
.professional-message>span{width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:grid;place-items:center;background:#315e39;color:#d9ffca;font-size:9.5px;font-weight:900}
.professional-message b{font-size:12.5px}
.professional-message p,
.professional-message small{margin:2px 0}
.professional-message p{overflow-wrap:anywhere;font-size:13px;line-height:1.4}
.professional-message small{color:#98aa99;font-size:10.5px}
.professional-message-img{display:block;max-width:200px;max-height:200px;border-radius:10px;margin:4px 0;cursor:pointer;object-fit:cover}
/* Balões de chat reais (2026-08-20, mesmo padrão já aprovado nas salas
   de comércio e privada): mensagem própria à direita com acento
   dourado, mensagem de outra pessoa à esquerda, balão neutro. */
.professional-message>div{
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
    border-radius:4px 14px 14px 14px;
    padding:7px 12px 8px;
    min-width:0;
}
.professional-message.is-self{
    flex-direction:row-reverse;
}
.professional-message.is-self>div{
    text-align:right;
    background:linear-gradient(135deg, rgba(255,183,3,.16), rgba(85,201,0,.12));
    border-color:rgba(255,183,3,.32);
    border-radius:14px 4px 14px 14px;
}
.professional-message.is-self b{color:#ffd76a}
.professional-message.is-self small{display:block;text-align:right}
.professional-chat-form.form-chat-privada{display:flex;flex-wrap:wrap;row-gap:4px;column-gap:8px;margin-top:auto;padding-top:10px;align-items:center}
.professional-chat-form input,
.professional-waiting-form textarea,
.professional-owner-panel input,
.professional-owner-panel select{min-width:0;width:100%;box-sizing:border-box;border:1px solid #315f37;border-radius:10px;background:#07100a;color:#fff;padding:10px}
.professional-chat-form input{min-height:42px;padding:10px 14px;font-size:13.5px;flex:1 1 auto;width:auto;min-width:0}
.professional-chat-form button{flex:0 0 auto}
/* Carita+campo num único recipiente — mesmo padrão já usado nas outras
   salas, nunca o ícone da carita solto fora da píldora. */
.professional-message-pill{display:flex;align-items:center;flex:1 1 auto;min-width:0;border:1px solid #315f37;border-radius:999px;background:#07100a;padding:0 4px 0 2px}
.professional-message-pill .professional-emoji-wrap{flex:0 0 auto}
.professional-message-pill input{border:0!important;border-radius:0!important;background:transparent!important;padding:10px 8px 10px 4px!important}
.professional-waiting-form{display:grid;gap:8px}
.professional-waiting-form label{font-weight:700}
.professional-waiting-form textarea{min-height:74px;resize:vertical}
.professional-consultations{display:grid;gap:8px;margin-top:10px}
article.professional-consultation{background:#102514;border:1px solid #3a7942;border-radius:11px;padding:11px;overflow:hidden}
article.professional-consultation p{color:#c9d8c7;font-size:13px}
/* o dono (2026-09-09): a cinta de informações vira um rodapé real, no
   limite de baixo da página inteira (mesmo padrão já aprovado na Sala de
   Criadores, "#creator-footer4") — fora do grid de 3 colunas, como irmã
   de <main>, pra nunca mais sobrar espaço vazio numa coluna curta (era
   o caso real do rail de "Serviços", que tinha bem menos conteúdo que o
   chat ao lado e deixava um vão de madeira sem nada embaixo). Assinatura
   (o nome real do profissional, cursiva) sempre no meio — um letreiro de
   cada lado, real e editável pelo dono no mesmo formulário de sempre.

   O dono corrigiu (2026-09-14): não quer mais essa barra cruzando a tela
   toda — a assinatura fica só embaixo do painel de chat (mudou de lugar
   no HTML, agora é o último item dentro de "aside.professional-side"),
   com só uma linha fina de madeira pra distinguir. Serviços e a coluna
   central (Trabalhos, Avaliações) agora esticam até o limite real de
   baixo — o "vão vazio" que motivou o desenho original deixa de existir
   porque essas colunas passam a preencher a altura sozinhas. */
@media(min-width:781px){
.professional-side #professional-footer4{
    display:flex!important;flex-direction:column!important;align-items:center!important;
    grid-template-columns:none!important;
    flex:0 0 auto!important;width:100%!important;
    padding:10px 16px!important;
    /* Pedido do dono 2026-09-14 (2ª volta): não é transparente — é uma
       tábua fina de verdade, com a mesma madeira escura do resto da
       sala, só que compacta. A linha dourada marca só a borda de cima,
       separando ela do painel de chat acima. */
    background:url("../../../assets/brand/fondo-madera-oscura-gaba3.png") center/cover!important;
    border-top:1px solid #caa23c!important;
    gap:2px;
}
.professional-side #professional-footer4-phrase-left,
.professional-side #professional-footer4-phrase-right{font-size:10.5px;text-align:center;color:#9dbf9a;white-space:normal}
.professional-side .professional-footer4-signature{font-size:22px!important;margin:2px 0}
}
.professional-footer4{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px clamp(16px,4vw,32px);background:url("../../../assets/brand/fondo-madera-oscura-gaba3.png") center/cover no-repeat;border-top:1px solid #caa23c}
.professional-footer4[hidden]{display:none!important}
.professional-footer4-phrase{font-size:13.5px;font-weight:700;letter-spacing:.02em;color:#eafff0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#professional-footer4-phrase-left{text-align:left}
#professional-footer4-phrase-right{text-align:right}
.professional-footer4-signature{justify-self:center;text-align:center;font-family:"Brush Script MT",cursive;font-size:30px;color:#e0c477;white-space:nowrap;transform:rotate(-4deg)}
/* 2026-09-08 (referência real): 3 selos pequenos dentro do banner, não
   mais uma cinta de madeira full-width embaixo da página. */
.professional-strip3{display:flex;flex-wrap:wrap;gap:14px;margin:2px 0 4px}
.professional-strip3[hidden]{display:none!important}
.professional-strip3-cell{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#eafff0;text-shadow:0 1px 3px #000c}
.professional-strip3-cell [data-morph-icone]{width:16px;height:16px;flex:0 0 16px;color:#8fff67}
.professional-owner-panel{position:fixed;z-index:90;top:0;right:0;bottom:0;width:min(420px,100vw);box-sizing:border-box;overflow-y:auto;padding:calc(env(safe-area-inset-top) + 20px) 18px calc(env(safe-area-inset-bottom) + 20px);background:#09140c;border-left:1px solid #4c9a4f;box-shadow:-20px 0 48px #0009}
.professional-owner-panel>header{display:flex;justify-content:space-between;gap:10px;align-items:start}
.professional-owner-panel h2,
.professional-owner-panel h3{margin:4px 0 12px}
.professional-owner-panel>label,
.professional-owner-form{display:grid;gap:7px;margin:14px 0}
.professional-owner-form label{display:grid;gap:6px;font-weight:700}
.professional-owner-panel textarea{min-width:0;width:100%;box-sizing:border-box;border:1px solid #315f37;border-radius:10px;background:#07100a;color:#fff;padding:10px;font:inherit;resize:vertical}
.professional-info-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;box-sizing:border-box}
.professional-info-modal[hidden]{display:none!important}
.professional-info-modal-backdrop{position:absolute;inset:0;background:#040a05cc;backdrop-filter:blur(2px)}
.professional-info-modal-panel{position:relative;width:min(640px,100%);max-height:min(80dvh,720px);overflow-y:auto;background:#0a150d;border:1px solid #294d2f;border-radius:16px;box-shadow:0 24px 60px #0009;padding:18px}
.professional-info-modal-header{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:14px}
.professional-info-modal-header h2{margin:4px 0 0;font-size:clamp(20px,3vw,28px)}
.professional-info-modal-header button{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;padding:0}
.professional-info-modal-body{display:grid;gap:14px}
.professional-info-modal-body>p{margin:0;color:#ccdacb}
/* ── Consulta privada (consulta-profesional.html) — tela dividida ao
   meio, vídeo ao vivo real dos dois participantes, barra de ícones
   flutuante (sem texto) e chat como painel deslizante. ── */
.consultation-live{position:relative;height:calc(100dvh - 72px);min-height:420px;overflow:hidden}
.consultation-split{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#000}
.consultation-pane{position:relative;background:#081109;overflow:hidden;display:flex;align-items:center;justify-content:center}
.consultation-pane video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.consultation-pane-local video{transform:scaleX(-1)}
.consultation-pane-empty{width:84px;height:84px;border-radius:50%;background:#12241587;border:1px solid #294d2f}
.consultation-pane-empty::before{content:"";position:absolute;width:34px;height:34px;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.5;background:#4b9e35;mask:radial-gradient(circle at 50% 32%,#000 15px,transparent 16px) 50% 0/100% 60% no-repeat,linear-gradient(#000,#000) 50% 100%/70% 45% no-repeat;-webkit-mask:radial-gradient(circle at 50% 32%,#000 15px,transparent 16px) 50% 0/100% 60% no-repeat,linear-gradient(#000,#000) 50% 100%/70% 45% no-repeat}
.consultation-pane-empty[hidden]{display:none!important}
.consultation-pane-label{position:absolute;left:12px;bottom:12px;padding:5px 11px;border-radius:999px;background:#0a1a0cd9;border:1px solid #3c7541;color:#bfe6b6;font-size:12px;font-weight:700}
.consultation-presentation{position:absolute;inset:0;z-index:30;background:#081109;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.consultation-presentation p{color:#7fae82;font-size:14px;text-align:center;margin:0}
.consultation-presentation[hidden]{display:none!important}
#consultation-marks{position:absolute;inset:0;pointer-events:none}
#consultation-marks i{position:absolute;color:#9dff70;font-size:22px;font-style:normal;transform:translate(-50%,-50%)}
#consultation-presentation-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:1px solid #3e7644;background:#102514cc;color:#dcf5d8;display:grid;place-items:center;cursor:pointer}
.consultation-toolbar{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;display:flex;gap:8px;padding:9px;border-radius:999px;background:#081109ee;border:1px solid #294d2f;box-shadow:0 12px 30px #0006;backdrop-filter:blur(6px)}
.consultation-toolbar button,
.consultation-toolbar label{width:42px;height:42px;border-radius:50%;border:1px solid rgba(85,201,0,.22);background:rgba(12,22,12,.9);color:#c8f090;display:grid;place-items:center;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease;padding:0}
.consultation-toolbar button:hover,
.consultation-toolbar label:hover{border-color:rgba(85,201,0,.55);background:rgba(24,48,16,.95);color:#e8ffb8}
.consultation-toolbar button.activo,
.consultation-toolbar button[aria-pressed="true"]{border-color:#55c900;background:linear-gradient(160deg,#2f7a12,#1a4a0c);color:#e8ffb0;box-shadow:0 0 0 2px rgba(85,201,0,.35)}
.consultation-finish-btn{border-color:#9a4d58!important;background:#5c1620!important;color:#ffc9cf!important}
.consultation-finish-btn:hover{background:#7a1c28!important}
.consultation-chat-panel{position:absolute;top:0;right:0;bottom:0;z-index:50;width:min(360px,100vw);box-sizing:border-box;background:#0a150dfa;border-left:1px solid #294d2f;box-shadow:-20px 0 40px #0007;display:flex;flex-direction:column;padding:16px}
.consultation-chat-panel[hidden]{display:none!important}
.consultation-chat-panel>header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.consultation-chat-panel h2{margin:0;font-size:17px}
.consultation-chat-panel>header button{width:32px;height:32px;border-radius:50%;border:1px solid #3e7644;background:#102514;color:#dcf5d8;display:grid;place-items:center;cursor:pointer}
#consultation-messages{flex:1;min-height:120px;overflow-y:auto;overflow-wrap:break-word;word-break:break-word;display:flex;flex-direction:column;gap:2px;padding-right:2px;color:#dbe9d8;font-size:13.5px;line-height:1.5}
#consultation-chat{display:flex;gap:8px;margin-top:12px}
#consultation-chat input{min-width:0;flex:1;box-sizing:border-box;border:1px solid #315f37;border-radius:10px;background:#07100a;color:#fff;padding:10px 12px}
#consultation-chat button{flex:0 0 auto;width:42px;border:1px solid #68d428;border-radius:10px;background:#68d428;color:#061006;font-weight:800;cursor:pointer;display:grid;place-items:center}
.consultation-chat-panel>small{margin-top:8px;color:#8fae8f;font-size:11.5px}
@media(max-width:780px){
  .consultation-live{height:calc(100dvh - 60px)}
  .consultation-split{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .consultation-chat-panel{width:100%}
  /* Dono pediu: a barra de escrever no mobile fica igual ao WhatsApp,
     sem nenhuma linha sobrando embaixo dela, e ela mesma fica no limite
     de verdade da tela (o que o Android deixa) — o padding do painel
     criava uma caixa vazia embaixo da barra. */
  .consultation-chat-panel>small{display:none!important}
  .consultation-chat-panel{padding-bottom:0}
  #consultation-chat{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .consultation-toolbar{gap:6px;padding:7px;bottom:12px}
  .consultation-toolbar button,.consultation-toolbar label{width:38px;height:38px}
}

/* ── Câmera ao vivo + composer com ícones, mesmo padrão da sala privada/comércio ── */
.professional-live-stage[hidden]{display:none!important}
.professional-live-video{position:relative;min-height:340px;overflow:hidden;border:1px solid #55c90062;border-radius:15px;background:#050807}
.professional-live-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.professional-live-stage>button{justify-self:start}
/* Ícones do dono (anexo/câmera ao vivo) dentro da própria píldora da
   mensagem — referência real, Doña Martita: tudo (carita, campo,
   anexo, câmera) num único recipiente, o microfone verde fica de fora. */
.professional-composer-tools{display:flex;gap:2px;flex:0 0 auto}
.professional-composer-tools[hidden]{display:none!important}
.professional-composer-tools .privada-icon-btn{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:none;border-radius:0;background:transparent;color:#8fd858;cursor:pointer;transition:color .18s ease,transform .12s ease}
.professional-composer-tools .privada-icon-btn svg{display:block}
.professional-composer-tools .privada-icon-btn:hover,
.professional-composer-tools .privada-icon-btn:focus-visible{color:#e8ffb8;transform:scale(1.08);outline:none}
.professional-composer-tools .privada-icon-btn.activo{color:#f2ffd0}
.professional-pricing-view{display:grid;gap:12px}
.professional-pricing-view b{display:block;color:#9dff70;font-size:12px;letter-spacing:.05em;margin-bottom:4px}
.professional-pricing-view p{margin:0;color:#d9e6d7;white-space:pre-wrap}
.professional-pricing-list{margin:0;padding-left:18px;color:#d9e6d7}
.professional-pricing-list li{margin:2px 0}

.professional-queue-row{border-top:1px solid #1d3d23;padding:10px 0;display:grid;grid-template-columns:1fr auto auto;gap:7px;align-items:center}
.professional-queue-row p{margin:4px 0;color:#afbfaf;font-size:13px}
.professional-decline{border-color:#9a4d58!important;color:#ffc9cf!important;background:#2a1116!important}
.professional-notice{position:fixed;z-index:120;top:90px;left:12px;width:calc(100vw - 24px);max-width:650px;padding:10px 14px;border:1px solid #4d8c4f;border-radius:10px;background:#102914;box-shadow:0 8px 30px #0008}
@media(min-width:674px){.professional-notice{left:50%;margin-left:-325px}}
.professional-notice[data-kind="error"]{background:#3a151b;border-color:#c25361}
.professional-notice[data-kind="warning"]{background:#3d2b12;border-color:#d89a34}
/* Faixa intermediária (tablet/janela estreita): a cabeça ainda é a de
   escritório (identidade + nav + seguir/curtir + status numa linha só), mas
   entre 781px e 1180px não cabe tudo — texto do nav ficava por cima dos
   ícones de seguir/curtir. Aqui ela já quebra em duas linhas como no celular,
   sem esperar o layout inteiro virar bloco único (isso só acontece nos 780px). */
@media(max-width:880px) and (min-width:781px){
.professional-header{flex-wrap:wrap;row-gap:8px}
.professional-header .professional-social-linha{order:4;flex:1 0 100%;justify-content:flex-start;padding-top:8px;border-top:1px solid #1e3c24}
.professional-nav{order:3;flex:1 0 100%;justify-content:flex-start;overflow-x:auto;padding:8px 14px 4px 0;border-top:1px solid #1e3c24}
.professional-nav a{flex:0 0 auto}
.professional-notice{top:200px}
}
@media(max-width:780px){
/* 2026-09-08 (referência real, Doña Martita): fundo de madeira escura
   em toda a página no mobile — mesma imagem já usada no rail/chat —
   as caixas escuras (cards) flutuam por cima, a madeira aparece nos
   vãos entre elas, exatamente como a referência. */
body.pagina-sala.professional-page{height:auto;min-height:100dvh;overflow:visible;display:block;background:linear-gradient(150deg,rgba(10,5,2,.5),rgba(6,3,1,.6)),url("../../../assets/brand/fondo-madera-oscura-gaba3.png");background-size:cover;background-position:center;background-attachment:fixed}
.professional-layout{background:transparent}
/* O bloco unificado (localização+hero+stats+trabalhos+avaliações) tinha
   fundo sólido cobrindo tudo — no mobile a madeira precisa aparecer
   atrás de "Trabalhos realizados" (referência real), só a oferta em si
   e as caixinhas de estatística mantêm seu próprio fundo escuro. */
.professional-unified-block{background:transparent;border:0;box-shadow:none}
.professional-unified-block>.professional-location-bar{background:#0a150d;border:1px solid #1c3621;border-radius:12px;margin-bottom:8px}
/* A cabeceira usava uma imagem de madeira diferente da página (mais
   clara, tingida de verde) — dava uma costura visível de cor entre ela
   e o resto do fundo. Referência real: um único tom de madeira escura,
   contínuo, do topo ao rodapé — a cabeceira fica transparente e deixa
   a madeira do body (fixa) aparecer atrás dela também. */
/* Bug real de auditoria (2026-09-14): mesmo com background:transparent,
   background-attachment:fixed centraliza a MESMA imagem de madeira
   escura no viewport inteiro — a região exata que cai atrás do topo da
   página tem um trecho naturalmente mais claro/avermelhado da própria
   textura, sem o reforço do degradê do body ali (150deg começa mais
   fraco no canto de cima). Resultado: cabeceira com um tom visivelmente
   diferente do resto, mesma imagem ou não. Um degradê escuro próprio,
   só na cabeceira, resolve sem duplicar a imagem nem depender de onde
   o scroll/viewport deixa a textura cair. */
.professional-header{padding:calc(env(safe-area-inset-top) + 14px) 12px 8px;flex-wrap:wrap;background:linear-gradient(180deg,rgba(6,3,1,.78),rgba(6,3,1,.6));border-bottom:1px solid rgba(202,162,60,.4)}
.professional-header{gap:10px}
/* 2026-09-08 (referência real, Doña Martita): cabeceira compacta, 3
   linhas — 1ª avatar+nome ... ⋮+Seguir; 2ª estrela+Disponível; 3ª nav.
   ".professional-identity" vira "display:contents" só no mobile — seus
   filhos (avatar/nome, e a estrela/dados-legais que moram fora dela)
   entram todos na MESMA linha flex da cabeceira, o que permite dar
   "order" livre pra cada peça sem precisar mexer no DOM. */
.professional-identity{display:contents}
.professional-identity>div{order:0;flex:1 1 auto;min-width:0}
.professional-identity h1{font-size:16px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.professional-identity small{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#professional-avatar{order:0}
.professional-header .professional-social-linha{order:1;flex:0 0 auto;justify-content:flex-start;gap:8px}
.professional-header #professional-owner-toggle{width:32px;height:32px;order:2;flex:0 0 auto}
.professional-social-linha #professional-curtir-sala,
.professional-social-linha #professional-compartilhar-sala,
.professional-social-linha #professional-denunciar-sala,
.professional-social-linha #professional-online-agora,
.professional-social-linha #professional-visitas-info{display:none}
/* Estrela + Disponível + localização (pequena) juntas na 2ª linha —
   referência real, Doña Martita: cabeceira compacta, sem faixa própria
   de localização mais embaixo. */
#professional-reputacao{order:3;flex:0 0 auto}
#professional-dados-legais{order:3;flex:0 0 auto}
.professional-status{display:inline-flex;font-size:9.5px;padding:4px 8px;order:3;flex:0 0 auto}
.professional-header-location{order:3;flex:0 0 auto}
.professional-header-location:not([hidden]){display:inline-flex;align-items:center;gap:3px;font-size:9.5px;color:#9bb59a}
.professional-header-location [data-morph-icone]{width:11px;height:11px;flex:0 0 11px;color:#68d428}
.professional-nav{order:4;flex:1 0 100%;justify-content:flex-start;overflow-x:auto;padding:6px 14px 0 0;border-top:1px solid #1e3c24;margin-top:6px;gap:2px}
/* Nav ícone-em-cima/legenda-embaixo — o estilo base do arquivo já é
   exatamente esse (referência real, Doña Martita: ícone + texto curto
   embaixo, aba ativa com risco verde) — só aumenta um pouco pro dedo. */
.professional-nav a{padding:8px 10px;font-size:10px;flex:0 0 auto;gap:4px}
.professional-nav a svg{width:19px;height:19px}
/* 2026-09-08 (referência real, Doña Martita): a ORDEM real da página no
   mobile é banner → Serviços → Trabalhos → 3 caixinhas de confiança →
   chat — bem diferente da ordem em que o HTML está escrito (que existe
   por causa do layout de 3 colunas do desktop). Em vez de duplicar
   elementos, cada "caixa" vira "display:contents" (some como elemento
   visual, mas os filhos continuam reais no DOM) — assim TODOS os
   blocos (banner, serviços, trabalhos, confiança) entram na MESMA
   lista flex de ".professional-layout" e podem ganhar "order" livre,
   sem duplicar HTML nem mexer no JS que já preenche cada um. */
.professional-layout{display:flex;flex-direction:column;overflow:visible;flex:none;padding-bottom:80px}
.professional-catalog-rail{display:contents}
.professional-main-wrap{display:contents}
.professional-center{display:contents}
.professional-unified-block{display:contents}
.professional-center-ripa{display:none!important}
/* No mobile só existe a píldora de escrever, fixa no fim da tela —
   referência real, Doña Martita: nada de abas, cabeçalho do chat,
   histórico de mensagens visível na tela principal (isso tudo continua
   existindo de verdade, só não aparece aqui — mesma lógica de "chat
   fixo tipo WhatsApp" já usada em Comércio). */
.professional-side{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:40;height:auto;max-height:none;padding:0;display:block;order:8;background:transparent}
/* Pedido do dono 2026-09-14 (3ª volta): no celular a assinatura só
   estorvava perto da pílula de mensagem — eliminada de vez aqui, só no
   mobile. No desktop ela continua normal, embaixo da coluna do chat. */
.professional-side #professional-footer4{display:none!important}
.professional-side-tabs{display:none!important}
.professional-side .professional-chat-header,
.professional-side #professional-cart-row,
.professional-side #professional-public-messages,
.professional-side #professional-voz-status{display:none!important}
[data-side-panel="sobre"],
[data-side-panel="localizacao"],
[data-side-panel="links"]{display:none!important}
[data-side-panel="chat"]{min-height:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
.professional-chat-form.form-chat-privada{padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(rgba(6,3,1,0),rgba(6,3,1,.55) 40%)}
#professional-rail-trust{margin-bottom:0!important}
/* Localização vira texto pequeno na cabecera (ao lado de "Disponível")
   — a faixa própria some no mobile. Fileira de estatísticas também não
   existe na referência real (Doña Martita) — só banner→serviços→
   trabalhos→confiança→chat, "y nada más". */
#professional-location-bar,
#professional-stats-row{display:none!important}
#professional-offer-card{order:2;margin:10px 10px 0}
#professional-catalog-card>header,
#professional-catalog-showcase,
#professional-catalog{order:4;margin-left:10px;margin-right:10px}
#professional-catalog-card>header{margin-top:8px;margin-bottom:0}
#professional-trabalhos-section{order:5;margin:10px 10px 0}
#professional-rail-trust{order:6;margin:10px 10px 0}
#professional-promo-row,
#professional-reviews-section{order:7}
.professional-location-bar{flex-wrap:wrap}
/* Banner um pouco mais baixo — as caixinhas/CTA encolheram (pedido
   anterior do dono), o min-height antigo (300px) sobrava espaço morto
   embaixo do botão, empurrando "Serviços" pra mais longe do que devia.
   ACHADO REAL (2026-09-08): existia um SEGUNDO min-height, no próprio
   ".professional-hero-offer" (o `<section>` de fora, 380px, regra de
   desktop) — nunca tinha sido sobrescrito, sobrava ~90px de espaço
   morto embaixo da foto antes de "Serviços" começar. Esse era o espaço
   enorme real que o dono via, não o que eu tinha corrigido antes. */
.professional-hero-offer{min-height:0}
.professional-hero-slide,
.professional-hero-info{min-height:250px}
.professional-hero-info{padding:16px 16px}
/* Rodapé de assinatura: no celular empilha (letreiro, assinatura, letreiro),
   sempre centralizado — a mesma hierarquia do desktop, só maior e vertical.
   Pedido do dono 2026-09-14: a assinatura cursiva (fonte alta, com laços
   que sobem além da própria caixa de texto) encostava na linha dourada
   de cima. Mais respiro no topo. */
.professional-footer4{grid-template-columns:1fr;justify-items:center;text-align:center;gap:6px;padding:22px 16px 12px}
#professional-footer4-phrase-left,
#professional-footer4-phrase-right{text-align:center;white-space:normal}
/* Selos do banner viram 3 caixinhas grandes (ícone em cima, texto
   embaixo) — referência real, Doña Martita: "Roupas femininas/Roupas
   masculinas/Sob medida". Mesmo dado real de sempre (strip3, editável
   pelo dono pra qualquer profissão), só maior e em caixa no mobile. */
.professional-strip3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:6px 0}
/* Menores, flutuando sobre a própria foto do banner (fundo bem
   transparente, quase só a borda) — pedido explícito do dono: caixinhas
   pequenas, do tamanho certo pra virar clicável no futuro. */
.professional-strip3-cell{flex-direction:column;justify-content:center;text-align:center;gap:2px;padding:6px 4px;border:1px solid rgba(202,162,60,.5);border-radius:9px;background:rgba(5,3,1,.4);backdrop-filter:blur(2px);font-size:8.5px}
.professional-strip3-cell [data-morph-icone]{width:15px;height:15px}
/* Botão de CTA também menor, flutuando sobre a foto (referência real). */
.professional-hero-info .professional-btn-icon{padding:8px 14px!important;font-size:12px!important;margin-top:4px}
.professional-trust-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.professional-portfolio{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 3 caixinhas de confiança em fila compacta (referência real: uma
   linha só, ícone+texto pequeno) — antes empilhava full-width. */
.professional-rail-info-row{flex-direction:row;gap:6px}
.professional-rail-info-row>div{flex-direction:column;text-align:center;gap:3px;padding:8px 4px}
.professional-rail-info-row b{font-size:9.5px}
.professional-rail-info-row small{font-size:8px}
/* "Serviços que realizo" e "Trabalhos realizados" viram carrossel
   horizontal no mobile (referência real, Doña Martita) — mesma técnica
   já validada em Comércio (.ofertas-trilho: grid-auto-flow:column +
   scroll-snap), reusando os mesmos cartões de sempre, só rolando de
   lado em vez de empilhar. */
.professional-catalog-list{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(150px,42vw);overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding:2px 8px 8px}
/* Cartão vertical (referência real, Doña Martita) — foto grande em
   cima, texto embaixo, botão "Solicitar" ocupando a largura toda. Era
   uma fileira horizontal (foto pequena + texto do lado), igual ao
   desktop — no mobile vira coluna, mesmo tamanho de cartão, só de pé. */
.professional-catalog-box{scroll-snap-align:start;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.professional-catalog-box img{width:100%;height:110px;flex:0 0 110px;border-radius:0}
.professional-catalog-box-info{padding:8px 8px 0}
.professional-catalog-box-info span{display:none}
.professional-catalog-ask{position:relative;display:flex!important;align-items:center;justify-content:center;width:calc(100% - 16px);height:auto;margin:8px 8px 8px;border-radius:8px;background:#2f7a12;border:0;color:#eafff0;padding:8px;gap:6px}
.professional-catalog-ask::after{content:"Solicitar";font-size:12px;font-weight:800}
.professional-trabalhos-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(120px,38vw);overflow-x:auto;scroll-snap-type:x mandatory}
.professional-trabalho-card{scroll-snap-align:start}
/* Pedido do dono 2026-09-14: reverte a decisão antiga — a Avaliação de
   clientes tem que aparecer no celular também, no lugar onde já sobrava
   espaço vazio no fim da tela. */
.professional-reviews-section{display:block}
/* Abas do painel direito — alvo de toque maior no mobile. */
.professional-side-tab{padding:12px 6px;font-size:12px}
.professional-public-chat{min-height:420px;max-height:none;flex:none;border-radius:14px!important;border:1px solid #294d2f!important;box-shadow:0 8px 20px #0004!important}
.professional-messages{max-height:360px}
.professional-owner-panel{width:100%;border-left:0}
.professional-notice{top:calc(env(safe-area-inset-top) + 70px)}
.professional-queue-row{grid-template-columns:1fr auto}
.professional-queue-row>div{grid-column:1/-1}
}

/* Modo de revisión persistente: reproduce la composición móvil aun cuando la
   sala se abre en un monitor de escritorio. Se activa solamente con ?mobile=1. */
body.professional-force-mobile{max-width:390px;min-height:100dvh;height:auto;overflow:visible;display:block;margin:0 auto;background:linear-gradient(150deg,rgba(10,5,2,.5),rgba(6,3,1,.6)),url("../../../assets/brand/fondo-madera-oscura-gaba3.png");background-size:cover;background-position:center}
body.professional-force-mobile .professional-layout{background:transparent}
body.professional-force-mobile .professional-unified-block{background:transparent;border:0;box-shadow:none}
body.professional-force-mobile .professional-unified-block>.professional-location-bar{background:#0a150d;border:1px solid #1c3621;border-radius:12px;margin-bottom:8px}
body.professional-force-mobile .professional-header{padding:14px 12px 8px;flex-wrap:wrap;background:linear-gradient(180deg,rgba(6,3,1,.78),rgba(6,3,1,.6));border-bottom:1px solid rgba(202,162,60,.4)}
body.professional-force-mobile .professional-identity{display:contents}
body.professional-force-mobile .professional-identity>div{order:0;flex:1 1 auto;min-width:0}
body.professional-force-mobile .professional-identity h1{font-size:16px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.professional-force-mobile .professional-identity small{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.professional-force-mobile #professional-avatar{order:0}
body.professional-force-mobile .professional-header .professional-social-linha{order:1;flex:0 0 auto;justify-content:flex-start;gap:8px}
body.professional-force-mobile #professional-owner-toggle{width:32px;height:32px;order:2;flex:0 0 auto}
body.professional-force-mobile .professional-social-linha #professional-curtir-sala,
body.professional-force-mobile .professional-social-linha #professional-compartilhar-sala,
body.professional-force-mobile .professional-social-linha #professional-denunciar-sala,
body.professional-force-mobile .professional-social-linha #professional-online-agora,
body.professional-force-mobile .professional-social-linha #professional-visitas-info{display:none}
body.professional-force-mobile #professional-reputacao{order:3;flex:0 0 auto}
body.professional-force-mobile #professional-dados-legais{order:3;flex:0 0 auto}
body.professional-force-mobile .professional-status{display:inline-flex;font-size:9.5px;padding:4px 8px;order:3;flex:0 0 auto}
body.professional-force-mobile .professional-header-location{order:3;flex:0 0 auto}
body.professional-force-mobile .professional-header-location:not([hidden]){display:inline-flex;align-items:center;gap:3px;font-size:9.5px;color:#9bb59a}
body.professional-force-mobile .professional-header-location [data-morph-icone]{width:11px;height:11px;flex:0 0 11px;color:#68d428}
body.professional-force-mobile .professional-nav{order:4;flex:1 0 100%;justify-content:flex-start;overflow-x:auto;padding:6px 14px 0 0;border-top:1px solid #1e3c24;margin-top:6px;gap:2px}
body.professional-force-mobile .professional-nav a{padding:8px 10px;font-size:10px;flex:0 0 auto;gap:4px}
body.professional-force-mobile .professional-nav a svg{width:19px;height:19px}
body.professional-force-mobile .professional-layout{display:flex;flex-direction:column;overflow:visible;flex:none;padding-bottom:80px}
body.professional-force-mobile .professional-catalog-rail{display:contents}
body.professional-force-mobile .professional-main-wrap{display:contents}
body.professional-force-mobile .professional-center{display:contents}
body.professional-force-mobile .professional-unified-block{display:contents}
body.professional-force-mobile .professional-center-ripa{display:none!important}
body.professional-force-mobile .professional-side{position:sticky;top:auto;bottom:0;z-index:40;height:auto;max-height:none;padding:0;display:block;order:8;background:transparent}
body.professional-force-mobile .professional-side #professional-footer4{display:none!important}
body.professional-force-mobile .professional-side-tabs{display:none!important}
body.professional-force-mobile .professional-side .professional-chat-header,
body.professional-force-mobile .professional-side #professional-cart-row,
body.professional-force-mobile .professional-side #professional-public-messages,
body.professional-force-mobile .professional-side #professional-voz-status{display:none!important}
body.professional-force-mobile [data-side-panel="sobre"],
body.professional-force-mobile [data-side-panel="localizacao"],
body.professional-force-mobile [data-side-panel="links"]{display:none!important}
body.professional-force-mobile [data-side-panel="chat"]{min-height:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
body.professional-force-mobile .professional-chat-form.form-chat-privada{padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(rgba(6,3,1,0),rgba(6,3,1,.55) 40%)}
body.professional-force-mobile #professional-rail-trust{margin-bottom:0!important}
body.professional-force-mobile #professional-location-bar,
body.professional-force-mobile #professional-stats-row{display:none!important}
body.professional-force-mobile #professional-offer-card{order:2;margin:10px 10px 0}
body.professional-force-mobile #professional-catalog-card>header,
body.professional-force-mobile #professional-catalog-showcase,
body.professional-force-mobile #professional-catalog{order:4;margin-left:10px;margin-right:10px}
body.professional-force-mobile #professional-catalog-card>header{margin-top:8px;margin-bottom:0}
body.professional-force-mobile #professional-trabalhos-section{order:5;margin:10px 10px 0}
body.professional-force-mobile #professional-rail-trust{order:6;margin:10px 10px 0}
body.professional-force-mobile #professional-promo-row,
body.professional-force-mobile #professional-reviews-section{order:7}
body.professional-force-mobile .professional-location-bar{flex-wrap:wrap}
body.professional-force-mobile .professional-hero-offer{min-height:0}
body.professional-force-mobile .professional-hero-slide,body.professional-force-mobile .professional-hero-info{min-height:250px}
body.professional-force-mobile .professional-hero-info{padding:16px 16px}
body.professional-force-mobile .professional-footer4{grid-template-columns:1fr;justify-items:center;text-align:center;gap:6px;padding:22px 16px 12px}
body.professional-force-mobile #professional-footer4-phrase-left,
body.professional-force-mobile #professional-footer4-phrase-right{text-align:center;white-space:normal}
body.professional-force-mobile .professional-strip3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:6px 0}
body.professional-force-mobile .professional-strip3-cell{flex-direction:column;justify-content:center;text-align:center;gap:2px;padding:6px 4px;border:1px solid rgba(202,162,60,.5);border-radius:9px;background:rgba(5,3,1,.4);backdrop-filter:blur(2px);font-size:8.5px}
body.professional-force-mobile .professional-strip3-cell [data-morph-icone]{width:15px;height:15px}
body.professional-force-mobile .professional-hero-info .professional-btn-icon{padding:8px 14px!important;font-size:12px!important;margin-top:4px}
body.professional-force-mobile .professional-trust-row,body.professional-force-mobile .professional-portfolio{grid-template-columns:repeat(2,minmax(0,1fr))}
body.professional-force-mobile .professional-rail-info-row{flex-direction:row;gap:6px}
body.professional-force-mobile .professional-rail-info-row>div{flex-direction:column;text-align:center;gap:3px;padding:8px 4px}
body.professional-force-mobile .professional-rail-info-row b{font-size:9.5px}
body.professional-force-mobile .professional-rail-info-row small{font-size:8px}
body.professional-force-mobile .professional-catalog-list{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(150px,42vw);overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding:2px 8px 8px}
body.professional-force-mobile .professional-catalog-box{scroll-snap-align:start;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
body.professional-force-mobile .professional-catalog-box img{width:100%;height:110px;flex:0 0 110px;border-radius:0}
body.professional-force-mobile .professional-catalog-box-info{padding:8px 8px 0}
body.professional-force-mobile .professional-catalog-box-info span{display:none}
body.professional-force-mobile .professional-catalog-ask{position:relative;display:flex!important;align-items:center;justify-content:center;width:calc(100% - 16px);height:auto;margin:8px 8px 8px;border-radius:8px;background:#2f7a12;border:0;color:#eafff0;padding:8px;gap:6px}
body.professional-force-mobile .professional-catalog-ask::after{content:"Solicitar";font-size:12px;font-weight:800}
body.professional-force-mobile .professional-trabalhos-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(120px,38vw);overflow-x:auto;scroll-snap-type:x mandatory}
body.professional-force-mobile .professional-trabalho-card{scroll-snap-align:start}
body.professional-force-mobile .professional-reviews-section{display:block}
body.professional-force-mobile .professional-side-tab{padding:12px 6px;font-size:12px}
body.professional-force-mobile .professional-public-chat{min-height:420px;max-height:none;flex:none;border-radius:14px!important;border:1px solid #294d2f!important;box-shadow:0 8px 20px #0004!important}
body.professional-force-mobile .professional-messages{max-height:360px}
body.professional-force-mobile .professional-owner-panel{width:100%;border-left:0}
body.professional-force-mobile .professional-notice{top:70px;left:50%!important;transform:translateX(-50%);width:min(366px,calc(100vw - 24px));max-width:none;margin-left:0!important}