/*
 * Páginas Conecta — CSS das rotas públicas (Lane 2, Fase 3): home, busca, página do
 * serviço, planos, como funciona, login, cadastro, recuperar senha.
 * Consome exclusivamente var(--pc-*) de pc-tokens.css; componentes de UI:: já vêm
 * estilizados por pc-components.css (Lane 1) — aqui só o que é específico de tela.
 */

/* ------------------------------------------------------------------ */
/* Home                                                                */
/* ------------------------------------------------------------------ */

.pc-home {
    padding-top: 12px;
    padding-bottom: 16px;
}

/* Figma 124814:584 — a foto NAO e fundo cover: e um recorte PNG ancorado a
   direita. Gradientes 199/238deg atras dele, 25deg na frente (::after). */
.pc-home__hero {
    position: relative;
    aspect-ratio: 335 / 224;
    border-radius: var(--pc-radius-capa);
    overflow: hidden;
    display: flex;
    /* Figma: titulo em y=178 num hero que comeca em 122 => 56 de 224 = 25% da
       ALTURA (em % o padding usaria a largura, por isso a razao 224/335). */
    align-items: flex-start;
    padding: calc(25% * 224 / 335) var(--pc-hero-respiro) 0;
    background:
        linear-gradient(199.06deg, rgb(0, 0, 0) 16.93%, rgba(43, 43, 43, 0) 60.74%),
        linear-gradient(238.18deg, rgb(43, 43, 43) 18.86%, rgba(43, 43, 43, 0) 74.99%),
        var(--pc-grafite);
}

/* Figma: recorte com 107.11% da altura do bloco, topo em -3.39% e ancorado a
   direita (sangra ~3.84% para fora). A largura vem da razao 540/720 do arquivo.
   Seletor duplicado de proposito: `.elementor img { height:auto; max-width:100% }`
   tem especificidade maior que a classe sozinha e achatava o recorte. */
.pc-home__hero .pc-home__hero-foto {
    position: absolute;
    top: -3.39%;
    right: -3.84%;
    left: auto;
    height: 107.11%;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: right bottom;
}

.pc-home__hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(25.53deg, rgba(25, 25, 25, 0.9) 13.8%, rgba(25, 25, 25, 0) 65.1%);
}

.pc-home__hero-titulo {
    position: relative;
    z-index: 1;
    color: var(--pc-cinza-100);
    font-family: var(--pc-fonte-titulo);
    font-size: var(--pc-tamanho-h2);
    font-weight: 600;
    /* Figma H2: size 24 / lineHeight 24 => razao 1, nao 1.2. */
    line-height: 1;
    margin: 0;
    /* Figma: caixa de 154 sobre 335 => o titulo quebra em ~46% do bloco. */
    max-width: 46%;
}

.pc-home__hero-destaque {
    color: var(--pc-amarelo);
}

/* Card branco da busca sobreposto ao hero (Figma 124814:705: 295 de 335 = 88%,
   radius 24, borda fina, sem sombra pesada). O topo negativo cria a sobreposicao. */
.pc-home__busca {
    position: relative;
    z-index: 2;
    width: 88%;
    margin: -64px auto 28px;
    background: var(--pc-branco);
    border: 0.5px solid var(--pc-cinza-100);
    border-radius: 24px;
    box-shadow: var(--pc-sombra-card);
    padding: 14px;
}

.pc-home__secao {
    margin-bottom: 28px;
}

/* Linha divisoria de largura cheia acima da secao (Figma "Line 53"). */
.pc-home__secao--divisor {
    border-top: 1px solid var(--pc-cinza-100);
    margin-inline: calc(var(--pc-respiro-lateral) * -1);
    padding: 24px var(--pc-respiro-lateral) 0;
}

.pc-home > :last-child {
    margin-bottom: 0;
}

.pc-home__secao h2 {
    font-size: var(--pc-tamanho-h3);
    margin: 0 0 14px;
}

.pc-home__secao-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.pc-home__secao-cabecalho h2 {
    margin: 0;
}

/* Figma 124814:737: Poppins Regular, sublinhado, amarelo — nao e um botao. */
.pc-home__ver-mais {
    color: var(--pc-amarelo);
    font-family: var(--pc-fonte-corpo);
    font-weight: 400;
    font-size: 11px;
    text-decoration: underline;
    flex-shrink: 0;
}

/* Os carrosseis sangram ate a borda da tela e o proximo card "espia" no canto. */
.pc-carrossel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Sem isto o snap encaixa o 1o card na borda da area de scroll e engole o
       padding-inline, colando o card na lateral da tela. */
    scroll-padding-inline: var(--pc-respiro-lateral);
    padding-bottom: 4px;
    margin: 0 calc(var(--pc-respiro-lateral) * -1);
    padding-inline: var(--pc-respiro-lateral);
    -webkit-overflow-scrolling: touch;
}

.pc-carrossel::-webkit-scrollbar {
    display: none;
}

.pc-carrossel__item {
    flex: 0 0 auto;
    /* Base do Figma (188/375 = 50.1% do shell) alargada a pedido do Adelson para
       caber o titulo em 2 linhas sem apertar; o 2o card segue espiando na borda. */
    width: calc(var(--pc-largura-shell) * 0.57);
    scroll-snap-align: start;
    display: flex;
}

.pc-carrossel__item > .pc-card-servico {
    width: 100%;
}

/* Figma 124814:724 — bloco escuro 335x221 com foto de fundo e texto por cima. */
.pc-home__cta {
    position: relative;
    overflow: hidden;
    border-radius: var(--pc-radius-card);
    background: var(--pc-grafite);
    color: var(--pc-branco);
    margin-bottom: 28px;
    padding: var(--pc-hero-respiro);
}

/* Figma 124814:724 — a mulher fica à DIREITA, com o telefone no ouvido, e o
   lado escuro do degradê à esquerda sob o texto.

   No arquivo (home-cta.jpg) ela está à ESQUERDA do centro: o perfil de brilho
   por coluna tem pico em 37-43% e cai a zero depois de 80%. Com
   `object-position: right` o recorte do cover ia justamente para a metade
   vazia e cortava a mulher fora — só sobrava o ombro. O espelhamento leva ela
   para a direita como no Figma (a mesma técnica que a camada desktop já usa em
   .pc-home__cta-foto--desktop), e aí o recorte central mantém o rosto inteiro.

   A razão do arquivo (1.50) é praticamente a do frame (335x221 = 1.52), então
   com `center` o cover quase não corta nada.

   Seletor DUPLICADO de propósito: `.elementor img { height: auto }` tem
   especificidade maior que a classe sozinha e vencia o `height: 100%`. A foto
   então caía para a altura da própria razão (348/1.516 = 230px num card de
   255px) e sobrava uma faixa de grafite de 25px embaixo — a mulher terminava
   na linha do botão em vez de encostar na borda de baixo, como no Figma. */
.pc-home__cta .pc-home__cta-foto,
.pc-home__cta-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* O -16% encosta a mulher na borda direita como no Figma (medido: sobra
       ~3% contra os 3.0% do 124814:724). O sinal é NEGATIVO porque o
       translateX acontece depois do scaleX(-1), no eixo já invertido — com
       valor positivo ela anda para a esquerda. */
    transform: scaleX(-1) translateX(-16%);
}

/* O escurecimento vem da esquerda (onde fica o texto) e libera a direita, para o
   rosto da foto continuar visivel como no Figma. */
