/* =========================================================================
   Perfil da empresa paga  ·  /perfil/{gem_url_amigavel}

   Carregado SO nesta pagina. Todo seletor daqui e descendente de .perfil, para
   nao vazar nada para o resto do site.

   Os tokens sao os MESMOS do perfil da SpotWay, lidos da folha de estilo dela e
   convertidos de oklch para hex:

     --card / --background   oklch(100% 0 0)        #ffffff
     --foreground            oklch(14.5% 0 0)       #0a0a0a
     --muted-foreground      oklch(52% .02 311)     #6d6672
     --muted                 oklch(97% .004 311)    #f6f4f7
     --border                oklch(91% .008 311)    #e3e0e5
     --secondary             oklch(97% .005 311)    #f6f4f8
     --radius (card)         .75rem                 12px
     --radius-control        100px                  (botao e pilula)
     --cor-whatsapp #25d366   --cor-telefone #16a34a   --cor-email #dc2626

   Tipografia: Inter no corpo e nos titulos (o site todo passou para Inter em 28/09/2026).
   ========================================================================= */

.perfil {
    --p-branco: #fff;
    --p-tinta: #0a0a0a;
    --p-tinta-fraca: #6d6672;
    --p-borda: #e3e0e5;
    --p-muted: #f6f4f7;
    --p-secundaria: #f6f4f8;
    --p-fundo: #fbfafc;

    /* altura do topo proprio: as abas e as ancoras grudam logo abaixo dele.
       Celular: 48 do logo + 40 da faixa do segmento + 1 da borda */
    --p-topo: 89px;

    --p-whatsapp: #25d366;
    --p-telefone: #16a34a;
    --p-email: #dc2626;

    --p-aberto-fundo: #f0fdf4;
    --p-aberto-tinta: #16a34a;
    --p-fechado-fundo: #fef2f2;
    --p-fechado-tinta: #dc2626;
    --p-estrela: #f59e0b;

    /* Cor da empresa (gco_cor_card), ja validada como hex no PHP, mais a cor de
       texto que se le por cima dela. Uma variavel so comanda abas, links de
       secao, precos e os destaques; nada estrutural muda com a empresa. */
    --p-acento: #2c3e50;
    --p-acento-contraste: #fff;

    --p-raio: 12px;
    --p-raio-controle: 100px;
    --p-sombra: 0 6px 24px -10px #1c12262e, 0 2px 8px -4px #1c122614;

    --p-fonte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --p-fonte-titulo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    color: var(--p-tinta);
    background: var(--p-fundo);
    font-family: var(--p-fonte);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

/* o template do site define fontes em varios lugares, entao o perfil reafirma a
   sua em tudo que esta dentro dele, senao o miolo herda Open Sans do tema */
.perfil input,
.perfil textarea,
.perfil select,
.perfil button {
    font-family: var(--p-fonte);
}

.perfil h1,
.perfil h2,
.perfil .perfil-bloco-titulo,
.perfil .perfil-painel-card h2,
.perfil .perfil-media b,
.perfil .modal-title {
    font-family: var(--p-fonte-titulo);
    letter-spacing: -.01em;
}

.perfil *,
.perfil *::before,
.perfil *::after {
    box-sizing: border-box;
}

.perfil a {
    color: inherit;
    text-decoration: none;
}

/* numeros com largura fixa: a tabela de horario e as notas nao dancam */
.perfil .num {
    font-variant-numeric: tabular-nums;
}

/* ---------- capa ---------------------------------------------------------- */

/* ---------- topo proprio ----------------------------------------------------
   O perfil nao usa o header do site (template templates/_perfil2023). Como na
   SpotWay: "‹ segmento" a esquerda e o logo no centro; no celular, logo em cima
   e o segmento numa faixa embaixo.
   --------------------------------------------------------------------------- */

.perfil.perfil-sem-segmento {
    --p-topo: 49px;
}

@media (min-width: 640px) {
    .perfil,
    .perfil.perfil-sem-segmento {
        --p-topo: 57px;
    }
}

.perfil-topo {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--p-borda);
    background: #fffffff2;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.perfil-topo-linha {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 16px;
}

.perfil-topo-lado {
    display: none;
}

.perfil-topo-logo {
    display: block;
    line-height: 0;
}

.perfil-topo-logo img {
    width: 135px;
    height: auto;
}

.perfil-topo-segmento,
.perfil-topo-trilha {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--p-tinta-fraca);
}

.perfil-topo-segmento:hover,
.perfil-topo-trilha:hover {
    color: var(--p-tinta);
    text-decoration: none;
}

