/*
 * Páginas Conecta — camada desktop.
 *
 * REGRA ABSOLUTA: tudo aqui vive dentro de @media (min-width: …). O app foi
 * construído mobile-only e o CSS base não tem nenhuma media query de largura;
 * por isso o mobile é preservado por construção — abaixo de 768px o navegador
 * nunca avalia este arquivo. Nunca escrever uma regra fora de uma media query.
 *
 * Fonte da verdade: Figma, página "desktop", frame 124979:2391 (Home 1440).
 * Medidas: conteudo 1196, header pill 1196x80, card servico 332 gap 24,
 * card categoria 176 gap 20, hero 1400x596, footer 1194x194.
 *
 * Breakpoints: 768 (tablet) e 1024 (desktop pleno). Nenhum outro.
 */

/* ------------------------------------------------------------------ */
/* Tablet — 768px                                                      */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
    :root {
        /* --pc-container tem width: var(--pc-largura-shell) + padding-inline:
           var(--pc-respiro-lateral) em box-sizing: border-box (pc-tokens.css:235-241).
           O container real só casa com --pc-largura-conteudo se o shell for
           reconstruído como conteudo + respiro*2 — a mesma identidade da base
           (pc-tokens.css:228), agora com os valores do desktop. */
        --pc-largura-conteudo: min(92vw, 900px);
        --pc-respiro-lateral: 24px;
        --pc-largura-shell: calc(var(--pc-largura-conteudo) + var(--pc-respiro-lateral) * 2);
    }

    /* Figma: card de serviço 332 com gap 24; card de categoria 176 com gap 20;
       label da categoria em valor absoluto. Valendo a partir do tablet: sem
       isso a faixa 768-1023 herdava as regras do mobile e o carrossel ficava
       explodido (433px) enquanto o conteudo ja tinha alargado. */
    .pc-carrossel__item {
        width: 332px;
    }

    .pc-carrossel {
        gap: 24px;
    }

    .pc-cat-cards {
        --pc-cat-largura: 176px;
        gap: 20px;
    }

    .pc-cat-card__label {
        font-size: 13px;
    }

    /* Unico consumidor de --pc-largura-conteudo sem teto proprio (os outros 9
       tem clamp/min/max-width). Sem isto, --pc-largura-conteudo em 1196px
       vira ~789px de altura minima — bloco absurdo. */
    .pc-cf-cta {
        min-height: min(calc(var(--pc-largura-conteudo) * 0.66), 300px);
    }

    /* O palco do recorte é quadrado e guiado pela altura; sem teto próprio ele
       acompanharia a largura do modal e o enquadramento sairia do lugar.
       O gesto e o ResizeObserver não são tocados. */
    .pc-drawer--avatar .pc-avatar-crop__palco {
        width: min(420px, 100%, calc(100dvh - 210px));
    }
}