.pc-home__cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgb(43, 43, 43) 30%, rgba(43, 43, 43, 0.4) 75%);
}

.pc-home__cta-conteudo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
}

/* Figma: o texto ocupa uma coluna estreita (169 de 287) para nao cobrir a foto,
   mas o botao atravessa o bloco inteiro. */
.pc-home__cta h2,
.pc-home__cta p {
    max-width: 60%;
}

.pc-home__cta h2 {
    color: var(--pc-cinza-100);
    font-size: var(--pc-tamanho-h3);
    line-height: 1.2;
    margin: 0;
}

.pc-home__cta p {
    color: var(--pc-cinza-100-60);
    font-size: 11px;
    line-height: 1.4;
    margin: 0;
}

.pc-home__cta .pc-botao {
    width: 100%;
}

/* ------------------------------------------------------------------ */
/* Busca                                                               */
/* ------------------------------------------------------------------ */

.pc-busca-tela {
    padding-top: 20px;
    padding-bottom: 32px;
}

/* Figma 124814:1074 — o card amarelo ocupa o MIOLO (x=20, 335 de 375), nao
   sangra ate a borda da tela. A margem negativa daqui esticava o card para
   fora do respiro lateral e desalinhava ele dos cards de resultado abaixo. */
.pc-busca-tela__topo {
    background: var(--pc-amarelo);
    border-radius: 28px;
    /* Fundo com 56 de respiro: 44 ficam sob o cartao de busca que sobrepoe. */
    padding: 24px var(--pc-hero-respiro) 56px;
    margin: 0;
}

/* Figma 124814:1076 — titulo centrado em DUAS linhas ("O que voce / precisa
   hoje?"). O limite e por texto (ch), nao por % da caixa: com % a terceira
   linha aparecia assim que a fonte crescia. */
.pc-busca-tela__topo h1 {
    color: var(--pc-branco);
    margin: 0 auto 16px;
    max-width: 20ch;
    text-align: center;
    line-height: 1.1;
    font-size: clamp(20px, 6.4vw, var(--pc-tamanho-h2));
}

/* Figma 124814:1077 — a grade de chips nao encosta na borda do card amarelo:
   298 de 335 = ~89% dele, a mesma razao que o miolo tem no shell.
   Sem margem inferior: quem separa do que vem abaixo e a barra de busca. */
.pc-busca-tela__topo .pc-chips {
    margin: 0 auto;
    max-width: 89%;
}

/* Figma 124814:1144 — cartao branco que sobe 44px sobre a base do card amarelo.
   No desenho ele tem 295 de 335 (88%), mas ali o amarelo termina logo abaixo;
   aqui um cartao estreito deixava as duas quinas amarelas escapando dos lados,
   um degrau que o Figma nao tem. 94% cobre a base e mantem o amarelo visivel
   so como moldura. */
.pc-busca-tela__barra {
    width: 94%;
    margin: -44px auto 20px;
    background: var(--pc-branco);
    border: 0.5px solid var(--pc-cinza-100);
    border-radius: 24px;
    padding: 14px;
    position: relative;
    box-shadow: var(--pc-sombra-card);
}

/* Dentro do cartao os campos sao mais baixos e colados (30px, gap 4 no Figma):
   o pill grande do componente compartilhado estouraria a altura do cartao. */
.pc-busca-tela__barra .pc-busca {
    gap: 4px;
}

.pc-busca-tela__barra .pc-busca__campo {
    padding: 8px 10px;
    gap: 8px;
}

.pc-busca-tela__barra .pc-busca__campo svg {
    width: 14px;
    height: 14px;
}

.pc-busca-tela__barra .pc-busca__campo input,
.pc-busca-tela__barra .pc-busca__campo button.pc-busca__local-texto {
    font-size: 12px;
}

.pc-busca-tela__barra .pc-busca__submit {
    margin-right: -16px;
}

/* Enquanto o filtro busca: a lista apaga um pouco e para de aceitar clique,
   sem sumir da tela (evita o salto de altura que um spinner causaria). */