.perfil-topo-segmento span,
.perfil-topo-trilha span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.perfil-topo-segmento svg,
.perfil-topo-trilha svg {
    flex-shrink: 0;
}

.perfil-topo-trilha {
    height: 40px;
    padding: 0 16px;
    border-top: 1px solid var(--p-borda);
    font-size: 12px;
}

.perfil-topo a:focus-visible {
    outline: 2px solid var(--p-acento);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (min-width: 640px) {
    .perfil-topo-linha {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 8px;
        height: 56px;
    }

    .perfil-topo-lado {
        display: flex;
        min-width: 0;
    }

    .perfil-topo-logo img {
        width: 157px;
    }

    .perfil-topo-trilha {
        display: none;
    }
}

.perfil-capa {
    position: relative;
    height: 192px;
    width: 100%;
    overflow: hidden;
    background: var(--p-muted) center/cover no-repeat;
}

@media (min-width: 640px) {
    .perfil-capa {
        height: 240px;
    }
}

@media (min-width: 1024px) {
    .perfil-capa {
        height: 288px;
    }
}

/* O fim do degrade e #ffffff00, branco com alfa zero, e NAO a palavra
   transparent: transparent e preto com alfa zero, e o meio do degrade
   acinzenta. Ja custou bug em producao. */
.perfil-capa::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--p-overlay, #1d1d1df0), #ffffff00);
}

/* ---------- grade --------------------------------------------------------- */

.perfil-largura {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 16px;
}

.perfil-grade {
    display: grid;
    gap: 24px;
}

@media (min-width: 1024px) {
    .perfil-grade {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
}

.perfil-coluna {
    min-width: 0;
}

/* ---------- cartao de identidade ------------------------------------------ */

.perfil-cartao {
    position: relative;
    z-index: 10;
    margin-top: -96px;
    border: 1px solid var(--p-borda);
    border-radius: var(--p-raio);
    background: var(--p-branco);
    box-shadow: var(--p-sombra);
    padding: 16px;
}

@media (min-width: 640px) {
    .perfil-cartao {
        margin-top: -112px;
        padding: 24px;
    }
}

@media (min-width: 1024px) {
    .perfil-cartao {
        margin-top: -192px;
    }
}

.perfil-cartao-topo {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* espaco do botao de compartilhar, que fica no canto */
    padding-right: 40px;
}

@media (min-width: 640px) {
    .perfil-cartao-topo {
        flex-direction: row;
        align-items: flex-start;
        padding-right: 48px;
    }
}

.perfil-compartilhar {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--p-tinta-fraca);
    cursor: pointer;
}

.perfil-compartilhar:hover,
.perfil-compartilhar.copiado {
    background: var(--p-fundo);
    color: var(--p-tinta);
}

@media (min-width: 640px) {
    .perfil-compartilhar {
        top: 16px;
        right: 16px;
    }
}

/* nome + selo de verificada na mesma linha */
.perfil-nome {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

/* .perfil h1, mais abaixo, poe 4px de margem: aqui quem da o respiro e o .perfil-nome */
.perfil .perfil-nome h1 {
    margin-top: 0;
}

.perfil-verificado {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: oklch(0.6 0.16 150);
    color: #fff;
}

.perfil-logo,
.perfil-iniciais {
    flex-shrink: 0;
    width: 96px;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    border: 1px solid var(--p-borda);
    border-radius: var(--p-raio);
    background: var(--p-branco);
    object-fit: contain;
    box-shadow: 0 0 0 4px var(--p-branco);
}

@media (min-width: 640px) {
    .perfil-logo,
    .perfil-iniciais {
        width: 112px;
    }
}

.perfil-iniciais {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--p-acento-contraste);
    background: var(--p-acento);
    border-color: transparent;
}

.perfil-identidade {
    min-width: 0;
    flex: 1;
}

/* sobrancelha: "{SEGMENTO} · {CIDADE}/{UF}" */
.perfil-segmento {
    display: block;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--p-tinta-fraca);
}

.perfil-segmento a:hover {
    color: var(--p-tinta);
}

.perfil-segmento span {
    color: var(--p-tinta-fraca);
}

.perfil h1 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.025em;
    margin: 4px 0 0;
    color: var(--p-tinta);
}

@media (min-width: 640px) {
    .perfil h1 {
        font-size: 30px;
    }
}

.perfil-nota {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 6px;
    font-size: 14px;
}