/* ------------------------------------------------------------------ */
/* Desktop — 1024px                                                    */
/* ------------------------------------------------------------------ */
@media (min-width: 1024px) {
    :root {
        --pc-largura-conteudo: min(90vw, 1196px);
        --pc-respiro-lateral: 32px;
        /* Mesma identidade do bloco de 768px, com os valores do desktop pleno:
           o container real (.pc-container) chega aos 1196px do Figma. */
        --pc-largura-shell: calc(var(--pc-largura-conteudo) + var(--pc-respiro-lateral) * 2);
    }

    /* Os valores de 332/24/176/20/13px ja valem desde 768px (bloco acima) —
       nada a redefinir aqui alem dos tokens de largura. O valor e fixo, nao
       razao: herdar `--pc-largura-shell * 0.57` com o shell largo daria
       cards de 1000px+. */

    /* O header vira o pill branco flutuante do Figma (1196x80). Os slots
       mobile (voltar / logo centrado / compartilhar) saem. */
    /* Coluna, não a linha do mobile: o pill é o único item na horizontal e o
       "Voltar ao perfil" (quando existe) se empilha abaixo dele em vez de
       disputar a linha e empurrar o pill para o lado. */
    .pc-header {
        height: auto;
        flex-direction: column;
        align-items: stretch;
        background: transparent;
        padding: 20px 0 0;
        position: relative;
        z-index: 20;
    }

    /* Na home o Figma sobrepõe o pill ao hero: o hero começa em y=20 e a navbar
       flutua em y=51 por cima dele. O header desce para 51 e devolve a altura
       menos os 20px do topo do hero (51 + 80 − 20 = 111), então o <main> começa
       em y=20 e o hero corre por baixo do pill. Só na home — nas outras telas
       não há hero atrás e a sobreposição comeria o conteúdo. */
    body.home .pc-header {
        padding-top: 51px;
        margin-bottom: -111px;
    }

    body.home .pc-home {
        padding-top: 0;
    }

    .pc-header__slot,
    .pc-header__logo {
        display: none;
    }

    /* Caminho de volta das telas abertas pelo menu do perfil. Alinha com a
       mesma largura do pill e se apoia abaixo dele, sem disputar os slots
       internos (logo/nav/CTA) que o Figma define. */
    .pc-header__voltar-perfil {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        width: var(--pc-largura-conteudo);
        max-width: 100%;
        margin: 20px auto -12px;
        padding-inline: 4px;
        color: var(--pc-cinza-700);
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
        transition: color 0.15s ease;
    }

    .pc-header__voltar-perfil:hover,
    .pc-header__voltar-perfil:focus-visible {
        color: var(--pc-grafite);
    }

    .pc-header__desktop {
        display: flex;
        align-items: center;
        gap: 32px;
        width: var(--pc-largura-conteudo);
        max-width: 100%;
        height: 80px;
        margin-inline: auto;
        padding-inline: 32px;
        background: var(--pc-branco);
        border-radius: var(--pc-radius-pill);
        box-shadow: var(--pc-sombra-card);
    }

    .pc-header__desktop-lista {
        display: flex;
        align-items: center;
        gap: 32px;
        list-style: none;
        margin: 0;
        padding: 0 0 0 32px;
        border-left: 1px solid var(--pc-cinza-100);
    }

    .pc-header__desktop-link {
        /* Figma: links Poppins Regular 16 #808080. */
        color: var(--pc-cinza-500);
        text-decoration: none;
        font-weight: 400;
    }

    .pc-header__desktop-link.is-ativo {
        color: var(--pc-grafite);
        font-weight: 600;
    }

    .pc-header__desktop-acoes {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
    }

    .pc-header__desktop-cta {
        font-size: 16px;
    }

    .pc-header__desktop-icone {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--pc-amarelo);
        color: var(--pc-branco);
        text-decoration: none;
    }

    /* No desktop o badge é CONTADOR, não ponto: o total já mora no data-total
       (pc-privadas.js aplicarContadorNotificacoes) e vira texto via content. */
    .pc-header__desktop-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        box-sizing: border-box;
        border-radius: 10px;
        background: var(--pc-grafite);
        color: var(--pc-branco);
        font-family: var(--pc-fonte-corpo);
        font-size: 11px;
        font-weight: 600;
        line-height: 20px;
        text-align: center;
    }

    .pc-header__desktop-badge::after {
        content: attr(data-total);
    }

    /* A nav do Figma desktop é o header; a barra inferior sai. */
    .pc-bottom-nav {
        display: none;
    }

    /* A reserva de 82px em pc-components.css:1359 acompanha a barra: sem
       zerar, sobra um vão no rodapé de toda página. */
    body:has(.pc-bottom-nav) {
        padding-bottom: 0;
    }

    /* Rodapé — referência Figma "Padrões — Utilizados" 100533:447: faixa
       escura full-bleed (banda 1920x638, conteúdo 1320 centrado) adaptada aos
       tokens do projeto — grafite --pc-cinza-900 no lugar do navy da
       referência, títulos Syne brancos, corpo Poppins --pc-cinza-300 (o mesmo
       #B3B3B3 da referência). Largura do miolo pela regra de razão
       (--pc-largura-conteudo), não os 1320px literais. */
    .pc-footer {
        margin-top: 48px;
        background: var(--pc-cinza-900);
        padding: 72px 0 40px;
    }

    .pc-footer__conteudo {
        width: var(--pc-largura-conteudo);
        max-width: 100%;
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        gap: 56px;
    }

    /* Figma: coluna da marca 310 + 3 colunas de 224 com o espaço restante
       distribuído entre elas (gap ~120 no frame de 1320; aqui space-between
       preserva a razão no miolo de 1196). */
    .pc-footer__grid {
        display: grid;
        grid-template-columns: minmax(240px, 310px) repeat(3, minmax(0, 224px));
        justify-content: space-between;
        gap: 48px;
    }

    .pc-footer__marca {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    .pc-footer__logo img {
        display: block;
        width: 145px;
        height: 48px;
    }

    .pc-footer__descricao {
        margin: 0;
        font-size: 14px;
        line-height: 24px;
        color: var(--pc-cinza-300);
    }

    .pc-footer__titulo {
        margin: 0 0 24px;
        font-family: var(--pc-fonte-titulo);
        font-weight: 600;
        font-size: 18px;
        line-height: 26px;
        color: var(--pc-branco);
    }

    .pc-footer__lista {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .pc-footer__lista a {
        font-size: 14px;
        line-height: 24px;
        color: var(--pc-cinza-300);
        text-decoration: none;
        transition: color 0.18s ease;
    }

    .pc-footer__lista a:hover {
        color: var(--pc-amarelo);
    }

    /* Redes sociais: ícone (currentColor acompanha o hover) + rótulo. */
    .pc-footer__lista--redes a {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .pc-footer__rede-icone {
        display: block;
        flex: none;
    }

    .pc-footer__divisor {
        width: 100%;
        margin: 0;
        border: none;
        border-top: 1px solid var(--pc-branco-24);
    }

    /* Barra final (foto de referência): "Desenvolvido por: vime" à esquerda,
       políticas à direita. */
    .pc-footer__base {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .pc-footer__dev {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        color: var(--pc-branco);
    }

    /* logo-vime.svg é cinza #808080 (feito para fundo claro); como mask, o
       background pinta o desenho — branco no repouso, roxo Vime no hover
       (um filter não chegaria no #5C13E6 exato). O url vem por variável
       inline do PHP porque o CSS do plugin não conhece o caminho do tema. */
    .pc-footer__vime {
        display: block;
        width: 62px;
        height: 15px;
        background: var(--pc-branco);
        -webkit-mask: var(--pc-vime-logo) no-repeat center / contain;
        mask: var(--pc-vime-logo) no-repeat center / contain;
        transition: background 0.18s ease;
    }

    .pc-footer__vime:hover {
        background: var(--pc-roxo-vime);
    }

    .pc-footer__politicas {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 40px;
    }

    .pc-footer__politicas a {
        font-size: 14px;
        font-weight: 600;
        color: var(--pc-branco);
        text-decoration: none;
        transition: color 0.18s ease;
    }

    .pc-footer__politicas a:hover {
        color: var(--pc-amarelo);
    }

    /* Figma 124979:2391 — hero 1400x596 (~2.35:1), bem mais baixo e largo que
       o mobile (335/224, ~1.5:1). A foto continua um recorte PNG ancorado a
       direita (pc-publicas.css:39-49), nao cover; so a caixa muda de razao,
       entao os percentuais de altura/topo sao recalculados para a caixa nova
       em vez de herdados do mobile. */
    .pc-home__hero {
        aspect-ratio: 1400 / 596;
        /* Figma: o hero tem 1400 de largura (20px de cada borda da janela de
           1440) e raio 60 — escapa dos 1196 do conteúdo por margem negativa.
           O padding esquerdo deixa o título 50px para DENTRO da linha do
           conteúdo (x=172 no frame, conteúdo em x=122). */
        width: min(100vw - 40px, 1400px);
        margin-inline: calc((100% - min(100vw - 40px, 1400px)) / 2);
        border-radius: 60px;
        /* Empilha título + subtítulo (o <p> novo) centrados na vertical; no
           mobile o hero continua sendo uma linha só com o <h1>. */
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0 0 0 calc((min(100vw - 40px, 1400px) - var(--pc-largura-conteudo)) / 2 + 50px);
    }

    /* fig-hero.png (1400x596): a silhueta ocupa x 820-1210 e comeca em y~118,
       cortada na base. O asset (540x720) so tem conteudo em 440x647 dentro do
       frame, entao a caixa da <img> e maior que a pessoa: 391/(440/540) = 480
       de largura => 640 de altura (razao 0.75), topo do frame em 118 - 64.9 =
       53 e borda direita em 1400 - 1259 = 141. Em % do hero: altura 107.4%,
       topo 8.9%, respiro direito 10%. */
    .pc-home__hero .pc-home__hero-foto {
        top: 8.9%;
        right: 10%;
        height: 107.4%;
    }

    /* A foto do desktop é a do Figma (home-hero-desktop.png, 1330x1183: homem de
       polo amarelo, braços cruzados) — a do mobile continua sendo o entregador.
       Duas <img> com visibilidade por media query, e não `content:`/background:
       a geometria do recorte depende de `object-fit: contain` sobre a razão
       natural do arquivo, que só a <img> preserva; e assim o nó do mobile fica
       byte-a-byte o mesmo, sem herdar nada desta camada.

       Enquadramento derivado do fig-hero.png (1400x596): a silhueta ocupa
       x 823-1208 (386 de largura) e a parte saturada começa em y=153. No asset,
       a mesma região saturada mede 58.95% da largura do frame, com 19.47% de
       margem à direita e topo em 5.92% da altura. Logo o frame vale
       386/0.5895 = 655 de largura (=> 583 de altura pela razão 1330/1183),
       borda direita em 1208 + 0.1947x655 = 1336 (respiro 64 = 4.6%) e topo em
       153 - 0.0592x583 = 118 (19.9%). A base fica cortada pelo overflow. */
    .pc-home__hero .pc-home__hero-foto--desktop {
        top: 19.9%;
        right: 4.6%;
        height: 97.8%;
    }

    .pc-home__hero .pc-home__hero-foto:not(.pc-home__hero-foto--desktop) {
        display: none;
    }

    /* Padrão de logos "P" atrás da foto e à frente do degradê (fig-hero.png):
       ocupa a metade direita e some para a esquerda.

       Três correções medidas contra o recorte do fig-hero.png ampliado:
       (a) escala — no Figma cabem ~4.3 "P" na largura do recorte de amostra e
           aqui cabiam ~3.5, daí a altura cair de 118% para 96% do hero;
       (b) cor — o contorno do Figma é cinza neutro, não amarelo: o asset vem
           amarelo cheio e o grayscale o neutraliza;
       (c) intensidade — no Figma o padrão é quase imperceptível. */
    /* Seletor duplicado pelo mesmo motivo da foto: `.elementor img` vence a
       classe sozinha e devolveria height:auto (a caixa saía 919x747 crua). */
    .pc-home__hero .pc-home__hero-padrao {
        position: absolute;
        top: 2%;
        right: 0;
        left: auto;
        height: 96%;
        width: auto;
        max-width: none;
        object-fit: cover;
        object-position: left center;
        opacity: 0.5;
        filter: grayscale(1) brightness(1.6);
        mix-blend-mode: soft-light;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%);
        mask-image: linear-gradient(to right, transparent 0%, #000 40%);
        pointer-events: none;
    }

    /* Figma 124979:3470 — Syne Regular 52/48, tracking -1 (o peso 600 do
       mobile cai para 400). A caixa do Figma é 475, mas a Syne renderizada
       pelo navegador sai um fio mais larga e "clientes" caía para a 2ª linha
       (3 no total); 560 devolve a quebra do Figma — "Profissionais e
       clientes" / "conectados" — sem alcançar a foto (que começa em ~700). */
    .pc-home__hero-titulo {
        max-width: 560px;
        font-weight: 400;
        font-size: 52px;
        line-height: 48px;
        letter-spacing: -1px;
    }

    /* Figma 124981:4959 — Poppins 16/1.5 #b3b3b3, 24 abaixo do título. */
    .pc-home__hero-subtitulo {
        position: relative;
        z-index: 1;
        max-width: 475px;
        margin: 24px 0 0;
        color: var(--pc-cinza-300);
        font-family: var(--pc-fonte-corpo);
        font-size: 16px;
        line-height: 1.5;
    }

    /* Pedido do cliente 28/08 (diverge do Figma de propósito — NÃO "corrigir de
       volta"): as tiras de serviços e favoritos deixaram de sangrar até a borda
       da viewport e ganharam a MESMA contenção da tira de categorias abaixo —
       contidas nos 1196px do conteúdo, centralizadas pelo trilho (fit-content +
       margin auto, nunca justify-content: ver o comentário de .pc-cat-cards). */
    .pc-carrossel {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        padding-inline: 0;
        scroll-padding-inline: 0;
    }

    /* Pedido do cliente 27/08 (diverge do Figma de propósito — NÃO "corrigir de
       volta"): a tira de categorias deixa de sangrar e fica CONTIDA nos mesmos
       1196px do conteúdo, alinhada ao cabeçalho "Categorias" (x=122). Os cards
       ficam centralizados dentro da faixa, mas a tira continua um contêiner que
       rola (14 categorias não cabem) — por isso a centralização é
       margin-inline:auto + width:fit-content no TRILHO, não justify-content nos
       itens: justify-content:center num flex com overflow corta o início do
       conteúdo ao rolar em alguns navegadores (o primeiro card ficaria
       inacessível). Com fit-content o trilho só fica maior que 1196px quando o
       conteúdo excede (aí vira scroll normal, começando do primeiro card). */
    .pc-cat-cards {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        padding-inline: 0;
        scroll-padding-inline: 0;
    }

    /* Pedido do cliente 27/08 (diverge do Figma de propósito): card de
       categoria 25% menor no desktop, 176x220 -> 132x165 — exatamente -25%,
       preservando a razão 4:5 do Figma (aspect-ratio 72/90 em
       pc-components.css cuida da altura sozinho a partir da largura).
       --pc-dobra e o padding/gap internos do card derivam de
       --pc-cat-largura (pc-components.css) e encolhem junto. Label não coube
       mais em 13px ("Profissionais" quebrava a palavra): reduzido ao piso
       legível do projeto, 10px — nunca escalar por razão (memória do
       projeto), e nunca abaixo de 10px. */
    .pc-cat-cards {
        --pc-cat-largura: 132px;
        gap: 20px;
    }

    .pc-cat-card__label {
        font-size: 10px;
    }

    /* Setas ‹ › do Figma 124979:4234 (100x48: dois círculos de 40 com gap 20). */
    .pc-carrossel-setas {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-left: auto;
    }

    .pc-carrossel-seta {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--pc-grafite);
        color: var(--pc-branco);
        cursor: pointer;
    }

    .pc-carrossel-seta svg {
        width: 18px;
        height: 18px;
    }

    .pc-carrossel-seta:hover {
        background: var(--pc-amarelo);
    }

    /* O "Ver Todos" fica à direita do cabeçalho; com as setas no mesmo
       cabeçalho o `margin-left: auto` delas empurraria o botão para longe. */
    .pc-home__secao-cabecalho .pc-carrossel-setas + .pc-home__ver-mais {
        margin-left: 20px;
    }

    /* Figma 124979:4381 — "Ver Todos" é botão pill amarelo de 168x48, não mais
       o link sublinhado do mobile. As classes de botão vêm do PHP; aqui a
       largura do Figma e a desmontagem do que sobrou do link: a cor amarela de
       .pc-home__ver-mais (pc-publicas.css:124) deixava o texto invisível sobre
       o pill amarelo, e o sublinhado não existe no botão do Figma. */
    .pc-home__secao-cabecalho .pc-home__ver-mais {
        width: 168px;
        min-height: 48px;
        color: var(--pc-branco);
        font-family: var(--pc-fonte-corpo);
        /* Figma 124979:4314: Poppins Regular 16. */
        font-weight: 400;
        font-size: 16px;
        text-decoration: none;
    }

    /* Figma H2 desktop (124979:4106/4303): Syne Medium 36/34, tracking -1,
       nos títulos de seção da home. */
    .pc-home__secao-cabecalho h2,
    .pc-home__secao > h2 {
        font-weight: 500;
        font-size: 36px;
        line-height: 34px;
        letter-spacing: -1px;
    }

    /* Enquanto o mouse arrasta o trilho, o cursor vira "agarrado" e a seleção
       de texto não dispara. */
    [data-pc-rolagem] {
        cursor: grab;
    }

    [data-pc-rolagem].is-arrastando {
        cursor: grabbing;
        user-select: none;
        scroll-snap-type: none;
    }

    /* ---------------------------------------------------------------- */
    /* CTA escuro — Figma 1196x420 (fig-cta.png)                        */
    /* ---------------------------------------------------------------- */
    /* O mobile é um bloco de 335x221 com a foto em `cover` por baixo de um
       degradê. O desktop do Figma é outra composição: caixa de 420 de altura,
       o mesmo padrão de "P" do hero no fundo e um RECORTE PNG ancorado à
       direita — a mesma técnica do hero, não `cover`. */
    .pc-home__cta {
        display: flex;
        align-items: center;
        height: 420px;
        /* Figma: conteúdo em x=221 num CTA que começa em x=122 => 99. */
        padding: 0 0 0 99px;
    }

    /* A foto do mobile (home-cta.jpg, retangular com fundo) sai; entra o recorte
       do Figma. Duas <img> com visibilidade por media query pelo mesmo motivo do
       hero: a geometria depende de `object-fit: contain` sobre a razão natural do
       arquivo, e assim o nó do mobile não herda nada desta camada. */
    .pc-home__cta .pc-home__cta-foto:not(.pc-home__cta-foto--desktop) {
        display: none;
    }

    /* Figma 124979:4539 — a mulher encosta na borda de BAIXO do card, cortada
       na altura do ombro. O ajuste anterior deixava a foto flutuando: com
       `top` + `height: 98.6%` sobrava ~5px de grafite embaixo (medido em
       runtime), e era essa fresta que aparecia como uma faixa escura sob ela.

       Ancorar por `bottom: 0` em vez de `top` faz a base ser o lado fixo, que é
       o que o Figma mostra. A altura passa de 98.6% para 100%: o recorte é uma
       silhueta que já vai até a última linha do arquivo (o perfil de alpha do
       PNG mostra pixel opaco em y=559 de 560), então não há transparência de
       sobra para compensar.

       O arquivo está ESPELHADO em relação ao Figma: no asset o coque fica em
       cima à esquerda e o telefone no ouvido do lado esquerdo; no Figma é o
       contrário. Daí o scaleX(-1). */
    .pc-home__cta .pc-home__cta-foto--desktop {
        position: absolute;
        top: auto;
        right: 4.85%;
        bottom: 0;
        left: auto;
        height: 100%;
        width: auto;
        max-width: none;
        object-fit: contain;
        object-position: right bottom;
        transform: scaleX(-1);
    }

    /* Padrão de logos "P" — o mesmo asset do hero, em cinza neutro (o arquivo
       vem amarelo cheio, o grayscale o neutraliza).

       No hero o padrão é uma <img> dimensionada porque só ocupa a metade
       direita. Aqui não serve: no Figma ele cobre os 1196x420 de ponta a ponta,
       e o arquivo tem 919x747 — dimensionar a <img> obriga a escolher entre o
       passo certo (990 de largura, que deixa 200px sem padrão) e a cobertura
       (que estica o passo para 130+). Repetindo como background os dois saem
       certos ao mesmo tempo.

       Números medidos por autocorrelação 2D, não estimados:

         vetor de repetição — no render do Figma (124979:4539) o motivo se repete
                             a cada (110, 29) px: passo de 110 na horizontal com
                             a inclinação do padrão. No arquivo cru o mesmo
                             vetor é (160, 42) — mesma razão 42/160 = 29/110,
                             confirmando que é o mesmo motivo, só que maior.
                             Logo background-size = 919 x 110/160 = 632 de
                             largura, e 514 de altura pela razão do arquivo.
                             Conferido: renderizado a 632x514 o vetor medido
                             volta exatamente (110, 29).

                             O valor antigo (1328) vinha de uma medição do passo
                             dentro do arquivo que pegou uma harmônica (34px em
                             vez de 160), e ampliava o padrão 2.1x. Era isso que
                             deixava os "P" grandes e sobrepostos — o padrão
                             embolado; não era emenda de ladrilho.
         amplitude de luz  — numa faixa livre de texto (x 490-660) o Figma dá
                             11/9/7/6/4/2 de cima para baixo: o padrão é quase
                             imperceptível E some para baixo. Daí a máscara
                             vertical; e opacity .17 porque com .22 o perfil
                             media 13/12/10/9/7/6, uns 2-3 acima do Figma. */
    .pc-home__cta .pc-home__cta-padrao {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        /* A <img> vira só o palco: o pixel dela sai e o padrão entra repetido.

           `object-fit: none` NÃO apaga o pixel da <img> — ele desenha o arquivo
           no tamanho natural, recortado pela caixa. O resultado era o padrão
           DUPLICADO: o ladrilho certo (632px, passo 110) vindo do background e,
           por cima, o arquivo cru (passo 160) vindo da própria <img>. Como as
           duas camadas têm o mesmo motivo em escalas diferentes, o que se via
           era um emaranhado de "P" miúdos — exatamente o defeito relatado.

           `object-position` fora da caixa é o que realmente tira o pixel da
           <img> sem colapsar o elemento (que precisa continuar existindo para
           hospedar o background). */
        object-fit: none;
        object-position: -9999px -9999px;
        background-image: url('../img/home-hero-padrao.png');
        background-repeat: repeat;
        background-size: 632px 514px;
        background-position: left top;
        opacity: 0.17;
        filter: grayscale(1) brightness(1.6);
        mix-blend-mode: soft-light;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.35) 100%);
        mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.35) 100%);
        pointer-events: none;
    }

    /* Sem o degradê do mobile: o fundo do Figma é o grafite chapado, e o
       degradê de 100deg apagaria o padrão e escureceria a foto. */
    .pc-home__cta::after {
        content: none;
    }

    /* Figma: título 470x57, parágrafo 470x48, botão 263x48 — coluna à esquerda
       com a foto ocupando a direita. */
    .pc-home__cta-conteudo {
        position: relative;
        z-index: 1;
        align-items: flex-start;
        gap: 24px;
        width: 470px;
        max-width: 470px;
    }

    .pc-home__cta h2,
    .pc-home__cta p {
        max-width: none;
    }

    /* Figma H2 desktop (124979:4541): Syne Medium 36/34, tracking -1 —
       o mesmo estilo dos títulos de seção. */
    .pc-home__cta h2 {
        font-weight: 500;
        font-size: 36px;
        line-height: 34px;
        letter-spacing: -1px;
    }

    .pc-home__cta p {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Figma: todo botao tem 48px de altura e largura pelo CONTEUDO — nunca
       100%. pc-publicas.css:223-225 estica "Saiba Como Funciona" a largura
       inteira do CTA (herdado do empilhamento mobile); aqui ele volta a
       encolher para o texto, como "Ver Todos"/"Vire um Profissional!". */
    .pc-home__cta .pc-botao {
        width: auto;
        min-height: 48px;
        padding-inline: 44px;
        font-size: 16px;
    }

    /* Figma 124979:4381 — card 332x456, miolo 288 (padding 22), capa 288x120,
       titulo e CTA 288x48 cada. O card mobile e compacto (188px de largura,
       CTA de 28px); nesta largura desktop ele precisa respirar mais. Topo
       46, capa 120, corpo 133, cta 48 = 347 + padding 44 + 3 gaps de 21 +
       1 de borda = 456. */
    .pc-card-servico {
        padding: 22px;
        gap: 21px;
        /* Figma 124979:4381: raio 28.936. */
        border-radius: 28px;
    }

    .pc-card-servico__topo {
        min-height: 46px;
    }

    .pc-card-servico__capa {
        aspect-ratio: auto;
        height: 120px;
        /* Figma 124979:4395: raio 20 (o mobile usa --pc-radius-capa = 12). */
        border-radius: 20px;
    }

    /* Figma 124979:4396: no card do carrossel a nota fica à ESQUERDA e o
       "Responde em Xh" à DIREITA, na mesma linha; o chip de categoria desce
       da capa para uma linha própria abaixo. Grid em vez do empilhamento:
       titulo (linha 1, inteira), rodapé+resposta (linha 2), chip (linha 3). */
    .pc-card-servico--vertical .pc-card-servico__corpo {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        align-content: center;
        row-gap: 14px;
        column-gap: 8px;
        min-height: 133px;
    }

    .pc-card-servico--vertical .pc-card-servico__corpo > .pc-card-servico__titulo {
        grid-column: 1 / -1;
    }

    .pc-card-servico--vertical .pc-card-servico__corpo > .pc-card-servico__resposta {
        justify-self: end;
    }

    /* Chip do Figma (124979:4408): fundo amarelo a 12%, Poppins Bold 12,
       18x7 de respiro. O da capa some — no desktop ele vive no corpo. */
    .pc-card-servico--vertical .pc-card-servico__capa .pc-card-servico__categoria {
        display: none;
    }

    .pc-card-servico--vertical .pc-card-servico__categoria--corpo {
        grid-column: 1 / -1;
        justify-self: start;
        position: static;
        max-width: 100%;
        background: rgba(252, 189, 11, 0.12);
        color: var(--pc-amarelo);
        font-size: 12px;
        line-height: 1.5;
        padding: 7px 18px;
    }

    .pc-card-servico__titulo {
        font-size: 16px;
        line-height: 1.5;
        height: calc(16px * 1.5 * 2);
    }

    .pc-card-servico .pc-card-servico__cta {
        height: 48px;
        /* Figma 124979:4415: Poppins Regular 16. */
        font-size: 16px;
    }

    /* Figma 124979:3891 — pill 1000x72, miolo 948x48 (padding 40/12), sobreposto
       a parte de baixo do hero. Escopado a .pc-home__busca para nao afetar a
       mesma .pc-busca reusada em pc-busca-tela__barra (tela de resultados),
       que continua empilhada. */
    .pc-home__busca {
        width: min(1000px, 100%);
        height: 72px;
        /* Figma: a pill (y=495..567) termina 49px acima da base do hero
           (616) => sobe 72 + 49 = 121. */
        margin: -121px auto 32px;
        /* 1000 - 2x0.5 de borda - 2x25.5 = 948, o miolo do Figma. */
        padding: 12px 25.5px;
        display: flex;
        align-items: center;
        border-radius: var(--pc-radius-pill);
    }

    .pc-home__busca .pc-busca {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        width: 100%;
        height: 48px;
    }

    .pc-home__busca .pc-busca__campo {
        flex: 1 1 0;
        border: none;
        border-radius: 0;
        padding: 0 20px;
    }

    .pc-home__busca .pc-busca__campo:focus-within {
        box-shadow: none;
    }

    /* Divisor de 28px centrado entre os campos (Figma 124979:3965), não a
       régua inteira dos 48. */
    .pc-home__busca .pc-busca__campo + .pc-busca__campo {
        position: relative;
    }

    .pc-home__busca .pc-busca__campo + .pc-busca__campo::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 28px;
        background: var(--pc-cinza-100);
    }

    /* Figma 124979:3941: "Buscar" em Syne Medium 20, tracking 1, respiro 44 —
       largura pelo conteúdo. */
    .pc-home__busca .pc-busca__submit {
        flex: 0 0 auto;
        width: auto;
        min-height: 48px;
        padding-inline: 44px;
        font-family: var(--pc-fonte-titulo);
        font-weight: 500;
        font-size: 20px;
        letter-spacing: 1px;
    }

    /* ---------------------------------------------------------------- */
    /* Ritmo vertical — Figma 124979:2391                                */
    /* ---------------------------------------------------------------- */
    /* Coordenadas absolutas do frame, de onde sai cada gap desta seção:
         hero    20→616 | cabec Categorias 696→744 | tira 804→1024
         cabec Serviços 1144→1192 | tira 1251→1707 | CTA 1814→2234
         cabec Serviços2 2354→2402 | tira2 2461→2917
         footer 3038→3232 | créditos 3252→3267
       Daí as cinco transições:
         hero → 1º cabeçalho   =  80  (696 − 616)
         cabeçalho → sua tira  =  60  (804 − 744 e 1251 − 1192)
         tira → cabeçalho      = 120  (1144 − 1024 e 2354 − 2234)
         tira → CTA            = 107  (1814 − 1707)
         tira → footer         = 121  (3038 − 2917)
         footer → créditos     =  20  (3252 − 3232)
       O mobile empilha tudo com 28/14; aqui cada distância vira explícita. */

    /* O divisor não existe no desktop do Figma: as seções são separadas por ar,
       não por linha. Sem zerar a borda e o padding de 24 eles entram somando em
       cima de cada gap medido abaixo. */
    .pc-home__secao--divisor {
        border-top: none;
        margin-inline: 0;
        padding: 0;
    }

    /* Gap "tira → próximo cabeçalho" = 120. Sai como margem inferior da seção
       porque o que vem depois é sempre um cabeçalho (de seção ou do CTA). */
    .pc-home__secao {
        position: relative;
        margin-bottom: 120px;
    }

    /* Antes do CTA o Figma abre só 107. */
    .pc-home__secao:has(+ .pc-home__cta) {
        margin-bottom: 107px;
    }

    /* Cabeçalho → sua tira = 60. Só o wrapper: o <h2> dentro dele é filho flex e
       a margem ali inflaria a ALTURA do cabeçalho (48 no Figma) em vez de abrir
       o vão até a tira. */
    .pc-home__secao-cabecalho {
        margin-bottom: 60px;
    }

    .pc-home__secao > h2 {
        margin-bottom: 60px;
    }

    /* Hero → 1º cabeçalho = 80 (696 − 616). A busca é sobreposta e termina
       49px acima da base do hero, então a margem dela é 49 + 80 = 129. */
    .pc-home__busca {
        margin-bottom: 129px;
    }

    /* CTA → próximo cabeçalho = 120 (2354 − 2234). */
    .pc-home__cta {
        margin-bottom: 120px;
    }

    /* Última tira → footer = 121. .pc-home tem padding-bottom 16 (pc-publicas.css:14)
       e o footer entra fora do <main>, então 121 = 16 + 105. */
    .pc-footer {
        margin-top: 105px;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    /* Tablet mantém a barra, mas com teto: `flex: 1 1 0` sem limite estica
       cada item até ~178px. */
    .pc-bottom-nav {
        max-width: 420px;
    }
}

