/* PortfolioFolder — pasta de vidro na paleta da página (#0085FF → #55A6F0 → #A3CDF3).
   Recortes da frente e do fundo são gerados em px pelo JS (cantos circulares reais). Tudo escopado em .pf. */
.pf{
  --pf-deep:#0A66D9;
  --pf-mid:#0085FF;
  --pf-sky:#55A6F0;
  --pf-ink:#0B6FD6;
  --pf-ease:cubic-bezier(.2,.7,.2,1);
  position:relative;width:100%;height:100%;
  container-type:size;perspective:1200px;
  --mx:0;--my:0;--lift:0%;
}
.pf__float{position:absolute;inset:0;transform-style:preserve-3d;animation:pfFloat 7s ease-in-out infinite}
.pf__tilt{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(calc(var(--my) * -6deg)) rotateY(calc(var(--mx) * 8deg));
}
.pf__edge{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pf__edge path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}

/* fundo da pasta: azul profundo da paleta, aba à direita */
.pf__back{
  position:absolute;left:9%;right:9%;bottom:22%;height:70%;
  background:linear-gradient(165deg, var(--pf-mid) 0%, var(--pf-deep) 100%);
  transform:translate3d(calc(var(--mx) * -4px), calc(var(--my) * -3px), -40px);
}
.pf__back .pf__edge path{stroke:rgba(255,255,255,.35)}

/* telas (home mobile real de cada site), em leque */
.pf__sheet{
  --x:0%;--y:0%;--rot:0deg;--z:0px;--d:6;
  position:absolute;left:var(--x);bottom:calc(31% + var(--y));width:27%;
  border-radius:2.8cqw;transform-origin:50% 100%;
  transform:
    translate3d(calc(var(--mx) * var(--d) * 1px), calc(var(--my) * var(--d) * 1px), var(--z))
    translateY(var(--lift)) rotate(var(--rot));
  transition:transform .7s var(--pf-ease), filter .4s;
  animation:pfBob 5.5s ease-in-out infinite;animation-delay:var(--delay, 0s);
}
.pf__sheet:nth-of-type(1){--x:0%;--y:0%;--rot:-14deg;--z:-28px;--d:3;--delay:-.4s}
.pf__sheet:nth-of-type(2){--x:16%;--y:7%;--rot:-7deg;--z:-18px;--d:5;--delay:-1.5s}
.pf__sheet:nth-of-type(3){--x:36.5%;--y:10%;--rot:0deg;--z:-8px;--d:7;--delay:-2.6s}
.pf__sheet:nth-of-type(4){--x:57%;--y:7%;--rot:7deg;--z:2px;--d:9;--delay:-3.7s}
.pf__sheet:nth-of-type(5){--x:73%;--y:0%;--rot:14deg;--z:12px;--d:11;--delay:-4.8s}
.pf__win{
  display:block;border-radius:inherit;overflow:hidden;background:#fff;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 2.6cqw 5cqw -2cqw rgba(0,52,130,.55), 0 .4cqw 1cqw rgba(0,52,130,.18);
  transition:box-shadow .5s;
  animation:pfIn .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.15s + var(--i, 0) * .08s);
}
.pf__win img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top}
.pf.is-hover{--lift:-8%}
.pf__sheet:hover,.pf__sheet:focus-visible{--lift:-17%;--z:44px;filter:brightness(1.05)}
.pf__sheet:hover .pf__win{box-shadow:0 4cqw 7cqw -3cqw rgba(0,52,130,.65), 0 .4cqw 1cqw rgba(0,52,130,.2)}
.pf__sheet:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* aro de vidro por baixo da frente */
.pf__tray{
  position:absolute;left:3.5%;right:3.5%;bottom:0;height:34%;
  border-radius:0 0 7cqw 7cqw;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.2));
  border:2px solid rgba(255,255,255,.5);border-top:0;
  box-shadow:0 3cqw 6cqw -3cqw rgba(0,52,130,.35);
  transform:translate3d(calc(var(--mx) * 13px), calc(var(--my) * 10px), 34px);
}

/* frente de vidro fosco com aba à esquerda */
.pf__front{
  position:absolute;left:7%;right:7%;bottom:7%;height:50%;
  display:flex;align-items:flex-end;justify-content:space-between;gap:3cqw;
  padding:0 5cqw 4.6cqw;color:#fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(136deg, rgba(0,133,255,.72) 0%, rgba(29,144,250,.62) 50%, rgba(85,166,240,.58) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 5cqw 9cqw -5cqw rgba(0,52,130,.55);
  transform:translate3d(calc(var(--mx) * 12px), calc(var(--my) * 9px), 50px);
}
.pf__front .pf__edge path{stroke:rgba(255,255,255,.75)}
.pf__front::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(55% 90% at calc(50% + var(--mx) * 45%) calc(25% + var(--my) * 40%), rgba(255,255,255,.42), rgba(255,255,255,0) 62%);
}
.pf.is-hover .pf__front::after{opacity:1}
.pf__brand{position:relative;z-index:1;width:max(80px, 31cqw)}
.pf__brand img{width:100%;height:auto}
.pf__pill{
  position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:1.7cqw;
  padding:1.3cqw 1.3cqw 1.3cqw 2.8cqw;border-radius:999px;
  background:rgba(8,44,104,.62);border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.pf__pill > svg{width:max(11px, 3.4cqw);height:max(11px, 3.4cqw);fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.pf__pill i{display:grid;place-items:center;width:max(18px, 6.2cqw);aspect-ratio:1;border-radius:50%;background:#fff;color:var(--pf-ink);margin-left:.6cqw;transition:transform .5s var(--pf-ease)}
.pf__pill i svg{width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pf.is-hover .pf__pill i{transform:rotate(45deg)}
.pf__front:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* cursor "Solicite orçamento" (só ponteiro fino) */
.pf__cursor{
  position:absolute;left:0;top:0;z-index:20;pointer-events:none;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:7px 12px 7px 9px;border-radius:999px;
  background:#fff;color:var(--pf-ink);font:600 12.5px/1 var(--font, Inter, sans-serif);letter-spacing:-.005em;
  box-shadow:0 10px 24px -10px rgba(0,52,130,.55), 0 0 0 1px rgba(0,133,255,.1);
  opacity:0;scale:.85;transition:opacity .25s ease, scale .35s var(--pf-ease);
  will-change:transform;
}
.pf__cursor::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pf-mid);box-shadow:0 0 0 3px rgba(0,133,255,.18)}
.pf.is-hover .pf__cursor{opacity:1;scale:1}

@keyframes pfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6cqh)}}
@keyframes pfBob{0%,100%{translate:0 0}50%{translate:0 -1.4cqh}}
@keyframes pfIn{from{transform:translateY(28%) scale(.94)}to{transform:none}}

@media (hover: none), (pointer: coarse){
  .pf__cursor{display:none}
  .pf__tilt{transform:none}
}
@media (prefers-reduced-motion: reduce){
  .pf__float,.pf__sheet,.pf__win{animation:none}
  .pf__tilt{transform:none}
}