/* Portfolio Web V5 — base V4.
   Ajuste estrutural da composição desktop/mobile e linha do rodapé. */

.portfolio-page{background:var(--cream);min-height:100vh;}
.portfolio-hero{padding:128px 0 72px;}
.portfolio-hero small,
.portfolio-project-copy small{font-size:12px;letter-spacing:1.3px;}
.portfolio-hero h1{font:400 clamp(2.5rem,4.2vw,4.15rem)/.9 var(--font-head);letter-spacing:-.5px;margin:10px 0 25px;}
.portfolio-hero h1 span{color:var(--purple);}
.portfolio-hero-copy{max-width:680px;font-size:18px;font-weight:300;line-height:1.32;}
.portfolio-hero-copy p{margin:0 0 12px;}

.portfolio-project{padding:58px 0 76px;background:var(--cream);}
.portfolio-project + .portfolio-project{padding-top:56px;}
.portfolio-project-grid{display:grid;grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr);gap:70px;align-items:stretch;}
.portfolio-project-copy{display:flex;flex-direction:column;align-self:stretch;position:relative;min-height:100%;}
.portfolio-project-copy h2{font:400 clamp(2rem,3.2vw,3.1rem)/.92 var(--font-head);margin:9px 0 18px;}
.portfolio-project-copy h2.purple-title{color:var(--purple);}
.portfolio-project-copy p{font-size:17px;font-weight:300;line-height:1.34;margin:0 0 14px;max-width:430px;}

.portfolio-piece{margin:0;justify-self:end;align-self:start;width:100%;background:#fff;border:1px solid rgba(11,11,13,.12);padding:18px;box-shadow:0 12px 30px rgba(11,11,13,.07);}
.portfolio-piece-link{display:block;text-decoration:none;color:inherit;cursor:zoom-in;}
.portfolio-piece img{display:block;width:100%;height:auto;object-fit:contain;}
.portfolio-piece-tall{max-width:620px;}
.portfolio-piece-short{max-width:690px;}
.portfolio-piece figcaption{font-size:10px;font-weight:300;letter-spacing:.4px;margin-top:9px;color:#777;}

/* Composição desktop: texto à esquerda; à direita, print completo e mobile.
   O mockup mobile fica imediatamente à esquerda do print e com a base alinhada. */
.portfolio-project-grid{position:relative;}
.portfolio-visual{grid-column:2;display:flex;align-items:flex-end;justify-content:flex-end;gap:30px;width:calc(100% + 220px);position:relative;left:-220px;}
.portfolio-visual .portfolio-piece{flex:1 1 auto;min-width:0;}
.portfolio-visual .mobile-showcase{order:-1;}
.mobile-showcase{position:relative;flex:0 0 300px;align-self:flex-end;margin:0;padding:0;display:flex;align-items:flex-end;justify-content:flex-end;}
.phone-frame{position:relative;width:300px;padding:9px;border-radius:38px;background:#111;box-shadow:0 16px 28px rgba(11,11,13,.14), inset 0 0 0 1px rgba(255,255,255,.14);}
.phone-frame img{display:block;width:100%;height:auto;border-radius:30px;}
.phone-speaker{display:none;}

.portfolio-project-short{padding-bottom:88px;}
.portfolio-project-short .portfolio-project-grid{align-items:stretch;}

.portfolio-footer{border-top:1px solid rgba(11,11,13,.12);}
.portfolio-footer .footer-brand img{width:115px;height:auto;display:block;}

@media(max-width:1000px){
  .portfolio-hero{padding-top:115px;}
  .portfolio-project-grid{grid-template-columns:1fr 1fr;gap:36px;}
  .portfolio-visual{grid-column:1/-1;left:0;width:100%;gap:20px;align-items:flex-end;justify-content:flex-end;}
  .mobile-showcase{position:static;flex:0 0 180px;margin:0;padding:0;}
  .phone-frame{width:180px;}
  .portfolio-project-copy{min-height:0;}
  .portfolio-project-copy p{font-size:16px;}
}

@media(max-width:620px){
  .portfolio-hero{padding:105px 0 48px;}
  .portfolio-hero h1{font-size:clamp(2.25rem,12vw,4rem);}
  .portfolio-hero-copy{font-size:17px;}
  .portfolio-project,.portfolio-project-short{padding:42px 0 54px;}
  .portfolio-project-grid{grid-template-columns:1fr;gap:30px;}
  .portfolio-project-copy{display:block;}
  .portfolio-visual{grid-column:auto;display:flex;flex-direction:column-reverse;gap:24px;align-items:center;justify-content:flex-start;}
  .mobile-showcase{margin:0;display:flex;position:static;flex:0 0 auto;}
  .phone-frame{width:240px;}
  .portfolio-piece{justify-self:stretch;padding:12px;}
  .portfolio-project-copy h2{font-size:2.3rem;}
  .portfolio-project-copy p{font-size:16px;}
}

/* V9 — teste de entrada suave (fade-up). Apenas elementos principais da página Web. */
.web-reveal-ready .web-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .72s ease, transform .72s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}
.web-reveal-ready .web-reveal.web-reveal-visible{
  opacity:1;
  transform:translateY(0);
}
@media(prefers-reduced-motion:reduce){
  .web-reveal-ready .web-reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}