.pc-busca-tela__resultados.is-carregando {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.pc-busca-tela__contagem {
    font-size: 13px;
    color: var(--pc-cinza-500);
    margin: 0 0 16px;
}

.pc-busca-tela__grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Busca sem localidade: o estado vazio pede a cidade e o botao reabre o painel
   (o mesmo modal do autocomplete). */
.pc-busca-tela__pedir-local {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

/* Variante 'busca' (Figma 124814:1160): faixa horizontal de 335x200 com a capa
   sangrando na coluna esquerda (122/335 = 36.42% da largura, altura cheia, so os
   cantos da esquerda arredondados) e TODO o resto — prestador, titulo, descricao,
   nota, chip e CTA — empilhado na coluna da direita. O padding do card sai do
   elemento e vai para a coluna, senao a capa nao sangra ate a borda. */
/* Padding ZERO no card: a coluna da capa e 122/335 do card (36.42%) e o % da grid
   resolve sobre a caixa de conteudo — com padding no card a capa encolheria ~8px.
   O respiro de 16/20 vai para cada item da coluna da direita. */
.pc-card-servico--busca {
    display: grid;
    grid-template-columns: 36.42% 1fr;
    grid-template-areas:
        'capa topo'
        'capa corpo'
        'capa cta';
    grid-template-rows: auto 1fr auto;
    align-items: start;
    gap: 12px 0;
    padding: 16px 0;
    overflow: hidden;
}

/* A capa sangra: anula o padding vertical do card e cobre a coluna em altura cheia. */
.pc-card-servico--busca .pc-card-servico__capa {
    grid-area: capa;
    align-self: stretch;
    aspect-ratio: auto;
    margin: -16px 0;
    border-radius: var(--pc-radius-card) 0 0 var(--pc-radius-card);
}

/* Sem isso a img cai na altura intrinseca (a razao 41/17 da variante vertical foi
   zerada acima) e sobra fundo cinza embaixo da foto. */
.pc-card-servico--busca .pc-card-servico__capa img {
    height: 100%;
    min-height: 100%;
    object-fit: cover;
}

/* Respiro da coluna da direita (Figma: 20 de gap para a capa, 20 ate a borda).
   min-width:0 e obrigatorio: a coluna 1fr nasce com min-width:auto e se recusa a
   encolher abaixo do conteudo, entao nome/titulo longos estouravam para fora da
   borda direita e o overflow:hidden do card CORTAVA o texto. */
.pc-card-servico--busca .pc-card-servico__topo,
.pc-card-servico--busca .pc-card-servico__corpo,
.pc-card-servico--busca .pc-card-servico__cta {
    margin-inline: 20px;
    min-width: 0;
}

.pc-card-servico--busca .pc-card-servico__topo {
    grid-area: topo;
    min-height: 0;
}

/* Corpo empilhado: titulo, descricao e o trio nota/chip/resposta. O gap de 12px
   separa os blocos; o trio se reaproxima com margin negativo, porque as 3 linhas
   sao um bloco de metadados so. */
.pc-card-servico--busca .pc-card-servico__corpo {
    grid-area: corpo;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.pc-card-servico--busca .pc-card-servico__rodape,
.pc-card-servico--busca .pc-card-servico__resposta {
    margin-top: -6px;
}

/* Nota, chip e "Responde em" ocupam uma linha cada (pedido do Adelson): a faixa
   nao divide espaco com ninguem, entao o "Responde em" para de truncar. */
.pc-card-servico--busca .pc-card-servico__rodape {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

/* width:auto anula o width:100% do card vertical, que resolve sobre a area da grid
   ANTES da margem lateral e estouraria 20px para fora da borda direita. */
.pc-card-servico--busca .pc-card-servico__cta {
    grid-area: cta;
    width: auto;
}

/* Sobre a capa, canto superior esquerdo (Figma 124814:1165 em 16,16 do card).
   Ancorado no card (position: relative) — a capa sangra ate a borda, entao 16/16
   do card cai exatamente sobre ela. */
.pc-card-servico--busca .pc-card-servico__badge-pro {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    height: auto;
}

/* Cards da busca sao empilhados, nao alinhados num carrossel: o titulo nao precisa
   da altura travada de 2 linhas que a variante vertical usa para casar a grade. */
.pc-card-servico--busca .pc-card-servico__titulo {
    height: auto;
    min-width: 0;
}

.pc-card-servico--busca .pc-card-servico__descricao {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
}

/* Linha propria: nao divide largura com a nota, entao pode aparecer inteira.
   O overflow/ellipsis herdado do card vertical e desligado de proposito — era ele
   que cortava o "Responde em 41min" quando as duas caixas disputavam a mesma linha. */
.pc-card-servico--busca .pc-card-servico__resposta {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.pc-card-servico--busca .pc-card-servico__rodape .pc-estrelas__total {
    width: auto;
}

/* O nome do prestador ja trunca com reticencias, mas so se a caixa puder encolher. */
.pc-card-servico--busca .pc-card-servico__prestador,
.pc-card-servico--busca .pc-card-servico__identidade {
    min-width: 0;
}

/* Chip solto no corpo (nao sobre a capa): fundo amarelo a 12% e texto amarelo.
   Nota, chip e resposta sao 3 linhas de um bloco so — o vao entre elas e menor
   que o gap de 12px que separa titulo e descricao. */
.pc-card-servico--busca .pc-card-servico__categoria--chip {
    position: static;
    align-self: flex-start;
    max-width: 100%;
    background: rgba(252, 189, 11, 0.12);
    color: var(--pc-amarelo);
    font-size: 10px;
    padding: 4px 10px;
}

.pc-paginacao {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.pc-paginacao__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pc-branco);
    color: var(--pc-grafite);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    --pc-sombra-propria: var(--pc-sombra-card);
    box-shadow: var(--pc-sombra-card);
}

.pc-paginacao__item--ativo {
    background: var(--pc-amarelo);
}

/* ------------------------------------------------------------------ */
/* Página do serviço                                                   */
/* ------------------------------------------------------------------ */

.pc-servico {
    padding-bottom: 32px;
}

.pc-servico__galeria {
    position: relative;
    margin: 0 calc(var(--pc-respiro-lateral) * -1) 20px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    /* Sem isto o navegador leva o arrasto horizontal para a rolagem e dispara
       pointercancel: o swipe nao funciona no toque. pan-y preserva a rolagem
       vertical da pagina. */
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.pc-servico__galeria:active {
    cursor: grabbing;
}

.pc-servico__galeria-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pc-servico__galeria-item.is-ativo {
    opacity: 1;
}

.pc-servico__galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pc-servico__galeria-vazia {
    background: var(--pc-cinza-100);
}

/* Tira de categorias (até 3): o trilho rola, o lápis vem logo depois da última
   chip — não ancorado na borda direita. */
.pc-servico__categorias {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pc-servico__categorias-trilho {
    display: flex;
    align-items: center;
    gap: 8px;
    /* min-width:auto sozinho nao basta: sem o shrink o trilho empurra o lapis
       para fora quando as 3 chips nao cabem. */
    min-width: 0;
    flex: 0 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
    /* A rolagem horizontal da tira não pode brigar com o swipe da galeria. */
    touch-action: pan-x;
}

.pc-servico__categorias-trilho::-webkit-scrollbar {
    display: none;
}

.pc-servico__categoria-badge {
    flex: 0 0 auto;
    background: var(--pc-amarelo);
    color: var(--pc-grafite);
    padding: 6px 14px;
    border-radius: var(--pc-radius-pill);
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}

.pc-servico__categoria-badge:empty {
    display: none;
}

.pc-servico__categorias-editar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--pc-branco);
    color: var(--pc-grafite);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.pc-servico__categorias-editar svg {
    width: 16px;
    height: 16px;
}

/* I12: dots da galeria — centrados, acima da tira de categorias. */
.pc-servico__galeria-dots {
    position: absolute;
    left: 50%;
    bottom: 56px;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
}

/* No mobile a troca de foto é por arraste (dots indicam a posição); as
   miniaturas só entram no desktop, onde substituem os dots. */
.pc-servico__miniaturas {
    display: none;
}

.pc-servico__galeria-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pc-cinza-300);
}

.pc-servico__galeria-dot.is-ativo {
    background: var(--pc-amarelo);
}

/* I13: "Edite seu perfil" (visão do dono) — bloco de largura total logo abaixo da galeria. */
.pc-botao.pc-servico__editar-pill {
    display: flex;
    width: 100%;
    gap: 8px;
    margin-block: 0 20px;
    font-weight: 600;
}

.pc-servico__editar-pill svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pc-servico__acoes-flutuantes {
    position: absolute;
    right: 16px;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pc-servico__acao-flutuante {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pc-branco);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--pc-cinza-700);
    --pc-sombra-propria: var(--pc-sombra-card);
    box-shadow: var(--pc-sombra-card);
}

.pc-servico-favoritar {
    color: var(--pc-amarelo);
}

.pc-servico-favoritar.is-favoritado svg {
    fill: var(--pc-vermelho);
    color: var(--pc-vermelho);
}

.pc-servico-denunciar {
    background: var(--pc-branco);
    color: var(--pc-vermelho);
}

/* Ícone do Figma vem em 24x16 com fill próprio (#F75E34). */
.pc-servico-denunciar svg {
    width: 21px;
    height: 14px;
}

.pc-servico__titulo {
    margin: 0 0 8px;
}

.pc-servico__avaliacao-resumo {
    margin-bottom: 16px;
}

.pc-servico__descricao {
    color: var(--pc-cinza-700);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 20px;
}

.pc-servico__item-info {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

.pc-servico__item-info-icone {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pc-amarelo);
    color: var(--pc-branco);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-servico__item-info-icone svg {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.pc-servico__item-info-icone svg[viewBox="0 0 36 36"] {
    width: 36px;
    height: 36px;
}

.pc-servico__item-info h3 {
    margin: 0 0 2px;
    font-size: 15px;
}

.pc-servico__item-info p {
    margin: 0;
    font-size: 13px;
    color: var(--pc-cinza-700);
}

/* Figma 124814:1990 — coluna centrada: avatar, 16 de respiro, nome, 12, resposta. */
.pc-servico__prestador {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    margin-bottom: 20px;
}

.pc-servico__prestador > .pc-avatar {
    margin-bottom: 4px;
}

.pc-servico__prestador h2 {
    margin: 0;
    font-size: var(--pc-tamanho-h3);
    line-height: 24px;
}

/* Nome centrado; o pai é column/center, então o h2 vira a linha. */
.pc-servico__prestador-nome {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Figma: relógio 8px + texto amarelo Regular, gap 4. O 8px do Figma sobe para 11
   pela regra de tipografia do projeto (fonte não escala por razão). */
.pc-servico__responde {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--pc-amarelo);
    font-size: 11px;
    font-weight: 400;
    margin: 0;
}

/* Sem valor declarado a linha nao existe para ninguem; para o dono ela fica no
   DOM (oculta) porque e o alvo que o JS atualiza ao salvar. */
.pc-servico__responde.is-oculto {
    display: none;
}

.pc-servico__responde-icone {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.pc-servico__metricas {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.pc-servico__metrica {
    flex: 1;
    background: var(--pc-branco);
    border: 0.5px solid var(--pc-cinza-100);
    border-radius: var(--pc-radius-card);
    box-shadow: none;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 8px;
    text-align: center;
}

.pc-servico__metrica strong {
    display: block;
    font-family: var(--pc-fonte-titulo);
    color: var(--pc-amarelo);
    font-size: 20px;
    /* Durante a contagem (data-pc-numero) o valor troca de digito a cada quadro;
       sem largura fixa por digito o card balanca ao animar. */
    font-variant-numeric: tabular-nums;
}

.pc-servico__metrica span {
    font-size: 11px;
    color: var(--pc-cinza-700);
}

/* I12: card com mapa + caption de cidade/UF/CEP (UI::card_localizacao, Figma 124823:8772). */
.pc-servico__mapa {
    background: var(--pc-branco);
    border: 0.5px solid var(--pc-cinza-100);
    border-radius: var(--pc-radius-card);
    padding: 16px;
    margin-top: 16px;
    text-align: center;
}

.pc-servico__mapa-imagem {
    position: relative;
    display: block;
    width: 100%;
    height: 220px;
    margin: 0 auto;
    border-radius: 12px;
    background: var(--pc-cinza-100);
    overflow: hidden;
    cursor: pointer;
}

.pc-servico__mapa-imagem:focus-visible {
    outline: 2px solid var(--pc-amarelo);
    outline-offset: 2px;
}

/* O canvas do MapLibre nasce com cursor de arrasto; aqui o toque também abre
   o Google Maps, então o ponteiro tem de dizer "clicável" o tempo todo. */
.pc-servico__mapa-imagem .maplibregl-canvas-container,
.pc-servico__mapa-imagem canvas {
    cursor: pointer;
}

.pc-servico__mapa-imagem .maplibregl-ctrl-group {
    cursor: default;
}

/* O canvas do MapLibre entra dentro da moldura; o cinza de fundo continua
   valendo enquanto os tiles não chegam (e se a rede falhar de vez). */
.pc-servico__mapa-imagem .maplibregl-map {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.pc-servico__mapa-imagem canvas {
    display: block;
    border-radius: inherit;
    /* `.elementor canvas/img { max-width:100% }` distorce o buffer do WebGL. */
    max-width: none;
}

/* Atribuição exigida pelo OpenFreeMap/OpenMapTiles/OpenStreetMap. Fica fora da
   moldura (e não sobre o mapa) porque o card é pequeno e o texto some no
   desenho; o controle nativo do MapLibre foi desligado por isso. */
.pc-servico__mapa-credito {
    margin: 6px 0 0;
    font-size: 9px;
    line-height: 1.4;
    color: var(--pc-cinza-500);
}

.pc-servico__mapa-legenda {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--pc-cinza-500);
}

.pc-servico__rodape-acoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

.pc-servico__rodape-acoes .pc-botao {
    width: 100%;
}

/* Figma 124814:1619 — os cards da aba Avaliações são uma coluna com gap 8. */
.pc-servico__avaliacoes-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Input de estrelas (data-pc-estrelas-input): classe raiz .pc-estrelas-input e
 * comportamento em pc-ui.js (initEstrelasInput). Ajuste de layout específico deste
 * modal (justify-content: center) fica aqui; a cor/tamanho canônicos estão em
 * pc-components.css junto com o resto do design system. */
.pc-form-avaliar .pc-estrelas-input {
    justify-content: center;
    margin-bottom: 16px;
}

/* ------------------------------------------------------------------ */
/* Planos                                                              */
/* ------------------------------------------------------------------ */

.pc-planos {
    padding-top: 20px;
    padding-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Figma node 124814:2595. As medidas do mock (card 335, texto 12/8px) valem como
   RAZÃO do shell, não como px: --pc-largura-conteudo é a régua. */
.pc-planos {
    --pc-planos-corpo: clamp(11px, calc(var(--pc-largura-conteudo) * 0.0358), 14px);
    --pc-planos-mini: clamp(9px, calc(var(--pc-largura-conteudo) * 0.0239), 11px);
}

.pc-plano-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pc-plano-card h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--pc-tamanho-h3);
    line-height: 24px;
    color: var(--pc-grafite);
}

/* Fase 4 (revisão Figma, B4): parágrafo descritivo do plano — planos.png mostra um
   emoji no título (Publicas::descricao_plano()) + 2 frases explicativas abaixo. */
.pc-plano-card__emoji {
    font-size: 20px;
    line-height: 1;
}

.pc-plano-card__descricao {
    font-size: var(--pc-planos-corpo);
    line-height: 1.5;
    color: var(--pc-cinza-500);
}

.pc-plano-card__descricao p {
    margin: 0;
}

.pc-plano-card__preco-linha {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

/* O Figma escalona o preço: "R" e "$" menores e em cinza, o valor grande em grafite. */
.pc-plano-card__preco {
    font-family: var(--pc-fonte-titulo);
    font-weight: 600;
    color: var(--pc-grafite);
    margin: 0;
    display: flex;
    align-items: baseline;
    line-height: 1;
}

.pc-plano-card__moeda {
    color: var(--pc-cinza-500);
}

.pc-plano-card__moeda-r {
    font-size: 20px;
}

.pc-plano-card__moeda-cifrao {
    font-size: 24px;
}

.pc-plano-card__valor {
    font-size: 32px;
}

/* fix round 1 (revisão Figma, rodada 2, B4): ícone real do Pro (presente/caixa com
   laço, node 124823:8818) usa fill="currentColor" no SVG — a cor vem do token
   --pc-amarelo aqui, herdada via currentColor. */
.pc-plano-card__icone {
    color: var(--pc-amarelo);
}

.pc-plano-card__icone svg {
    display: block;
}

/* Pill do trial: <ul> porque o Figma desenha o texto com marcador (list-disc). */
.pc-plano-card__trial {
    align-self: center;
    background: var(--pc-verde-destaque-24);
    border-radius: var(--pc-radius-pill);
    margin: 0;
    padding: 2px 4px 2px 14px;
    list-style: disc;
}

.pc-plano-card__trial li {
    color: var(--pc-verde-destaque);
    font-size: var(--pc-planos-mini);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* Aviso de cobrança do plano pago (trial não debita agora / sem trial debita na
   hora). Discreto de propósito — o banner amarelo é só do card Free. */
.pc-plano-card__cobranca {
    margin: 8px 0 0;
    font-size: var(--pc-planos-mini);
    line-height: 1.5;
    color: var(--pc-cinza-700, #555);
}

.pc-plano-card .pc-botao {
    width: 100%;
    margin: 0;
}

/* Fase 4 (revisão Figma, B4): "O plano inclui:" é uma caixa com borda própria (não só
   um separador no topo da lista) — planos.png. */
.pc-plano-card__inclui {
    border: 1px solid var(--pc-cinza-100);
    border-radius: var(--pc-radius-card);
    padding: 16px;
}

.pc-plano-card__inclui-titulo {
    font-family: var(--pc-fonte-corpo);
    font-size: var(--pc-planos-corpo);
    font-weight: 400;
    line-height: 1.5;
    color: var(--pc-cinza-500);
    margin: 0 0 16px;
}

.pc-plano-card__beneficios {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pc-plano-card__beneficios li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--pc-planos-mini);
    line-height: 1.12;
    color: var(--pc-cinza-300);
}

.pc-plano-card__check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.pc-plano-card__check svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Fase 4 (revisão Figma, B4): aviso do plano Free — planos.png mostra texto em amarelo
   (sem caixa própria) avisando que o perfil não é divulgado nas buscas neste plano. */
.pc-plano-card__aviso {
    font-size: var(--pc-planos-mini);
    font-weight: 600;
    line-height: 1.2;
    color: var(--pc-amarelo);
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* Como funciona                                                       */
/* ------------------------------------------------------------------ */

/* Figma nodes 124814:2511 (busca) e 124814:2427 (oferece). A tela é estática:
   a régua é a razão do shell (--pc-largura-conteudo), nunca os 375px literais. */

.pc-como-funciona {
    padding-top: 20px;
    padding-bottom: 40px;
}

/* --- Hero: card grafite com foto a 20% + 2 gradientes (Figma 124814:2523) --- */

.pc-cf-hero {
    position: relative;
    display: none;
    overflow: hidden;
    border-radius: var(--pc-radius-capa);
    background: var(--pc-grafite);
    /* 335×177 no Figma = mesma proporção em qualquer largura. */
    aspect-ratio: 335 / 177;
    /* O card de abas flutua sobre a base do hero; a folga entra no .pc-cf-abas. */
    isolation: isolate;
}

.pc-cf-hero.is-ativo {
    display: block;
}

.pc-cf-hero__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    opacity: 0.2;
}

/* Os dois gradientes do Figma, na mesma ordem/ângulo. */
.pc-cf-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(20.67deg, rgba(25, 25, 25, 0.9) 13.8%, rgba(25, 25, 25, 0) 65.1%),
        linear-gradient(153.88deg, var(--pc-grafite) 31%, rgba(43, 43, 43, 0) 92.6%);
}

/* O texto fica centrado no espaço ÚTIL do hero (o que sobra acima do card de
   abas, que invade ~40px da base). Antes era justify-content:flex-end com 52px
   de reserva: o subtítulo descia e encostava no card branco. */
.pc-cf-hero__conteudo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: var(--pc-hero-respiro) var(--pc-hero-respiro) 56px;
    text-align: center;
}

.pc-cf-hero__conteudo h1 {
    margin: 0;
    font-family: var(--pc-fonte-titulo);
    font-weight: 600;
    font-size: var(--pc-tamanho-h3);
    line-height: 24px;
    color: var(--pc-cinza-100);
}

.pc-cf-hero__conteudo p {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--pc-cinza-100-60);
}

/* --- Abas: card branco flutuando sobre a base do hero (Figma 124814:2524) --- */

.pc-cf-abas {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 3px;
    width: 88%;
    margin: -40px auto 0;
    padding: 14px;
    background: var(--pc-branco);
    border: 0.5px solid var(--pc-cinza-100);
    border-radius: 24px;
}

.pc-cf-abas__item {
    flex: 1;
    min-height: 32px;
    padding: 8px 10px;
    border: none;
    border-radius: var(--pc-radius-pill);
    background: var(--pc-cinza-100);
    color: var(--pc-cinza-500);
    font-family: var(--pc-fonte-corpo);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.pc-cf-abas__item.is-ativo {
    background: var(--pc-amarelo);
    color: var(--pc-branco);
    font-weight: 600;
}

.pc-cf-abas__item:focus-visible {
    outline: none;
    box-shadow: var(--pc-foco-anel);
}

/* --- Passos: card com canto dobrado grande (Figma 124814:2535) --- */

.pc-cf-passos {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
}

/* Canto dobrado (Figma 124814:2452). No vetor original a ponta da aba é
   ARREDONDADA — a forma vem do path real do Figma via mask, não de polígono.
   Duas camadas: ::before é o corpo branco com o topo-direito cortado,
   ::after é a aba cinza por cima. */
.pc-cf-passo {
    /* Lado da dobra no Figma: 63,7 num card de 335 => 19% da LARGURA do card.
       Em px (derivado de --pc-largura-conteudo) para servir aos dois eixos do
       clip-path; teto de 64px para não virar uma orelha gigante em tela larga. */
    --pc-cf-dobra-px: min(calc(var(--pc-largura-conteudo) * 0.19), 64px);
    --pc-cf-dobra: var(--pc-cf-dobra-px);
    position: relative;
    padding: 28px;
    /* O fundo branco é desenhado pelas camadas abaixo (::before), não aqui:
       assim a área da dobra fica realmente vazada. */
    background: transparent;
}

/* Camada 1 — corpo do card: branco, borda 1px, cantos 24px, com o topo-direito
   recortado na diagonal onde entra a dobra. */
.pc-cf-passo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--pc-branco);
    border: 1px solid var(--pc-cinza-100);
    border-radius: 24px;
    /* O 2º valor do polígono é VERTICAL: em % resolveria contra a altura do card
       (variável) e o corte sairia torto. --pc-cf-dobra-px é o mesmo lado em px,
       calculado a partir da largura, então os dois catetos batem. */
    clip-path: polygon(
        0 0,
        calc(100% - var(--pc-cf-dobra-px)) 0,
        100% var(--pc-cf-dobra-px),
        100% 100%,
        0 100%
    );
}

/* Camada 2 — a aba dobrada. Usa o MESMO path do Figma que o card de categoria
   (--pc-dobra-forma, em pc-tokens.css): a hipotenusa encosta na diagonal do corte
   e a massa aponta para dentro do card, com o curl arredondado no topo-esquerdo.
   Antes isto era um polygon(0 0,100% 100%,100% 0) — massa espelhada, no canto
   errado — com o curl falsificado por border-radius. */
.pc-cf-passo::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: var(--pc-cf-dobra);
    /* aspect-ratio (e não height) porque % de altura resolve contra a ALTURA do
       card, que varia com o texto: a aba saía achatada (47px em vez de 62px). */
    aspect-ratio: 1;
    background: var(--pc-cinza-100);
    -webkit-mask: var(--pc-dobra-forma) center / 100% 100% no-repeat;
    mask: var(--pc-dobra-forma) center / 100% 100% no-repeat;
}

/* O conteúdo precisa ficar acima das duas camadas de fundo. */
.pc-cf-passo > * {
    position: relative;
    z-index: 1;
}

.pc-cf-passo + .pc-cf-passo {
    margin-top: 20px;
}

/* Cards 2 e 3 levemente girados, como no Figma (+2,57° e +5,92°). */
.pc-cf-passo--2 {
    transform: rotate(2.57deg);
}

.pc-cf-passo--3 {
    transform: rotate(5.92deg);
}

.pc-cf-passo__icone {
    display: block;
    width: 40px;
    height: 40px;
}

/* O SVG já traz o círculo amarelo — não pintar fundo por baixo. */
.pc-cf-passo__icone svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pc-cf-passo__titulo {
    margin: 20px 0 0;
    font-family: var(--pc-fonte-corpo);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--pc-grafite);
}

.pc-cf-passo__texto {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: var(--pc-cinza-500);
}

/* Numeral 64px Syne SemiBold #B3B3B3 na base do card (Figma 124814:2545). */
.pc-cf-passo__numero {
    display: block;
    margin-top: 20px;
    font-family: var(--pc-fonte-titulo);
    font-size: 64px;
    font-weight: 600;
    line-height: 32px;
    color: var(--pc-cinza-300);
}

/* --- CTA: card grafite com foto e botão amarelo (Figma 124814:2580) --- */

/* min-height em vez de aspect-ratio fixo: no Figma o bloco tem 335×221, mas o
   texto é traduzível e o botão fica ancorado embaixo — travar a altura cortava
   o CTA (o conteúdo mede ~269px e o overflow:hidden comia o botão). */
.pc-cf-cta {
    position: relative;
    overflow: hidden;
    margin-top: 28px;
    border-radius: var(--pc-radius-card);
    background: var(--pc-grafite);
    min-height: calc(var(--pc-largura-conteudo) * 0.66);
}

.pc-cf-cta__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

/* Gradiente que escurece a esquerda para o texto ficar legível sobre a foto. */
.pc-cf-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(-63.76deg, var(--pc-grafite) 24.8%, rgba(43, 43, 43, 0.52) 99.3%),
        linear-gradient(218.07deg, rgba(0, 0, 0, 0.9) 16.9%, rgba(43, 43, 43, 0) 60.7%);
}

