/* ===== Portfolio no celular (so telas de ate 720 px; o computador nao usa este arquivo) ===== */
.pjs{gap:14px}
.pf .sec{padding-top:24px;padding-bottom:24px}
.pf #projetos{padding-top:8px}

/* cartoes: texto mais compacto; a previa continua inteira em 16:9 */
.pj .tx{padding:14px 16px 6px}
.pj .kindchip{margin-bottom:8px}
.pj h3{margin:0 0 4px;overflow-wrap:break-word}
.pj p{margin:0 0 2px}
.pj .visit{align-self:flex-start;min-height:46px;padding:0 2px;gap:8px}

/* sem efeitos de mouse no toque: nada de botao sobre a imagem, zoom ou borda que fica marcada depois de tocar */
.pj .go{display:none}
.pj:hover,.pj:focus-within{transform:none;border-color:rgba(102,120,159,.35);box-shadow:none}
.pj:hover .shot img,.pj:focus-within .shot img{transform:none}
.pj:hover .visit,.pj:focus-within .visit{color:var(--accent)}
.pj:hover .visit::after,.pj:focus-within .visit::after{transform:scaleX(0)}
.pj:hover .visit svg,.pj:focus-within .visit svg{transform:none}
/* o foco do teclado continua visivel */
.pj:has(:focus-visible){border-color:var(--accent);box-shadow:0 0 0 1px rgba(217,178,106,.55)}
.pj .visit:focus-visible::after{transform:scaleX(1)}
.pj .visit:focus-visible,.pj .shot:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* chamada final */
.pf .pcta{padding:16px 16px 18px;gap:10px;border-radius:20px}
.pf .pcta h2{font-size:1.3rem;line-height:1.2}
.pf .pcta p{margin-top:6px;font-size:.95rem}
.pcta .ctas{gap:10px}
.pcta .btn{min-height:46px;padding:12px 20px}