/* Única exceção do arquivo: o markup desktop sai no HTML em toda tela e
   precisa ficar oculto abaixo de 1024px. É `display:none` num elemento que
   não existia antes — não altera nenhum comportamento mobile. */
@media (max-width: 1023.98px) {
    .pc-header__desktop {
        display: none;
    }

    .pc-footer {
        display: none;
    }

    /* Tudo o que o hero desktop introduziu é calibrado para a caixa 1400x596
       do bloco de 1024px. Abaixo disso o hero ainda é o 335/224 do mobile —
       uma linha flex com o <h1> sozinho — e nada disso serve: a foto e o
       padrão saem de escala e o subtítulo cai AO LADO do título, sobre a foto.
       Os três só aparecem a partir de 1024px, junto da geometria que os
       enquadra. */
    .pc-home__hero-padrao,
    .pc-home__hero-foto--desktop,
    .pc-home__hero-subtitulo,
    .pc-home__cta-padrao,
    .pc-home__cta-foto--desktop,
    .pc-card-servico__categoria--corpo {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* Neutralização do markup novo abaixo de 768px                        */
/* ------------------------------------------------------------------ */
/* O cliente pediu mudanças de PHP que valem só no desktop, mas o markup sai
   no HTML em toda largura. Aqui elas somem no mobile, que tem de continuar
   pixel-idêntico ao baseline. Só neutraliza markup introduzido nesta task —
   nada de comportamento mobile pré-existente é tocado. */
@media (max-width: 767.98px) {
    .pc-home__hero-padrao,
    .pc-home__hero-foto--desktop,
    .pc-home__hero-subtitulo,
    .pc-home__cta-padrao,
    .pc-home__cta-foto--desktop,
    .pc-carrossel-setas {
        display: none;
    }

    /* Categorias ganhou um wrapper .pc-home__secao-cabecalho para hospedar as
       setas; antes o <h2> era filho direto da seção. Com as setas ocultas o
       wrapper vira um bloco transparente, e o <h2> recupera a margem que tinha
       como filho direto — mesmo espaçamento de antes, sem contexto flex novo. */
    .pc-home__secao-cabecalho--setas {
        display: block;
        margin-bottom: 0;
    }

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

    /* "Ver Mais" virou "Ver Todos" com as classes de botão pill (Figma
       124979:4381). No mobile ele volta a ser o link sublinhado amarelo do
       Figma mobile 124814:737 — as declarações abaixo desfazem, uma a uma,
       o que .pc-botao/.pc-btn-pill/.pc-botao--primario aplicam. */
    .pc-home__secao-cabecalho .pc-home__ver-mais {
        display: inline;
        width: auto;
        min-width: 0;
        height: auto;
        min-height: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: var(--pc-amarelo);
        font-family: var(--pc-fonte-corpo);
        font-weight: 400;
        font-size: 11px;
        line-height: inherit;
        text-decoration: underline;
    }
}

/* ------------------------------------------------------------------ */
/* Telas públicas — derivadas da linguagem da home (sem frame próprio) */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
    /* Formulário esticado é ilegível: a largura da linha é o limite, não o
       contêiner. Classe triplicada (padrão do projeto, cf. .pc-drawer--folha):
       o <main> é um .pc-container dentro do widget do Elementor e a
       neutralização `.elementor .elementor-widget-shortcode .pc-container`
       (pc-tokens, 3 classes) impõe max-width:100% — 3 classes aqui empatam e
       a ordem de carga decide. 524 - 2x respiro ≈ 460 de miolo. */
    .pc-login.pc-login.pc-login,
    .pc-cadastro.pc-cadastro.pc-cadastro,
    .pc-recuperar-senha.pc-recuperar-senha.pc-recuperar-senha,
    .pc-redefinir-senha.pc-redefinir-senha.pc-redefinir-senha {
        max-width: 524px;
        margin-inline: auto;
    }
}

@media (min-width: 1024px) {
    /* No mobile a grade usa os 89% do card (razao do shell); aqui o card e muito
       mais largo e essa razao espalharia os 14 chips numa faixa unica. */
    .pc-busca-tela__topo .pc-chips {
        max-width: 63%;
    }

    /* Busca: a barra vira a mesma pill horizontal da home (1000x72). */
    .pc-busca-tela__barra {
        width: min(1000px, 100%);
        height: 72px;
        margin-inline: auto;
        padding: 12px 25.5px;
        display: flex;
        align-items: center;
        background: var(--pc-branco);
        border: 0.5px solid var(--pc-cinza-100);
        border-radius: var(--pc-radius-pill);
    }

    .pc-busca-tela__barra .pc-busca {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        width: 100%;
        height: 48px;
    }

    .pc-busca-tela__barra .pc-busca__campo {
        flex: 1 1 0;
        border: none;
        border-radius: 0;
        padding: 0 20px;
    }

    .pc-busca-tela__barra .pc-busca__campo:focus-within {
        box-shadow: none;
    }

    .pc-busca-tela__barra .pc-busca__campo + .pc-busca__campo {
        position: relative;
    }

    .pc-busca-tela__barra .pc-busca__campo + .pc-busca__campo::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 28px;
        background: var(--pc-cinza-100);
    }

    .pc-busca-tela__barra .pc-busca__submit {
        flex: 0 0 auto;
        width: auto;
        min-height: 48px;
        padding-inline: 44px;
        font-family: var(--pc-fonte-titulo);
        font-weight: 500;
        font-size: 20px;
        letter-spacing: 1px;
    }

    /* Resultados deixam a coluna única e viram grade. */
    .pc-busca-tela__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
        gap: 24px;
        align-items: start;
    }

    /* A variante horizontal (capa em coluna de 36%) foi desenhada para a
       coluna estreita do mobile; numa célula de grade ela espreme tudo.
       Volta ao empilhamento do card vertical da home. */
    .pc-card-servico--busca {
        grid-template-columns: 1fr;
        grid-template-areas:
            'topo'
            'capa'
            'corpo'
            'cta';
        grid-template-rows: auto auto 1fr auto;
        gap: 16px 0;
        padding: 22px;
        border-radius: 28px;
    }

    .pc-card-servico--busca .pc-card-servico__capa {
        position: relative;
        align-self: auto;
        margin: 0;
        height: 120px;
        border-radius: 20px;
    }

    /* O selo Pro mora DENTRO da capa nesta variante: com a capa como âncora,
       o 16/16 volta a cair sobre a foto. */
    .pc-card-servico--busca .pc-card-servico__badge-pro {
        top: 12px;
        left: 12px;
    }

    .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: 0;
    }

    /* Ficha do serviço: 2 colunas — galeria à esquerda (sticky, abaixo do
       header), conteúdo à direita. A galeria perde o full-bleed do mobile
       (margem negativa) e ganha canto. touch-action/gesto NÃO são tocados.
       padding-top: no mobile a tela nasce com 0 (galeria full-bleed colada no
       header); aqui abre os mesmos 20px das outras telas (= o vão do sticky
       top:120 da galeria), senão o 1º bloco cola no pill do header. */
    .pc-servico {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 40px;
        align-items: start;
        padding-top: 20px;
    }

    .pc-servico > * {
        grid-column: 2;
    }

    /* Sem sticky: o alcance do sticky de item de grid é o CONTAINER inteiro
       (não a célula) e, com Profissional/Avaliações em largura total dentro
       do mesmo grid, a galeria deslizava por cima deles ao rolar. Com os
       painéis abertos a coluna de detalhes tem ~a altura da galeria e o
       sticky não fazia mais nada de útil. */
    .pc-servico .pc-servico__galeria {
        grid-column: 1;
        grid-row: 1 / span 40;
        margin: 0;
        border-radius: 24px;
        /* A tira de miniaturas é irmã no grid e precisa encostar na foto. Com a
           galeria esticada pelo span, alinhá-la ao topo da própria célula deixa
           a tira logo abaixo em vez de no fim da coluna. */
        align-self: start;
    }

    /* Miniaturas substituem os dots no desktop (pedido do cliente 01/09).
       A galeria tem overflow:hidden (recorta o slide), então a tira NÃO pode
       viver dentro dela — o SSR a emite como irmã e ela ocupa a linha seguinte
       da coluna 1, logo abaixo da foto. */
    .pc-servico .pc-servico__galeria-dots {
        display: none;
    }

    /* Mesma célula da galeria: a tira desce sozinha o quanto a foto ocupa
       (padding-top = altura da galeria via aspect-ratio 4/3 da coluna). */
    .pc-servico .pc-servico__miniaturas {
        display: flex;
        grid-column: 1;
        grid-row: 1 / span 40;
        align-self: start;
        margin-top: calc((100% * 3 / 4) + 16px);
        gap: 16px;
    }

    .pc-servico .pc-servico__miniatura {
        width: 152px;
        height: 152px;
        padding: 0;
        border: 2px solid transparent;
        border-radius: 16px;
        overflow: hidden;
        background: var(--pc-cinza-100);
        cursor: pointer;
        transition: border-color .15s ease;
    }

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

    .pc-servico .pc-servico__miniatura.is-ativo {
        border-color: var(--pc-amarelo);
    }

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

    /* Pedido do cliente 28/08: no desktop a ficha deixa de ser abas — Detalhes
       fica à direita da galeria, Profissional desce em largura total e um
       traço separa as Avaliações (também em largura total). O mobile mantém
       as abas intactas. display:contents promove os painéis a itens do grid
       de .pc-servico; order:1 nos dois de largura total deixa o rodapé de
       ações (order 0, filho direto) subir para a coluna direita junto de
       Detalhes, apesar de vir depois no DOM. */
    .pc-servico .pc-tabs {
        display: contents;
    }

    .pc-servico .pc-tabs .pc-tabs__nav {
        display: none;
    }

    .pc-servico .pc-tabs .pc-tabs__painel {
        display: block;
        animation: none;
        grid-column: 2;
    }

    .pc-servico .pc-tabs [data-pc-tab-painel="profissional"],
    .pc-servico .pc-tabs [data-pc-tab-painel="avaliacoes"] {
        grid-column: 1 / -1;
        order: 1;
    }

    .pc-servico .pc-tabs [data-pc-tab-painel="profissional"] {
        margin-top: 64px;
    }

    .pc-servico .pc-tabs [data-pc-tab-painel="avaliacoes"] {
        border-top: 1px solid var(--pc-cinza-100);
        margin-top: 48px;
        padding-top: 48px;
    }

    /* O quadrado 1:1 da métrica é spec do mobile (card ~110px); na faixa de
       1196 cada card teria ~390px de altura vazia. Altura pelo conteúdo. */
    .pc-servico .pc-servico__metrica {
        aspect-ratio: auto;
        padding: 32px 8px;
    }

    .pc-servico .pc-servico__metricas {
        gap: 24px;
    }

    /* Na faixa de 1196 os 220px do mobile viram uma tira achatada (pedido do
       cliente 28/08: mapa mais alto no desktop). */
    .pc-servico .pc-servico__mapa-imagem {
        height: 400px;
    }

    /* Planos: os 2 cards lado a lado; qualquer filho que não seja card (título,
       avisos) atravessa as 2 colunas. */
    /* Classe triplicada pelo mesmo motivo do .pc-login (neutralização de
       3 classes do pc-tokens sobre o container aninhado). */
    .pc-planos.pc-planos.pc-planos {
        max-width: 824px;
        margin-inline: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        align-items: stretch;
    }

    .pc-planos > :not(.pc-plano-card) {
        grid-column: 1 / -1;
    }

    /* Como funciona: os passos 01-04 lado a lado (no mobile empilham com
       rotação; a rotação fica). */
    .pc-cf-passos {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
        align-items: start;
    }

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

    /* O hero das abas segue a razão 335/177 do mobile — em 1196 viraria um
       bloco de 632px com texto de 20/12 perdido no meio. Altura e tipografia
       do CTA da home (420, H2 36/34, corpo 16). */
    .pc-cf-hero {
        aspect-ratio: auto;
        height: 420px;
    }

    .pc-cf-hero__conteudo h1 {
        font-weight: 500;
        font-size: 36px;
        line-height: 34px;
        letter-spacing: -1px;
    }

    .pc-cf-hero__conteudo p {
        font-size: 16px;
        line-height: 1.5;
    }

    /* O CTA final idem: teto de 420 (o min-height de 768px já limita a 300) e
       texto na escala desktop; botão por conteúdo, nunca 100% (regra do
       Figma para botões). */
    .pc-cf-cta__conteudo h2 {
        font-weight: 500;
        font-size: 36px;
        line-height: 34px;
        letter-spacing: -1px;
    }

    .pc-cf-cta__conteudo p {
        font-size: 16px;
        line-height: 1.5;
    }

    .pc-cf-cta__conteudo .pc-botao {
        width: auto;
        padding-inline: 44px;
        font-size: 16px;
    }
}