.pc-cf-cta__conteudo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
    padding: var(--pc-hero-respiro);
}

/* A coluna de texto do Figma é 150 de 335 (~45%), mas com a foto à direita
   sobra respiro até ~56% sem invadir o rosto da pessoa. */
.pc-cf-cta__conteudo h2 {
    margin: 0;
    max-width: 56%;
    font-family: var(--pc-fonte-titulo);
    font-weight: 600;
    font-size: var(--pc-tamanho-h3);
    line-height: 24px;
    color: var(--pc-cinza-100);
}

.pc-cf-cta__conteudo p {
    margin: 0;
    max-width: 56%;
    font-size: 12px;
    line-height: 1.35;
    color: var(--pc-cinza-100-60);
}

/* margin-top:auto empurra o botão para a base do card, como no Figma. O respiro
   mínimo em relação ao texto vem do gap do flex container. */
.pc-cf-cta__conteudo .pc-botao {
    width: 100%;
    margin-top: auto;
    text-align: center;
}

/* --- Segurança: card branco com selo laranja sobreposto (Figma 124814:2588) --- */

.pc-cf-seguranca {
    position: relative;
    margin-top: 44px;
    padding: 28px 14px;
    text-align: center;
    background: var(--pc-branco);
    border: 0.5px solid var(--pc-cinza-100);
    border-radius: 24px;
}