.perfil-nota .valor {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.perfil-nota a {
    color: var(--p-tinta-fraca);
}

.perfil-nota a:hover {
    color: var(--p-tinta);
}

.perfil-estrelas {
    color: var(--p-estrela);
    white-space: nowrap;
    font-size: 13px;
}

.perfil-estrelas .vazia {
    color: var(--p-tinta-fraca);
    opacity: .35;
}

.perfil-resumo {
    margin: 8px 0 0;
    max-width: 42rem;
    font-size: 15px;
    line-height: 1.625;
    color: #0a0a0acc;
}

/* ---------- badge de aberto agora ----------------------------------------- */

.perfil-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--p-aberto-fundo);
    color: var(--p-aberto-tinta);
}

.perfil-badge.fechado {
    background: var(--p-fechado-fundo);
    color: var(--p-fechado-tinta);
}

.perfil-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.perfil-badge-linha {
    margin-top: 12px;
}

/* ---------- facilidades ---------------------------------------------------- */

.perfil-facilidades {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.perfil-facilidades li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--p-borda);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--p-tinta);
    background: var(--p-branco);
}

.perfil-facilidades i {
    color: var(--p-acento);
    font-size: 12px;
}

/* ---------- abas ----------------------------------------------------------- */

.perfil-abas {
    position: sticky;
    top: var(--p-topo);
    z-index: 20;
    margin-top: 16px;
    background: var(--p-fundo);
    border-bottom: 1px solid var(--p-borda);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.perfil-abas::-webkit-scrollbar {
    display: none;
}

.perfil-abas ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}

.perfil-abas a {
    display: block;
    flex-shrink: 0;
    padding: 12px;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--p-tinta-fraca);
    transition: color .15s, border-color .15s;
}

.perfil-abas a:hover {
    color: var(--p-tinta);
}

.perfil-abas a.ativa {
    color: var(--p-acento);
    border-bottom-color: var(--p-acento);
}

/* ---------- blocos --------------------------------------------------------- */

.perfil-conteudo {
    padding: 16px 0 32px;
}

.perfil-bloco {
    border: 1px solid var(--p-borda);
    border-radius: var(--p-raio);
    background: var(--p-branco);
    padding: 20px;
    margin-bottom: 16px;
    /* compensa o topo e as abas grudados quando a ancora recebe o scroll */
    scroll-margin-top: calc(var(--p-topo) + 64px);
}

.perfil-bloco-titulo {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--p-tinta);
}

.perfil-bloco-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

/* a contagem que acompanha "Localização (18)" e "Onde fica (18)" */
.perfil-bloco-conta {
    font-weight: 400;
    color: var(--p-tinta-fraca);
}

/* botao menor, para caber no cabecalho de um bloco ao lado do titulo */
.perfil-acao-baixa {
    height: 36px;
    padding: 0 14px;
    font-size: 12.5px;
}

.perfil-bloco-link {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--p-acento);
}

/* Links do cabecalho dos blocos ("Ver tudo" do catalogo, "Ver cardapio" e "Ver mais
   artigos" do blog): sempre azuis, seja qual for a cor da empresa. O seletor com o
   .perfil-bloco-cabeca vence o :hover generico, que pinta com a cor da empresa. */
.perfil-bloco-cabeca .perfil-bloco-link,
.perfil-bloco-cabeca .perfil-bloco-link:hover {
    color: #1f7fe6;
}

.perfil-bloco-link:hover {
    text-decoration: underline;
    color: var(--p-acento);
}

/* ---------- sobre ---------------------------------------------------------- */

.perfil-sobre {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.625;
    color: #0a0a0ad9;
}

.perfil-sobre > * + * {
    margin-top: .75rem;
}

.perfil-sobre h3 {
    font-size: 16px;
    font-weight: 700;
    margin-top: 1.25rem;
}

.perfil-sobre ul {
    list-style: disc;
    padding-left: 1.25rem;
}

.perfil-sobre ol {
    list-style: decimal;
    padding-left: 1.25rem;
}

.perfil-sobre li + li {
    margin-top: .25rem;
}

.perfil-sobre strong,
.perfil-sobre b {
    font-weight: 600;
}

.perfil-sobre a {
    color: var(--p-acento);
    text-decoration: underline;
}

/* ---------- horario -------------------------------------------------------- */

.perfil-horario {
    margin: 12px 0 0;
    border: 1px solid var(--p-borda);
    border-radius: var(--p-raio);
    overflow: hidden;
}

.perfil-horario .dia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    font-size: 14px;
    border-top: 1px solid var(--p-borda);
}

.perfil-horario .dia:first-child {
    border-top: 0;
}

.perfil-horario .dia.hoje {
    background: var(--p-secundaria);
    font-weight: 600;
}

.perfil-horario dt {
    text-transform: capitalize;
    font-weight: inherit;
    margin: 0;
}

.perfil-horario dd {
    margin: 0;
    text-align: right;
    color: var(--p-tinta-fraca);
}