/* ------------------------------------------------------------------ */
/* Telas privadas e do prestador — derivadas da linguagem da home      */
/* ------------------------------------------------------------------ */
/* Classes triplicadas onde o alvo é o próprio .pc-container aninhado
   (mesma disputa de 3 classes do pc-tokens explicada no .pc-login). */
@media (min-width: 768px) {
    /* Formulário longo esticado é ilegível: coluna centrada. */
    .pc-tela-solicitar.pc-tela-solicitar.pc-tela-solicitar,
    .pc-tela-informacoes-pessoais.pc-tela-informacoes-pessoais.pc-tela-informacoes-pessoais {
        max-width: 640px;
        margin-inline: auto;
    }

    .pc-tela-alterar-senha.pc-tela-alterar-senha.pc-tela-alterar-senha {
        max-width: 524px;
        margin-inline: auto;
    }

    /* Notificações leem como um feed: coluna centrada, não grade. A pilha
       mobile solta sobre o fundo cinza flutuava sem âncora no shell largo —
       aqui a lista vira cartão branco e cada item vira linha de inbox:
       título+texto à esquerda, tempo e ação à direita. */
    .pc-tela-notificacoes.pc-tela-notificacoes.pc-tela-notificacoes {
        max-width: 700px;
        margin-inline: auto;
    }

    .pc-notificacoes__lista {
        gap: 0;
        background: var(--pc-branco);
        border-radius: var(--pc-radius-card);
        box-shadow: var(--pc-sombra-card);
        padding: 8px 0;
    }

    .pc-notificacoes__lista .pc-notificacao {
        padding: 20px 28px;
        transition: background-color 0.15s ease;
    }

    .pc-notificacoes__lista .pc-notificacao:hover {
        background: var(--pc-cinza-claro);
    }

    /* A borda de referência do separador passa a ser o cartão, não o shell. */
    .pc-notificacoes__lista .pc-notificacao + .pc-notificacao::before {
        inset-inline: 28px;
        top: 0;
    }

    .pc-notificacao__corpo {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 32px;
        row-gap: 8px;
        align-items: center;
    }

    .pc-notificacao__titulo {
        grid-column: 1;
        grid-row: 1;
        font-size: 16px;
    }

    .pc-notificacao__titulo + .pc-notificacao__texto {
        margin-top: 0;
    }

    .pc-notificacao__texto {
        grid-column: 1;
        grid-row: 2;
        font-size: 14px;
    }

    .pc-notificacoes__lista .pc-botao.pc-notificacao__acao {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }

    .pc-notificacao__tempo {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        font-size: 11px;
        white-space: nowrap;
    }

    /* Dot centrado no cap da 1ª linha do título de 16px (16 × 1.5 = 24). */
    .pc-notificacao__marcador {
        margin-top: 8px;
    }

    .pc-notificacoes__lista .pc-vazio {
        padding: 48px 28px;
    }
}