.pc-cf-seguranca h2 {
    margin: 0 auto;
    /* 255px sobre os 335px da coluna do Figma = 76% (regra: largura é razão). */
    max-width: 76%;
    font-family: var(--pc-fonte-titulo);
    font-weight: 600;
    font-size: var(--pc-tamanho-h3);
    line-height: 24px;
    color: var(--pc-grafite);
}

.pc-cf-seguranca p {
    margin: 16px auto 0;
    max-width: 76%;
    font-size: 12px;
    line-height: 1.35;
    color: var(--pc-cinza-500);
}

/* Figma: selo x=297 w=38 (borda direita 335) dentro do card x=20 w=335 (borda 355)
   -> 20px de folga a direita = 5.97% da largura do card. */
.pc-cf-seguranca__selo {
    position: absolute;
    top: -19px;
    right: 5.97%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 19px;
    background: var(--pc-laranja-selo);
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.25));
}

/* --- Animações (tela 100% estática: só entrada + microinterações) --- */

/* Entrada por scroll — o JS adiciona .is-visivel (ver pc-publicas.js). */
[data-pc-revelar] .pc-cf-passo,
[data-pc-revelar].pc-cf-cta,
[data-pc-revelar].pc-cf-seguranca {
    opacity: 0;
    transform: translateY(24px) rotate(var(--pc-cf-giro, 0deg));
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* O giro dos cards 2/3 precisa sobreviver ao translate da animação. */
.pc-cf-passo--2 {
    --pc-cf-giro: 2.57deg;
}

.pc-cf-passo--3 {
    --pc-cf-giro: 5.92deg;
}

[data-pc-revelar] .pc-cf-passo.is-visivel,
[data-pc-revelar].pc-cf-cta.is-visivel,
[data-pc-revelar].pc-cf-seguranca.is-visivel {
    opacity: 1;
    transform: translateY(0) rotate(var(--pc-cf-giro, 0deg));
}

/* Cascata: cada passo entra logo depois do anterior. */
.pc-cf-passo--2 { transition-delay: 0.08s; }
.pc-cf-passo--3 { transition-delay: 0.16s; }
.pc-cf-passo--4 { transition-delay: 0.24s; }

/* Microinteração: o card levanta e desfaz o giro ao toque/hover. */
/* A sombra é drop-shadow, não box-shadow: box-shadow no <li> (transparente e
   retangular) pinta os cantos e a área vazada da dobra, e no ::before o
   clip-path a recorta fora. O filtro segue a silhueta real das duas camadas. */
.pc-cf-passo {
    transition: opacity 0.5s ease, transform 0.5s ease, filter 0.3s ease;
}

@media (hover: hover) {
    .pc-cf-passo.is-visivel:hover {
        transform: translateY(-4px) rotate(0deg);
        filter: drop-shadow(0 2px 12px rgba(26, 26, 26, 0.08));
    }
}

/* Troca de aba: o painel entrante desliza suavemente. */
.pc-tabs__painel.is-ativo[data-pc-tab-painel] {
    animation: pc-cf-entrada 0.35s ease both;
}

@keyframes pc-cf-entrada {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    [data-pc-revelar] .pc-cf-passo,
    [data-pc-revelar].pc-cf-cta,
    [data-pc-revelar].pc-cf-seguranca {
        opacity: 1;
        transform: rotate(var(--pc-cf-giro, 0deg));
        transition: none;
    }

    .pc-tabs__painel.is-ativo[data-pc-tab-painel] {
        animation: none;
    }

    .pc-cf-passo.is-visivel:hover {
        transform: rotate(var(--pc-cf-giro, 0deg));
    }
}

/* ------------------------------------------------------------------ */
/* Login / Cadastro / Recuperar senha                                  */
/* ------------------------------------------------------------------ */

.pc-login,
.pc-cadastro,
.pc-recuperar-senha {
    padding-top: 32px;
    padding-bottom: 40px;
}

.pc-login p,
.pc-recuperar-senha p {
    color: var(--pc-cinza-500);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 24px;
}

/* Figma (node 124814:4551): a coluna Email > Senha > Lembrar tem gap de 16px,
   e dentro de cada campo o label fica 20px acima do input. */
.pc-form-login .pc-campo {
    margin-bottom: 16px;
}

.pc-form-login .pc-campo .pc-campo__label {
    margin-bottom: 20px;
}

.pc-login__linha-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 32px;
}