.perfil-horario-obs {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--p-tinta-fraca);
}

/* ---------- grade de cards (catalogo, cardapio, blog) ---------------------- */

.perfil-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

@media (min-width: 640px) {
    .perfil-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.perfil-cards.perfil-cards-blog {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .perfil-cards.perfil-cards-blog {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.perfil-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--p-borda);
    border-radius: var(--p-raio);
    background: var(--p-branco);
    box-shadow: var(--p-sombra);
    transition: transform .15s;
}

.perfil-card:hover {
    transform: translateY(-2px);
}

.perfil-card-foto {
    position: relative;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    overflow: hidden;
    background: var(--p-muted);
}

.perfil-cards-blog .perfil-card-foto {
    aspect-ratio: 16 / 9;
}

.perfil-card-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.perfil-card-corpo {
    padding: 10px 12px 12px;
}

.perfil-card-titulo {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--p-tinta);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.perfil-cards-blog .perfil-card-titulo {
    text-transform: uppercase;
    font-weight: 700;
    -webkit-line-clamp: 3;
}

.perfil-card-sub {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--p-tinta-fraca);
}

.perfil-card-preco {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--p-acento);
}

.perfil-card-preco .de {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--p-tinta-fraca);
    text-decoration: line-through;
}

.perfil-card-meta {
    margin-top: 8px;
    font-size: 12px;
    color: var(--p-acento);
}

/* ---------- fotos ----------------------------------------------------------- */

.perfil-fotos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

@media (min-width: 640px) {
    .perfil-fotos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.perfil-foto {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--p-borda);
    border-radius: var(--p-raio);
    background: var(--p-muted);
    cursor: pointer;
}

.perfil-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s;
}

.perfil-foto:hover img {
    transform: scale(1.05);
}

/* o quadrado que abre a galeria inteira */
.perfil-foto-todas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
    text-align: center;
    border-style: dashed;
    /* fallback primeiro: navegador sem color-mix fica com o cinza claro, e nao
       sem fundo nenhum */
    background: var(--p-muted);
    background: color-mix(in srgb, var(--p-acento) 8%, var(--p-muted));
}

.perfil-foto-todas .icone {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--p-acento-contraste);
    background: var(--p-acento);
    transition: transform .15s;
}

.perfil-foto-todas:hover .icone {
    transform: scale(1.1);
}

.perfil-foto-todas .rotulo {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--p-acento);
}

/* ---------- localizacao ------------------------------------------------------ */

.perfil-endereco {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.6;
}

.perfil-endereco .apelido {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--p-tinta-fraca);
}

.perfil-mapa {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 10;
    margin-top: 12px;
    border: 1px solid var(--p-borda);
    border-radius: var(--p-raio);
    background: var(--p-muted);
    display: block;
}

/* ---------- painel lateral --------------------------------------------------- */

.perfil-painel {
    position: sticky;
    top: 72px;
    z-index: 10;
    margin-top: -96px;
}

@media (min-width: 640px) {
    .perfil-painel {
        margin-top: -112px;
    }
}

@media (min-width: 1024px) {
    .perfil-painel {
        margin-top: -192px;
    }
}

.perfil-painel-card {
    border: 1px solid var(--p-borda);
    border-radius: var(--p-raio);
    background: var(--p-branco);
    box-shadow: var(--p-sombra);
    padding: 16px;
    margin-bottom: 16px;
}

.perfil-painel-card h2 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.perfil-painel-texto {
    margin: 4px 0 12px;
    font-size: 12px;
    line-height: 1.625;
    color: var(--p-tinta-fraca);
}

.perfil-painel-dica {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 6px 0 12px;
    font-size: 12px;
    color: var(--p-tinta-fraca);
}

.perfil-dupla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

/* botões empilhados no painel ("Página Comercial", "Ver cardápio", "Ver catálogo", "Ver blog"):
   o mesmo respiro de 8px da dupla Ligar/E-mail, para não ficarem grudados (25/09/2026) */
.perfil-painel-card > .perfil-acao + .perfil-acao {
    margin-top: 8px;
}

/* ---------- botoes ------------------------------------------------------------ */

.perfil-acao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--p-borda);
    border-radius: var(--p-raio-controle);
    background: var(--p-branco);
    font-size: 13px;
    font-weight: 500;
    color: var(--p-tinta);
    cursor: pointer;
    text-align: center;
}

.perfil-acao:hover {
    border-color: #0a0a0a4d;
    color: var(--p-tinta);
}

.perfil-acao .fa-phone-alt,
.perfil-acao .fa-phone {
    color: var(--p-telefone);
}

.perfil-acao .fa-envelope {
    color: var(--p-email);
}