@media (min-width: 1024px) {
    /* Perfil é uma lista de atalhos, não formulário: 2 colunas. */
    .pc-tela-perfil.pc-tela-perfil.pc-tela-perfil {
        max-width: 824px;
        margin-inline: auto;
    }

    /* Desktop não tem tela de notificações: o sino do header abre o painel
       lateral (.pc-drawer--notificacoes) e o JS redireciona quem chega pela
       URL — o display:none evita o flash da tela antes do redirect. */
    .pc-tela-notificacoes.pc-tela-notificacoes.pc-tela-notificacoes {
        display: none;
    }

    .pc-perfil__menu {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 24px;
        align-items: start;
    }

    /* Informações pessoais: a coluna de 640 empilha 8 campos curtos; em 1024+
       a tela alarga para 824 e os campos andam em pares (dados e localização
       são grades independentes — o título de seção fica entre elas). O
       margin-bottom de 16px do .pc-campo segue sendo o espaço entre linhas,
       por isso só column-gap. */
    .pc-tela-informacoes-pessoais.pc-tela-informacoes-pessoais.pc-tela-informacoes-pessoais {
        max-width: 824px;
    }

    #pc-form-info-pessoais,
    .pc-tela-informacoes-pessoais .pc-localizacao {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
        align-items: start;
    }

    /* O spinner do CEP ancora no canto direito do .pc-localizacao; com duas
       colunas esse canto é o select de Estado. Reancora no fim da coluna do
       CEP (metade menos o gap/2, mais os 16px para dentro do input). */
    .pc-tela-informacoes-pessoais .pc-localizacao.is-carregando::after {
        right: calc(50% + 28px);
    }

    /* Padrão de rodapé das telas abertas pelo menu do perfil: um par de botões
       fica lado a lado, meio a meio, cada um na largura inteira da sua coluna
       (é o caso de Salvar/Sair em Informações Pessoais). Um botão sozinho ocupa
       a linha toda, porque a grade só cria a segunda coluna quando há o segundo
       filho. Vale para qualquer tela filha nova: usar .pc-acoes-par no
       container do rodapé em vez de escrever CSS novo. */
    .pc-acoes-par,
    .pc-info-pessoais__acoes {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        column-gap: 24px;
    }

    /* Favoritos: o repeat(2, 1fr) fixo do mobile não ganha colunas em tela
       larga. */
    .pc-favoritos__grid {
        grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
        gap: 24px;
        align-items: start;
    }

    /* Históricos e avaliações: cards lado a lado. */
    .pc-historico__itens {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 16px;
    }

    /* Cards da mesma linha terminam na mesma altura, independente de quantos
       botões cada um tem (o card "aceita" ganha "Ver avaliação" e é o mais
       alto). Sem isso o grid dá a cada card a altura do próprio conteúdo e a
       linha fica serrilhada.

       A altura precisa descer a cadeia inteira — grid > card > painel > corpo —
       senão a casca estica e o conteúdo fica boiando no meio: só o `corpo` que
       cresce é que empurra as ações para o rodapé, deixando a folga acima
       delas. É stretch por linha, não altura fixa em px: cada linha se acerta
       pelo card mais alto dela. */
    .pc-historico__itens > .pc-historico-item {
        align-items: stretch;
    }

    .pc-historico__itens .pc-historico-item__painel {
        height: 100%;
    }

    .pc-historico__itens .pc-historico-item__corpo {
        flex: 1;
    }

    /* Empurra o rodapé de botões para baixo, absorvendo a folga do card curto. */
    .pc-historico__itens .pc-hist-acoes {
        margin-top: auto;
    }

    .pc-avaliacoes__painel.is-ativo {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: 16px;
        align-items: start;
    }

    /* Prestador: divulgar com os passos lado a lado; perfil profissional e
       meu plano em coluna de leitura. */
    .pc-divulgar__passos {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 24px;
        align-items: start;
    }

    .pc-meus-servicos.pc-meus-servicos.pc-meus-servicos,
    .pc-meu-plano.pc-meu-plano.pc-meu-plano {
        max-width: 824px;
        margin-inline: auto;
    }
}