.pc-login__linha-extra .pc-campo {
    margin-bottom: 0;
}

/* Figma (node 124814:4249): Body 2 — Poppins Regular 12/1.5 em amarelo, sem
   sublinhado e sem o peso 600 que estava aqui. */
.pc-login__esqueceu {
    color: var(--pc-amarelo);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}

/* Figma (node 124814:4243): o botao ocupa a largura do conteudo e tem 44px de
   altura (aspect 327/44 sobre a coluna do shell). */
.pc-login__submit {
    width: 100%;
    min-height: 44px;
    margin-bottom: 20px;
}

.pc-login__cadastro {
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pc-grafite);
}

/* Figma (node 124814:4240): "Criar conta" e amarelo sublinhado, peso regular. */
.pc-login__cadastro a {
    color: var(--pc-amarelo);
    font-weight: 400;
    text-decoration: underline;
}

.pc-cadastro__ajuda {
    font-size: 12px;
    color: var(--pc-cinza-500);
    margin: 0 0 16px;
}

.pc-cadastro h2 {
    margin: 28px 0 4px;
}

.pc-cadastro__submit {
    width: 100%;
    margin-top: 8px;
}

.pc-recuperar-senha__submit {
    width: 100%;
    min-height: 44px;
}

.pc-recuperar-senha p.pc-recuperar-senha__voltar {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 0;
}