.perfil-acao-zap {
    height: 48px;
    font-size: 14px;
    font-weight: 600;
    border-color: transparent;
    background: var(--p-whatsapp);
    color: #fff;
    box-shadow: var(--p-sombra);
}

.perfil-acao-zap:hover {
    background: #1fb855;
    border-color: transparent;
    color: #fff;
}

.perfil-acao-acento {
    border-color: transparent;
    background: var(--p-acento);
    color: var(--p-acento-contraste);
    font-weight: 600;
}

.perfil-acao-acento:hover {
    border-color: transparent;
    color: var(--p-acento-contraste);
    opacity: .92;
}

.perfil-acao-auto {
    width: auto;
}

/* acoes do topo, no mobile e no tablet */
.perfil-acoes-hero {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

@media (min-width: 1024px) {
    .perfil-acoes-hero,
    .perfil-painel-mobile {
        display: none;
    }
}

/* ---------- barra fixa do mobile ---------------------------------------------- */

.perfil-barra-fixa {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: none;
    gap: 8px;
    padding: 8px 12px;
    background: var(--p-branco);
    border-top: 1px solid var(--p-borda);
    box-shadow: 0 -2px 12px #1c122614;
}

.perfil-barra-fixa.visivel {
    display: flex;
}

@media (min-width: 1024px) {
    .perfil-barra-fixa.visivel {
        display: none;
    }
}

.perfil-barra-fixa .perfil-acao {
    flex: 1;
    padding: 0 8px;
}

/* ---------- avaliacoes ---------------------------------------------------------- */

.perfil-resumo-nota {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 28px;
    padding-bottom: 16px;
    margin: 12px 0 4px;
    border-bottom: 1px solid var(--p-borda);
}

.perfil-media {
    text-align: center;
    min-width: 92px;
}

.perfil-media b {
    display: block;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
}

.perfil-media span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--p-tinta-fraca);
}

.perfil-barras {
    flex: 1;
    min-width: 200px;
}

.perfil-barra {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 12px;
    color: var(--p-tinta-fraca);
}

.perfil-barra .rotulo {
    width: 12px;
    text-align: right;
}

.perfil-barra .trilho {
    flex: 1;
    height: 6px;
    border-radius: 4px;
    background: var(--p-borda);
    overflow: hidden;
}

.perfil-barra .preenche {
    display: block;
    height: 100%;
    background: var(--p-estrela);
}

.perfil-barra .quanto {
    width: 30px;
}

.perfil-avaliacao {
    display: flex;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--p-borda);
}

.perfil-avaliacao:last-child {
    border-bottom: 0;
}

.perfil-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--p-muted);
    color: var(--p-tinta-fraca);
    font-size: 14px;
    font-weight: 700;
}

.perfil-avaliacao-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.perfil-avaliacao-topo b {
    font-size: 14px;
}

.perfil-avaliacao-topo time {
    font-size: 12px;
    color: var(--p-tinta-fraca);
}

.perfil-avaliacao p {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
}

/* estado vazio das avaliacoes: card com borda propria dentro do bloco */
.perfil-vazio {
    margin-top: 12px;
    padding: 28px 16px;
    text-align: center;
    border: 1px solid var(--p-borda);
    border-radius: var(--p-raio);
    background: var(--p-branco);
}

.perfil-vazio strong {
    display: block;
    margin-top: 10px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--p-fonte-titulo);
}

.perfil-vazio p {
    margin: 6px 0 16px;
    font-size: 14px;
    color: var(--p-tinta-fraca);
}

.perfil-estrelas-grandes {
    font-size: 20px;
    letter-spacing: 3px;
}

/* ---------- editorial e breadcrumb ----------------------------------------------- */

.perfil-editorial p {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--p-tinta-fraca);
}

.perfil-trilha {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0 0;
    font-size: 12px;
    color: var(--p-tinta-fraca);
}

.perfil-trilha a:hover {
    color: var(--p-tinta);
}

/* ---------- lightbox -------------------------------------------------------------- */

.perfil-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    background: #0a0a0af0;
}

.perfil-lightbox.aberto {
    display: flex;
}

.perfil-lightbox img {
    max-width: 92vw;
    max-height: 82vh;
    border-radius: var(--p-raio);
}

.perfil-lightbox .fechar,
.perfil-lightbox .anterior,
.perfil-lightbox .proxima {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #ffffff1f;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.perfil-lightbox .fechar {
    top: 16px;
    right: 16px;
}

.perfil-lightbox .anterior {
    left: 16px;
}

.perfil-lightbox .proxima {
    right: 16px;
}