/* ------------------------------------------------------------------ */
/* Gavetas viram modais centrados                                     */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
    /* O modal plano herda width: var(--pc-largura-conteudo) da base — que no
       desktop vale até 1196px e vira uma faixa de parede a parede (visto no
       painel de localização). Diálogo centrado tem teto por conteúdo; os
       overrides por id (solicitação 720 etc.) continuam vencendo. */
    .pc-modal__conteudo {
        width: min(560px, 92vw);
    }

    .pc-modal--confirmar .pc-modal__conteudo {
        width: min(420px, 92vw);
    }

    /* O painel já É um .pc-modal__conteudo — o drawer só trocava a caixa
       central por um painel colado na borda. Aqui a troca é desfeita e o
       modal centrado volta a valer. */
    .pc-drawer .pc-drawer__painel {
        inset: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.98);
        width: min(560px, 92vw);
        height: auto;
        max-height: 85vh;
        border-radius: var(--pc-radius-card);
        opacity: 0;
        /* Fade + scale em 180ms é vocabulário de diálogo centrado; o slide de
           300ms é de gaveta. */
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .pc-drawer.is-aberto.is-animando .pc-drawer__painel {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* A variante esquerda também deixa de deslizar. */
    .pc-drawer--esquerda:not(.is-animando) .pc-drawer__painel {
        transform: translate(-50%, -50%) scale(0.98);
    }
}

