/* © 2026 NORTECH Soluções. Portfólio: vitrines dos sites (janela do navegador que rola sozinha + celular) e dos painéis. */
.pf-cont { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; }
.pf-cont span { font: 600 14px/1.3 var(--f-texto); color: rgba(255, 255, 255, .78); }
.pf-cont b { display: block; font: 800 26px/1.1 var(--f-marca); color: #fff; }

.pf-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; }
.pf-site { display: flex; flex-direction: column; gap: 22px; }
.pf-site.pf-destaque { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; gap: 40px; }

.pf-vitrine { position: relative; padding: 0 34px 26px 0; }
.pf-nav { display: block; width: 100%; padding: 0; text-align: left; border: 0; border-radius: 12px; background: #fff; cursor: zoom-in; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(11, 36, 64, .10), 0 18px 46px rgba(11, 36, 64, .16); transition: transform .35s ease, box-shadow .35s ease; }
.pf-nav:hover, .pf-nav:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(11, 36, 64, .14), 0 26px 60px rgba(11, 36, 64, .22); }
.pf-barra { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; background: #EEF1F5; border-bottom: 1px solid #DDE3EA; }
.pf-barra i { width: 10px; height: 10px; border-radius: 50%; background: #CDD4DD; }
.pf-barra i:nth-child(1) { background: #EE6A5F; } .pf-barra i:nth-child(2) { background: #F4BE4F; } .pf-barra i:nth-child(3) { background: #61C454; }
.pf-janela { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--papel-2); }
.pf-rola { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; transform: translateY(0); will-change: transform; }
.pf-site.rodando .pf-rola { animation: pfRola var(--dur, 24s) cubic-bezier(.45, 0, .55, 1) 1.2s infinite; }
.pf-site.rodando .pf-rola-cel { animation-delay: 2.4s; }
.pf-vitrine:hover .pf-rola { animation-play-state: paused; }
@keyframes pfRola { 0%, 8% { transform: translateY(0); } 46%, 54% { transform: translateY(var(--fim, 0px)); } 92%, 100% { transform: translateY(0); } }

.pf-cel { position: absolute; right: 0; bottom: 0; width: 26%; min-width: 104px; max-width: 168px; padding: 4px; border: 0; border-radius: 26px; cursor: zoom-in;
  background: linear-gradient(150deg, #3A404C 0%, #161A21 40%, #0B0E13 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 1px rgba(0, 0, 0, .4), 0 22px 44px rgba(3, 12, 24, .40); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.pf-cel::before { content: ''; position: absolute; right: -2px; top: 24%; width: 2px; height: 14%; border-radius: 0 2px 2px 0; background: #2A2F38; }
.pf-cel:hover, .pf-cel:focus-visible { transform: translateY(-5px); }
.pf-cel-tela { position: relative; display: flex; flex-direction: column; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 22px; background: #fff; }
.pf-cel-status { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; height: 7.2%; padding: 0 10% 0 11%;
  font: 700 clamp(6px, .55vw, 8px)/1 var(--f-texto); color: #0E1C2B; background: #fff; }
.pf-cel-status i { position: absolute; left: 50%; top: 50%; width: 32%; height: 52%; transform: translate(-50%, -50%); border-radius: 99px; background: #05070A; }
.pf-cel-ic { width: 16%; height: 30%; border-radius: 2px; background: linear-gradient(90deg, #0E1C2B 70%, rgba(14, 28, 43, .35) 70%); }
.pf-cel-janela { position: relative; flex: 1; overflow: hidden; background: var(--papel-2); }
.pf-cel-janela .pf-rola { position: absolute; left: 0; top: 0; width: 100%; }

.pf-info { padding-right: 8px; }
.pf-seg { font: 700 12px/1.3 var(--f-marca); letter-spacing: .12em; text-transform: uppercase; color: var(--verde-acao); }
.pf-info h3 { margin-top: 8px; font-weight: 800; font-size: clamp(21px, 2vw, 26px); line-height: 1.15; letter-spacing: -.015em; }
.pf-info p:not(.pf-seg) { margin: 10px 0 0; color: var(--tinta-2); text-wrap: pretty; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.pf-tags li { padding: 5px 10px; font: 600 12.5px/1.2 var(--f-texto); color: var(--azul-prof); background: var(--papel-2); border: 1px solid var(--linha); border-radius: 999px; }
.pf-destaque .pf-info h3 { font-size: clamp(24px, 2.6vw, 32px); }

/* painéis */
.pf-paineis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pf-painel { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-g); overflow: hidden; }
.pf-painel .pf-foto { display: block; padding: 0; border: 0; cursor: zoom-in; background: var(--azul-prof); overflow: hidden; }
.pf-painel .pf-foto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; transition: transform .6s ease; }
.pf-painel .pf-foto:hover img, .pf-painel .pf-foto:focus-visible img { transform: scale(1.04); }
.pf-painel-txt { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.pf-painel h3 { font-weight: 800; font-size: 19px; line-height: 1.2; }
.pf-painel h3 span { color: var(--verde-acao); }
.pf-painel p { margin: 8px 0 14px; font-size: 15px; color: var(--tinta-2); }
.pf-painel a { margin-top: auto; align-self: flex-start; font: 700 14px/1.3 var(--f-texto); color: var(--verde-acao); text-decoration: none; border-bottom: 2px solid var(--verde-suave); }
.pf-painel a:hover { border-bottom-color: var(--verde-acao); }
.pf-painel.pf-app .pf-foto { display: flex; justify-content: center; align-items: flex-end; aspect-ratio: 16 / 10; padding-top: 22px; background: linear-gradient(160deg, var(--azul-prof), var(--azul-noite)); }
.pf-painel.pf-app .pf-foto img { width: 34%; aspect-ratio: auto; height: auto; border-radius: 16px 16px 0 0; box-shadow: 0 0 0 5px #111722; }

@media (max-width: 1000px) {
  .pf-site.pf-destaque { grid-template-columns: 1fr; gap: 22px; }
  .pf-paineis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pf-grade { grid-template-columns: 1fr; gap: 48px; }
  .pf-paineis { grid-template-columns: 1fr; }
  .pf-vitrine { padding: 0 20px 22px 0; }
}
@media (prefers-reduced-motion: reduce) { .pf-site.rodando .pf-rola { animation: none; } }