.perfil-lightbox .contador {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    border-radius: 999px;
    background: #00000066;
    color: #fff;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.perfil-lightbox .legenda {
    position: absolute;
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80vw;
    text-align: center;
    color: #e9edf0;
    font-size: 13px;
}

/* ---------- modais ----------------------------------------------------------------- */

.perfil-modal .modal-content {
    border: 1px solid var(--p-borda);
    border-radius: var(--p-raio);
}

.perfil-modal .modal-header {
    border-bottom: 1px solid var(--p-borda);
    padding: 14px 18px;
}

.perfil-modal .modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--p-tinta);
}

.perfil-modal .modal-body {
    padding: 18px;
}

.perfil-modal .form-control {
    border-color: var(--p-borda);
    border-radius: 8px;
    font-size: 14px;
}

.perfil-modal .form-control:focus {
    border-color: var(--p-acento);
    box-shadow: none;
}

.perfil-lista-contato {
    display: grid;
    gap: 8px;
}

.perfil-lista-contato .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--p-borda);
    border-radius: var(--p-raio);
    background: var(--p-branco);
    font-weight: 600;
    font-size: 14px;
    color: var(--p-tinta);
    text-align: left;
    cursor: pointer;
}

.perfil-lista-contato .item:hover {
    border-color: var(--p-acento);
}

.perfil-lista-contato .item small {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: var(--p-tinta-fraca);
}

.perfil-lista-contato .item .numero {
    font-variant-numeric: tabular-nums;
}

/* ---------- modal do whatsapp: cabecalho verde, numeros por endereco ------- */

.perfil-modal-zap .modal-content {
    overflow: hidden;
}

.perfil-zap-cabeca {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 56px 20px 24px;
    color: #fff;
    background: linear-gradient(to bottom right, #25d366, #128c3e);
}

.perfil-zap-icone {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #ffffff26;
}

.perfil-zap-titulos {
    min-width: 0;
}

.perfil-zap-titulos h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.perfil-zap-titulos p {
    margin: 2px 0 0;
    font-size: 12px;
    color: #ffffffd9;
}

.perfil-zap-fechar {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #ffffff66;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.perfil-zap-fechar:hover,
.perfil-zap-fechar:focus-visible {
    background: #ffffff26;
}

.perfil-modal-zap .modal-body {
    padding: 20px 24px 24px;
}

/* item compacto de proposito: ha empresa com 18 enderecos */
.perfil-zap-grupo + .perfil-zap-grupo {
    margin-top: 10px;
}

.perfil-zap-endereco {
    margin: 0 0 4px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--p-tinta-fraca);
}

.perfil-zap-numero {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--p-borda);
    border-radius: 100px;
    color: var(--p-tinta);
}

.perfil-zap-numero + .perfil-zap-numero {
    margin-top: 6px;
}

.perfil-zap-numero:hover,
.perfil-zap-numero:focus-visible {
    border-color: #0a0a0a4d;
    color: var(--p-tinta);
    text-decoration: none;
}

.perfil-zap-numero .bolinha {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--p-whatsapp);
    color: #fff;
}

.perfil-zap-numero .texto {
    min-width: 0;
    flex: 1;
}

.perfil-zap-numero .numero {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.perfil-zap-numero small {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    color: var(--p-tinta-fraca);
}

.perfil-zap-numero .seta {
    flex-shrink: 0;
    color: var(--p-tinta-fraca);
}

.perfil-zap-aviso {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--p-tinta-fraca);
}

/* ---------- modais de telefone e e-mail: a mesma casca, na cor da empresa ----- */

.perfil-zap-cabeca.acento {
    color: var(--p-acento-contraste);
    background: linear-gradient(to bottom right, var(--p-acento), color-mix(in srgb, var(--p-acento) 78%, #000));
}

.perfil-zap-cabeca.acento .perfil-zap-titulos h5 {
    color: inherit;
}

.perfil-zap-cabeca.acento .perfil-zap-titulos p {
    color: inherit;
    opacity: .85;
}

.perfil-zap-cabeca.acento .perfil-zap-fechar {
    color: inherit;
    border-color: currentColor;
}

.perfil-zap-numero .bolinha.acento {
    background: var(--p-acento);
    color: var(--p-acento-contraste);
}

/* so no toque, como a pagina comercial: no desktop o numero ja esta a vista */
.perfil-tel-dica {
    display: none;
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--p-tinta);
}

@media (pointer: coarse) {
    .perfil-tel-dica {
        display: block;
    }
}

.perfil-tel-acao {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--p-tinta-fraca);
}

.perfil-contato-atalhos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
}

.perfil-contato-atalho {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--p-borda);
    border-radius: 100px;
    background: var(--p-branco);
    color: var(--p-tinta);
    text-align: left;
    cursor: pointer;
}