.pc-recuperar-senha__voltar a {
    color: var(--pc-amarelo);
    font-weight: 600;
    text-decoration: none;
}

.pc-aviso {
    border-radius: var(--pc-radius-card);
    padding: 14px 16px;
    font-size: 13px;
    margin-bottom: 20px;
}

/* Sem variante --erro: erro é sempre toast (PC.toast), nunca caixa no HTML. */
.pc-aviso--ok {
    background: var(--pc-verde-claro);
    color: var(--pc-verde);
}

/* Exceção à regra do toast acima, e só ela: a validação de /redefinir-senha
   acontece no POST, com a página re-renderizada pelo servidor. Não há JS no
   caminho para disparar PC.toast — o aviso precisa vir no HTML ou o usuário
   não descobre por que a senha não foi salva. */
.pc-aviso--atencao {
    background: var(--pc-vermelho-claro);
    color: var(--pc-vermelho);
}

/* ------------------------------------------------------------------ */
/* Redefinir senha (destino do link do e-mail)                          */
/* ------------------------------------------------------------------ */

.pc-redefinir-senha {
    padding-top: 32px;
    padding-bottom: 40px;
}

.pc-redefinir-senha p {
    color: var(--pc-cinza-500);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 24px;
}

.pc-redefinir-senha .pc-campo {
    margin-bottom: 16px;
}

/* Âncora de sucesso/link inválido usa a mesma classe do submit: como <a> ela
   não herda o line-height do botão, daí o flex para centrar o rótulo. */
.pc-redefinir-senha__submit {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
}

.pc-redefinir-senha p.pc-redefinir-senha__voltar {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 0;
}

.pc-redefinir-senha__voltar a {
    color: var(--pc-amarelo);
    font-weight: 600;
    text-decoration: none;
}

/* Gaveta de denuncia: estilo em pc-components.css — a casca (UI::drawer_denuncia)
   serve tanto a tela publica do servico quanto a de avaliacoes recebidas. */

/* ------------------------------------------------------------------ */
/* Gaveta de fotos do servico (dono)                                    */
/* ------------------------------------------------------------------ */

/* Uma foto por LINHA: a lista herda .pc-form-servico__foto-* do formulario do
   prestador (grade de miniaturas de 88px), mas aqui a folha tem a largura da
   tela — cabe miniatura + acoes lado a lado, sem espremer. As sobrescritas
   ficam so sob .pc-drawer--fotos para nao mexer na outra tela. */
.pc-drawer--fotos .pc-form-servico__fotos-lista {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
}

.pc-drawer--fotos .pc-form-servico__foto-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px;
}

.pc-drawer--fotos .pc-form-servico__foto-item img {
    width: 72px;
    height: 56px;
    border-radius: 8px;
}

/* Fora do canto da miniatura: na linha o selo é a legenda do meio. */
.pc-drawer--fotos .pc-form-servico__foto-selo {
    position: static;
    justify-self: start;
}

/* Sem o selo a coluna do meio colapsa e as acoes encostam na foto. */
.pc-drawer--fotos .pc-form-servico__foto-selo:empty {
    display: block;
    padding: 0;
    background: none;
}

.pc-drawer--fotos .pc-form-servico__foto-acoes {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 0;
}

.pc-drawer--fotos .pc-form-servico__foto-btn {
    padding: 8px 10px;
    font-size: 11px;
    border-radius: var(--pc-radius-pill);
    background: var(--pc-cinza-100);
}

/* O motivo da rejeicao ocupa a linha inteira, abaixo das 3 colunas. */
.pc-drawer--fotos .pc-form-servico__foto-motivo {
    grid-column: 1 / -1;
    padding: 0;
}

.pc-drawer--fotos .pc-form-servico__upload {
    display: flex;
    width: 100%;
}

/* Visao do dono (Figma 124814:1761/1677/2126): os campos que o prestador pode
   editar aparecem com moldura de input mesmo fora do modo edicao. */
.pc-servico--dono .pc-servico__titulo,
.pc-servico--dono .pc-servico__descricao,
.pc-servico--dono .pc-servico__item-info p,
.pc-servico--dono .pc-servico__mapa {
    border: 1px solid var(--pc-cinza-100);
    border-radius: 16px;
    padding: 12px;
}

.pc-servico--dono.is-editando [data-pc-editavel] {
    border-color: var(--pc-amarelo);
    background: var(--pc-branco);
    outline: none;
}

.pc-servico--dono.is-editando [data-pc-editavel]:empty::before {
    content: attr(data-pc-vazio);
    color: var(--pc-cinza-500);
}

.pc-servico__editar-pill[disabled] {
    opacity: 0.6;
    pointer-events: none;
}

/* Editando, a pill do topo vira "Salvar": mesma estilizacao do Salvar do rodape
   (amarelo + texto branco), porque e o mesmo comando. */
.pc-servico--dono.is-editando .pc-botao.pc-servico__editar-pill {
    background: var(--pc-amarelo);
    border-color: var(--pc-amarelo);
    color: var(--pc-branco);
}

/* Estados repetidos no mesmo seletor: o background acima tem especificidade
   maior que o hover da variante e o anularia. */
@media (hover: hover) {
    .pc-servico--dono.is-editando .pc-botao.pc-servico__editar-pill:hover:not(:disabled) {
        background: var(--pc-amarelo-hover);
        border-color: var(--pc-amarelo-hover);
    }
}

.pc-servico--dono.is-editando .pc-botao.pc-servico__editar-pill:active:not(:disabled) {
    background: var(--pc-amarelo-active);
    border-color: var(--pc-amarelo-active);
}

/* Camera flutuante do dono: mesma posicao/tamanho do grupo que o cliente ve,
   e so no modo edicao. */
.pc-servico__editar-fotos {
    position: absolute;
    right: 16px;
    top: 16px;
    display: none;
    z-index: 1;
}

.pc-servico--dono.is-editando .pc-servico__editar-fotos {
    display: flex;
}

.pc-servico__editar-fotos svg {
    width: 22px;
    height: 22px;
}

/* Itens opcionais (incluso/garantia/prazo): switch por item, visivel so no modo
   edicao. Fora dele o dono ve a mesma tela do cliente — item desligado some. */