@media (min-width: 768px) {
    .pc-drawer--folha.pc-drawer--folha .pc-drawer__painel {
        top: 50%;
        bottom: auto;
        max-height: 85vh;
        transform: translate(-50%, -50%) scale(0.98);
        border-radius: var(--pc-radius-card);
        padding-bottom: 0;
    }

    .pc-drawer--folha.pc-drawer--folha.is-aberto.is-animando .pc-drawer__painel {
        transform: translate(-50%, -50%) scale(1);
    }

    /* O X volta: sem o gesto de arraste, a folha ficaria sem afordância de
       fechar visível. */
    .pc-drawer--folha.pc-drawer--folha .pc-drawer__fechar {
        display: flex;
    }

    /* Puxador e cursor de arraste saem: no mouse não há gesto. O handler em
       pc-ui.js:225 continua registrado e fica inerte — só dispara em
       pointerdown sobre o cabeçalho da folha. */
    .pc-drawer--folha.pc-drawer--folha .pc-drawer__cabecalho {
        padding-top: 20px;
        touch-action: auto;
        cursor: default;
    }

    .pc-drawer--folha.pc-drawer--folha .pc-drawer__cabecalho::before {
        content: none;
    }
}

@media (min-width: 1024px) {
    /* Ficha de 7 seções: o motivo original de virar gaveta era não caber
       centrada em 375px. Em 1024+ cabe. */
    #pc-modal-solicitacao .pc-drawer__painel {
        width: min(720px, 92vw);
    }

    #pc-drawer-avaliar .pc-drawer__painel,
    #pc-drawer-aval-editar .pc-drawer__painel,
    #pc-drawer-denunciar .pc-drawer__painel,
    #pc-drawer-aval-denunciar .pc-drawer__painel,
    #pc-drawer-origem-foto .pc-drawer__painel,
    #pc-drawer-origem-foto-servico .pc-drawer__painel {
        width: min(480px, 92vw);
    }

    #pc-drawer-camera .pc-drawer__painel {
        width: min(560px, 92vw);
    }

    #pc-drawer-calendario .pc-drawer__painel {
        width: auto;
        min-width: 360px;
    }
}