.perfil-contato-atalho:hover,
.perfil-contato-atalho:focus-visible {
    border-color: #0a0a0a4d;
}

.perfil-contato-atalho .bolinha {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 999px;
}

.perfil-contato-atalho .bolinha.zap {
    background: var(--p-whatsapp);
    color: #fff;
}

.perfil-contato-atalho .bolinha.acento {
    background: var(--p-acento);
    color: var(--p-acento-contraste);
}

.perfil-contato-atalho small {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    color: var(--p-tinta-fraca);
}

.perfil-contato-atalho strong {
    display: block;
    font-size: 14px;
    line-height: 1.2;
}

.perfil-contato-ou {
    margin: 12px 0;
    font-size: 13px;
    color: var(--p-tinta-fraca);
}

/* ---------- formularios das modais: o desenho do formulario da SpotWay ---------
   Vale para as modais novas (e-mail e WhatsApp), que tem .perfil-modal-zap. Rotulo
   em cima, campo em pilula, mensagem com canto de card, aceite em linha e botao
   cheio de 48px. */

.perfil-modal-zap .form-group {
    margin-bottom: 12px;
}

.perfil-modal-zap .form-group label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--p-tinta);
}

.perfil-modal-zap .form-control {
    height: 42px;
    padding: 10px 16px;
    border: 1px solid var(--p-borda);
    border-radius: var(--p-raio-controle);
    background: var(--p-branco);
    font-size: 14px;
    color: var(--p-tinta);
    box-shadow: none;
    transition: border-color .15s ease;
}

.perfil-modal-zap textarea.form-control {
    height: auto;
    min-height: 84px;
    border-radius: var(--p-raio);
    resize: none;
}

.perfil-modal-zap .form-control::placeholder {
    color: #6d667299;
}

.perfil-modal-zap .form-control:focus {
    border-color: var(--p-acento);
    box-shadow: none;
    outline: none;
}

.perfil-aceite {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 12px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--p-tinta-fraca);
    cursor: pointer;
}

.perfil-aceite input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: var(--p-acento);
    cursor: pointer;
}

.perfil-modal-zap .alert-danger {
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--p-raio-controle);
    background: #fef2f2;
    font-size: 14px;
    color: #dc2626;
}

.perfil-modal-zap .alert-success {
    border: 0;
    border-radius: var(--p-raio);
    background: var(--p-aberto-fundo);
    font-size: 14px;
    color: var(--p-aberto-tinta);
}

.perfil-acao-enviar {
    height: 48px;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: var(--p-sombra);
}

/* no formulario do WhatsApp o foco e verde, nao da cor da empresa */
.perfil-modal-zap[data-perfil-modal-zap] .form-control:focus {
    border-color: var(--p-whatsapp);
}

/* ---------- modal de avaliacao ------------------------------------------------- */

.perfil-rotulo {
    display: block;
    width: auto;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--p-tinta);
}

.perfil-modal-zap .perfil-estrelas-campo {
    gap: 2px;
}

.perfil-modal-zap .perfil-estrelas-campo label {
    display: block;
    margin: 0;
    padding: 2px;
    font-size: 0;
}

.perfil-estrelas-campo svg {
    display: block;
}

.perfil-opcional {
    font-weight: 400;
    color: var(--p-tinta-fraca);
}

/* "Nao quero me identificar": o mesmo desenho do aceite, em tamanho de texto */
.perfil-aceite-grande {
    align-items: center;
    font-size: 14px;
    color: var(--p-tinta);
}

.perfil-aceite-grande input {
    margin-top: 0;
}

.perfil-duas-colunas {
    display: grid;
    gap: 0 12px;
}

@media (min-width: 576px) {
    .perfil-duas-colunas {
        grid-template-columns: 1fr 1fr;
    }
}

.perfil-acoes-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.perfil-acoes-form .perfil-acao {
    height: 44px;
    padding: 0 20px;
}

.perfil-acao-cancelar {
    background: var(--p-secundaria);
    font-size: 14px;
}

.perfil-form-nota {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--p-tinta-fraca);
}

/* ---------- modais brancas: como chegar e escolher endereco ------------------- */

.perfil-modal-branca .modal-dialog {
    max-width: 448px;
}

.perfil-modal-rota .modal-dialog {
    max-width: 384px;
}

.perfil-modal-branca .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: var(--p-raio);
    box-shadow: var(--p-sombra);
}

.perfil-modal-cabeca-branca {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid var(--p-borda);
}