.pc-servico__item-info {
    align-items: flex-start;
}

.pc-servico__item-info > div {
    flex: 1 1 auto;
    min-width: 0;
}

.pc-servico__item-info h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pc-servico__item-switch {
    display: none;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.pc-servico--dono.is-editando .pc-servico__item-switch {
    display: inline-flex;
}

.pc-servico__item-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pc-servico__item-switch-trilho {
    position: relative;
    display: block;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--pc-cinza-300);
    transition: background 0.18s ease;
}

.pc-servico__item-switch-trilho::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--pc-branco);
    transition: transform 0.18s ease;
}

.pc-servico__item-switch input:checked + .pc-servico__item-switch-trilho {
    background: var(--pc-amarelo);
}

.pc-servico__item-switch input:checked + .pc-servico__item-switch-trilho::after {
    transform: translateX(14px);
}

.pc-servico__item-switch input:focus-visible + .pc-servico__item-switch-trilho {
    outline: 2px solid var(--pc-amarelo);
    outline-offset: 2px;
}

.pc-servico__item-switch-texto {
    font-family: var(--pc-fonte-corpo);
    font-size: 11px;
    font-weight: 400;
    color: var(--pc-cinza-500);
}

/* Desligado: some para todo mundo. O dono so continua vendo (esmaecido) enquanto
   edita, senao nao teria como religar. */
.pc-servico__item-info.is-oculto {
    display: none;
}

.pc-servico--dono.is-editando .pc-servico__item-info.is-oculto {
    display: flex;
    opacity: 0.5;
}

/* Garantia: numeral em input curto + "dias" do template. Fora do modo edicao o
   input sai de cena e fica so o texto montado. */
.pc-servico__garantia {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pc-servico__garantia-input,
.pc-servico__garantia-unidade {
    display: none;
}

.pc-servico--dono.is-editando .pc-servico__garantia-input,
.pc-servico--dono.is-editando .pc-servico__garantia-unidade {
    display: inline-block;
}

.pc-servico--dono.is-editando .pc-servico__garantia-texto {
    display: none;
}

.pc-servico__garantia-input {
    width: 72px;
    border: 1px solid var(--pc-amarelo);
    border-radius: 12px;
    padding: 6px 10px;
    font-family: var(--pc-fonte-corpo);
    font-size: 13px;
    color: var(--pc-cinza-700);
    background: var(--pc-branco);
}

.pc-servico__garantia-input:focus {
    outline: none;
    border-color: var(--pc-amarelo);
}

/* Some as setinhas: o campo e curto e o passo de 1 dia nao ajuda em nada. */
.pc-servico__garantia-input::-webkit-outer-spin-button,
.pc-servico__garantia-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pc-servico__garantia-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* "Responde em": mesmo desenho da garantia (input curto + unidade do template),
   sem switch — o dado alimenta a busca e o perfil profissional. Bloco de edicao
   puro: so existe enquanto o dono edita, porque o valor ja e exibido na aba
   Profissional e no card da busca. */
.pc-servico__item-info[data-pc-item="responde"] {
    display: none;
}

.pc-servico--dono.is-editando .pc-servico__item-info[data-pc-item="responde"] {
    display: flex;
}

.pc-servico__responde-edicao {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* A moldura de input mora no proprio <input>; o <p> so alinha (vale tambem para
   a garantia, que tem a mesma estrutura). */
.pc-servico--dono.is-editando .pc-servico__item-info p.pc-servico__responde-edicao,
.pc-servico--dono.is-editando .pc-servico__item-info p.pc-servico__garantia {
    border: 0;
    padding: 0;
}

/* Texto de apoio: e um <p> dentro de .pc-servico__item-info, entao herdaria a
   moldura de input da visao do dono. Zera borda/padding para virar hint. */
.pc-servico--dono .pc-servico__item-info p.pc-servico__item-ajuda {
    margin-top: 6px;
    border: 0;
    padding: 0;
    font-family: var(--pc-fonte-corpo);
    font-size: 11px;
    line-height: 1.4;
    color: var(--pc-cinza-500);
}

/* Salvar do rodape: mesmo comando da pill do topo, so enquanto edita. */
.pc-servico__salvar-rodape {
    display: none;
    width: 100%;
    margin-top: 20px;
}

.pc-servico--dono.is-editando .pc-servico__salvar-rodape {
    display: inline-flex;
}

.pc-servico__salvar-rodape[disabled] {
    opacity: 0.6;
    pointer-events: none;
}

/* Gaveta de categorias do dono: cards selecionáveis lado a lado, alfabéticos.
   O próprio card é o controle — sem checkbox à direita. */
.pc-cat-lista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

/* Não selecionado: card e conteúdo em cinza — só o escolhido puxa a atenção. */
.pc-cat-opcao {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    border: 1px solid var(--pc-cinza-100);
    border-radius: var(--pc-radius-capa);
    background: var(--pc-cinza-claro);
    color: var(--pc-cinza-500);
    font-size: 10px;
    text-align: center;
    cursor: pointer;
}

/* Sem checkbox, o card marcado precisa se distinguir sozinho: fundo amarelo cheio,
   ícone e texto brancos (o SVG usa currentColor, então segue a cor do texto). */
.pc-cat-opcao.is-marcada {
    border-color: var(--pc-amarelo);
    background: var(--pc-amarelo);
    color: var(--pc-branco);
    font-weight: 600;
}

.pc-cat-opcao__icone {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.pc-cat-opcao__icone svg {
    width: 100%;
    height: 100%;
}

/* Em 4 colunas o card e estreito: "Profissionais" tem que caber quebrando, nao
   vazar. hyphens resolve o pior caso sem apertar a fonte. */
.pc-cat-opcao__nome {
    line-height: 1.2;
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.pc-drawer--categorias .pc-drawer__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pc-cat-contador {
    font-size: 13px;
    color: var(--pc-cinza-500);
}

/* ------------------------------------------------------------------ */
/* Telas de acesso — wrapper do split desktop.                         */
/* No mobile o wrapper não gera caixa e o painel de marca não existe;  */
/* o layout de sempre segue intacto. Quem monta o split é a camada     */
/* desktop (pc-desktop.css, >=1024px).                                 */
/* ------------------------------------------------------------------ */
.pc-acesso {
    display: contents;
}

.pc-acesso__painel {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Páginas legais (Política de Privacidade / Termos de Uso).           */
/* Tipografia inteira em Poppins (pedido de 31/08): os h1/h2 saem do   */
/* Syne global de pc-tokens. Medida de ~70ch para leitura confortável  */
/* no desktop; no mobile o container já limita.                        */
/* ------------------------------------------------------------------ */
.pc-legal {
    padding-block: 24px 48px;
}

.pc-legal .pc-legal__titulo,
.pc-legal h2 {
    font-family: var(--pc-fonte-corpo);
}

.pc-legal__titulo {
    margin: 0 0 4px;
    font-size: var(--pc-tamanho-h2);
    font-weight: 600;
}

.pc-legal__atualizacao {
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--pc-cinza-500);
}

.pc-legal__secao {
    max-width: 70ch;
}

.pc-legal__secao h2 {
    margin: 28px 0 8px;
    font-size: 17px;
    font-weight: 600;
}

.pc-legal__secao p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 24px;
    color: var(--pc-cinza-700);
}