/* ------------------------------------------------------------------ */
/* Telas de acesso — split de tela cheia (entrar/cadastro/recuperar).  */
/* Painel de marca escuro à esquerda + card do formulário à direita.   */
/* ------------------------------------------------------------------ */
@media (min-width: 1024px) {
    /* Tela cheia: o shell do tema sai de cena; o split É a página. */
    body.pc-tela-acesso .pc-header,
    body.pc-tela-acesso .pc-footer {
        display: none;
    }

    /* O <main> do tema vira full-bleed para o split ocupar a viewport. */
    body.pc-tela-acesso > main.pc-container {
        width: 100%;
        max-width: none;
        padding-inline: 0;
    }

    body.pc-tela-acesso .pc-acesso {
        display: grid;
        grid-template-columns: minmax(440px, 1.05fr) minmax(0, 1fr);
        min-height: 100dvh;
    }

    /* Sticky: no cadastro (form longo) o painel fica parado enquanto o
       formulário rola. */
    body.pc-tela-acesso .pc-acesso__painel {
        display: flex;
        flex-direction: column;
        gap: 48px;
        padding: 40px 56px 32px;
        background:
            radial-gradient(120% 80% at 90% 0%, var(--pc-amarelo-12), transparent 55%),
            linear-gradient(160deg, #242424 0%, var(--pc-cinza-900) 55%, #0E0E0E 100%);
        color: var(--pc-branco);
        position: sticky;
        top: 0;
        height: 100dvh;
        align-self: start;
    }

    .pc-acesso__logo {
        display: inline-flex;
        width: fit-content;
    }

    .pc-acesso__logo img {
        width: 128px;
        height: auto;
    }

    .pc-acesso__hero {
        margin-block: auto;
        max-width: 440px;
    }

    .pc-acesso__badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        border: 1px solid var(--pc-branco-24);
        border-radius: var(--pc-radius-pill);
        background: rgba(255, 255, 255, 0.06);
        font-size: 12px;
        font-weight: 500;
        color: var(--pc-cinza-100);
    }

    .pc-acesso__badge::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--pc-amarelo);
    }

    .pc-acesso__titulo {
        margin: 20px 0 0;
        font-size: 44px;
        line-height: 1.15;
        color: var(--pc-branco);
    }

    .pc-acesso__texto {
        margin: 16px 0 0;
        max-width: 400px;
        font-size: 15px;
        line-height: 1.7;
        color: var(--pc-cinza-300);
    }

    .pc-acesso__rotulo {
        margin: 40px 0 0;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--pc-cinza-500);
    }

    .pc-acesso__chips {
        list-style: none;
        margin: 12px 0 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .pc-acesso__chip {
        padding: 8px 16px;
        border: 1px solid var(--pc-branco-24);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.06);
        font-size: 13px;
        color: var(--pc-cinza-100);
    }

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

    /* Um ponto mais escuro que o cinza-claro do body: com o fundo quase branco
       o recorte do dog-ear não aparecia e a dobra parecia solta do card. */
    body.pc-tela-acesso .pc-acesso__conteudo {
        display: flex;
        padding: 48px 40px;
        background: var(--pc-cinza-100-60);
    }

    /* O <main> da tela vira o card branco em formato de "página" — mesmo
       dog-ear do .pc-cat-card (clip-path recorta o canto, a dobra preenche o
       vão via --pc-dobra-forma). Quádrupla para vencer a neutralização de 3
       classes do pc-tokens (padding-inline: 0) e o teto de 524px do bloco de
       768px acima. clip-path recorta box-shadow, então a sombra é drop-shadow,
       que acompanha a silhueta recortada — leve, senão vira um contorno cinza
       nas bordas de baixo. */
    .pc-acesso__conteudo > .pc-container.pc-container.pc-container {
        --pc-dobra: 48px;
        position: relative;
        margin: auto;
        width: min(524px, 100%);
        padding: 40px 44px 36px;
        background: var(--pc-branco);
        border-radius: var(--pc-radius-card);
        clip-path: polygon(
            0 0,
            calc(100% - var(--pc-dobra)) 0,
            100% var(--pc-dobra),
            100% 100%,
            0 100%
        );
        filter: drop-shadow(0 10px 24px rgba(26, 26, 26, 0.07));
    }

    .pc-acesso__conteudo > .pc-container.pc-container.pc-container::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: var(--pc-dobra);
        height: var(--pc-dobra);
        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;
    }

    /* No mobile o campo é pill branca sobre página cinza; dentro do card
       branco a relação inverte, senão o campo some. */
    .pc-acesso__conteudo .pc-campo__input,
    .pc-acesso__conteudo .pc-campo__select,
    .pc-acesso__conteudo .pc-campo__textarea {
        background-color: var(--pc-cinza-claro);
    }
}

/* ------------------------------------------------------------------ */
/* Solicitar serviço — wizard de etapas (só desktop)                   */
/* ------------------------------------------------------------------ */
/* O JS (pc-privadas.js initSolicitarEtapas) injeta stepper + Voltar/Avançar
   e marca as seções com data-pc-etapa; abaixo de 1024px nada disso aparece
   e o formulário segue página única, como no Figma. */

.pc-etapas-stepper,
.pc-etapas-nav {
    display: none;
}

@media (min-width: 1024px) {
    .pc-form-pagina-unica.pc-etapas .pc-passo {
        display: none;
    }

    .pc-etapas .pc-passo.pc-etapa--atual {
        display: block;
    }

    /* Enviar + disclaimer só na última etapa. */
    .pc-etapas:not(.pc-etapas--ultima) .pc-form-pagina-unica__acoes {
        display: none;
    }

    /* O selo 1-7 dos cards brigaria com o 1-3 do stepper; quem numera é ele. */
    .pc-etapas .pc-passo__numero {
        display: none;
    }

    .pc-etapas .pc-etapa--anim-dir {
        animation: pc-etapa-entra-dir 0.3s ease both;
    }

    .pc-etapas .pc-etapa--anim-esq {
        animation: pc-etapa-entra-esq 0.3s ease both;
    }

    .pc-etapas-stepper {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
    }

    .pc-etapas-stepper__item {
        display: flex;
        align-items: center;
        gap: 8px;
        background: none;
        border: none;
        padding: 0;
        font-family: var(--pc-fonte-corpo);
        font-size: 13px;
        color: var(--pc-cinza-500);
        cursor: default;
    }

    /* Traço conector entre as etapas. */
    .pc-etapas-stepper__item + .pc-etapas-stepper__item::before {
        content: "";
        width: 32px;
        height: 1px;
        background: var(--pc-cinza-100);
        margin-inline: 10px;
    }

    .pc-etapas-stepper__numero {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 13px;
        background: var(--pc-branco);
        border: 0.5px solid var(--pc-cinza-100);
        color: var(--pc-cinza-500);
    }

    .pc-etapas-stepper__item.is-atual,
    .pc-etapas-stepper__item.is-feita {
        color: var(--pc-grafite);
    }

    .pc-etapas-stepper__item.is-atual {
        font-weight: 500;
    }

    .pc-etapas-stepper__item.is-feita {
        cursor: pointer;
    }

    .pc-etapas-stepper__item.is-atual .pc-etapas-stepper__numero,
    .pc-etapas-stepper__item.is-feita .pc-etapas-stepper__numero {
        background: var(--pc-amarelo);
        border-color: var(--pc-amarelo);
        color: var(--pc-grafite);
    }

    .pc-etapas-nav {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-top: 4px;
    }

    .pc-etapas-nav .pc-botao {
        min-height: 40px;
        padding-inline: 40px;
        font-size: 12px;
    }

    /* Avançar sozinho (etapa 1, sem Voltar) fica na direita, o lado do gesto. */
    .pc-etapas-nav__avancar {
        margin-left: auto;
    }

    @keyframes pc-etapa-entra-dir {
        from {
            opacity: 0;
            transform: translateX(48px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes pc-etapa-entra-esq {
        from {
            opacity: 0;
            transform: translateX(-48px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
}

/* ------------------------------------------------------------------ */
/* Notificações — painel lateral direito (só desktop)                  */
/* ------------------------------------------------------------------ */
/* Única gaveta que CONTINUA gaveta no desktop: a regra geral acima
   (min-width: 768px) transforma .pc-drawer em modal centrado; aqui a
   troca é desfeita e o painel volta a colar na borda direita, altura
   cheia. Classe duplicada para vencer o empate de especificidade. */

@media (min-width: 1024px) {
    .pc-drawer--notificacoes.pc-drawer--notificacoes .pc-drawer__painel {
        inset: 0 0 0 auto;
        width: min(440px, 92vw);
        height: 100%;
        max-height: none;
        border-radius: 0;
        opacity: 1;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }

    .pc-drawer--notificacoes.pc-drawer--notificacoes.is-aberto.is-animando .pc-drawer__painel {
        transform: translateX(0);
    }

    /* O painel já é branco: a lista larga o figurino de cartão de inbox
       (min-width: 768px acima) e volta a ser pilha simples. */
    .pc-drawer--notificacoes .pc-notificacoes__lista {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }

    .pc-drawer--notificacoes .pc-notificacoes__lista .pc-notificacao {
        padding: 18px 4px;
    }

    .pc-drawer--notificacoes .pc-notificacoes__lista .pc-notificacao + .pc-notificacao::before {
        inset-inline: 4px;
    }

    /* 32px de vão entre texto e coluna do tempo/ação não cabe em 440px. */
    .pc-drawer--notificacoes .pc-notificacao__corpo {
        column-gap: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pc-drawer--notificacoes.pc-drawer--notificacoes .pc-drawer__painel {
        transition: none;
    }
}