/* no Como chegar o cabecalho emenda nas opcoes, sem linha */
.perfil-modal-rota .perfil-modal-cabeca-branca {
    padding-bottom: 0;
    border-bottom: 0;
}

.perfil-modal-cabeca-branca h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--p-tinta);
}

.perfil-modal-cabeca-branca p {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--p-tinta-fraca);
}

.perfil-modal-cabeca-branca p .apelido {
    font-weight: 600;
    margin-right: 4px;
}

.perfil-fechar-simples {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--p-tinta-fraca);
    cursor: pointer;
}

.perfil-fechar-simples:hover,
.perfil-fechar-simples:focus-visible {
    background: var(--p-muted);
    color: var(--p-tinta);
}

.perfil-modal-branca .modal-body {
    padding: 16px 20px 20px;
}

.perfil-icone-suave {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--p-acento) 14%, var(--p-muted));
    color: var(--p-acento);
}

.perfil-rota-opcoes {
    display: grid;
    gap: 8px;
}

.perfil-rota-opcao {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 8px 8px;
    border: 1px solid var(--p-borda);
    border-radius: var(--p-raio-controle);
    color: var(--p-tinta);
}

.perfil-rota-opcao:hover,
.perfil-rota-opcao:focus-visible {
    border-color: #0a0a0a4d;
    color: var(--p-tinta);
    text-decoration: none;
}

.perfil-rota-opcao .texto {
    flex: 1;
    min-width: 0;
}

.perfil-rota-opcao strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.perfil-rota-opcao small {
    display: block;
    font-size: 12px;
    color: var(--p-tinta-fraca);
}

.perfil-rota-opcao .seta {
    flex-shrink: 0;
    color: var(--p-tinta-fraca);
}

.perfil-endereco-lista {
    display: grid;
    gap: 8px;
}

.perfil-endereco-opcao {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--p-borda);
    border-radius: var(--p-raio);
    background: var(--p-branco);
    color: var(--p-tinta);
    text-align: left;
    cursor: pointer;
}

.perfil-endereco-opcao:hover,
.perfil-endereco-opcao:focus-visible {
    border-color: #0a0a0a4d;
}

.perfil-endereco-opcao[aria-current="true"] {
    border-color: var(--p-acento);
    background: color-mix(in srgb, var(--p-acento) 8%, var(--p-branco));
}

.perfil-endereco-opcao .perfil-icone-suave {
    width: 32px;
    height: 32px;
    margin-top: 2px;
}

.perfil-endereco-opcao .texto {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.45;
}

.perfil-endereco-opcao .texto b {
    display: block;
    font-weight: 600;
}

.perfil-endereco-opcao .check {
    flex-shrink: 0;
    margin-top: 4px;
    color: var(--p-acento);
    visibility: hidden;
}

.perfil-endereco-opcao[aria-current="true"] .check {
    visibility: visible;
}

/* honeypot: escondido de gente, alcancavel por robo */
.perfil-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.perfil-estrelas-campo {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
}

.perfil-estrelas-campo input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.perfil-estrelas-campo label {
    margin: 0;
    font-size: 26px;
    line-height: 1;
    color: var(--p-tinta-fraca);
    opacity: .35;
    cursor: pointer;
    transition: opacity .12s, color .12s;
}

.perfil-estrelas-campo input:checked ~ label,
.perfil-estrelas-campo label:hover,
.perfil-estrelas-campo label:hover ~ label {
    color: var(--p-estrela);
    opacity: 1;
}

.perfil-estrelas-campo input:focus-visible + label {
    outline: 2px solid var(--p-acento);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- acessibilidade ----------------------------------------------------------- */

.perfil a:focus-visible,
.perfil button:focus-visible,
.perfil [tabindex]:focus-visible {
    outline: 2px solid var(--p-acento);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .perfil *,
    .perfil *::before,
    .perfil *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}


/* ---------- vitrine de catalogo, cardapio e blog de volta ao perfil (25/09/2026) ---------- */
/* os cards agora sao <a> com h3/p dentro: zera margens do Bootstrap e o sublinhado do link */
a.perfil-card,
a.perfil-card:hover {
    color: inherit;
    text-decoration: none;
}

a.perfil-card:focus-visible {
    outline: 2px solid var(--p-acento);
    outline-offset: 2px;
}

.perfil-card-titulo,
.perfil-card-sub,
.perfil-card-preco,
.perfil-card-meta {
    margin-bottom: 0;
}

.perfil-card-titulo {
    margin-top: 0;
    font-family: var(--p-fonte);
}

.perfil-card-consulta {
    font-size: 13px;
    font-weight: 500;
    color: var(--p-tinta);
}

.perfil-card-foto:empty::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--p-muted), var(--p-secundaria));
}