/* ═══════════════════════════════════════════════════════
   PORTAFOLIO-UXMAX-1016 — UX Máximo §03 (Orlando 04:09)
   Capa encima de NEO-BRUTAL+SPATIAL v6 — solo secciones #portfolio
   (0-toque-a-otras-secciones · P50.1 floor-final-verificable)
   ═══════════════════════════════════════════════════════ */

/* ── 0. Tokens del bloque ── */
.section-portfolio {
  --pmax-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pmax-ease2: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── 1. Featured cards: tilt-3D con luz que sigue al cursor (transform-only, rAF) ── */
.section-portfolio a[href="/iws/"].offset-card,
.section-portfolio a[href="/iws/app/"].offset-card,
.section-portfolio a[href="/iws/partners/"].offset-card { display: block; position: relative; will-change: transform; }

.section-portfolio .pmax-featured { transform-style: preserve-3d; transition: transform .5s var(--pmax-ease), box-shadow .5s var(--pmax-ease); }
.section-portfolio .pmax-featured:hover { z-index: 2; }
@keyframes pmax-lightsweep { 0% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(240%) skewX(-18deg); } }

/* ── 2. Screenshots internos: ken-burns infinito sutil ── */
@keyframes pmax-kenburns { 0% { transform: scale(1) translateY(0); } 50% { transform: scale(1.045) translateY(-6px); } 100% { transform: scale(1) translateY(0); } }
.section-portfolio .pmax-shot img { animation: pmax-kenburns 14s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .section-portfolio .pmax-shot img { animation: none; }
}

/* ── 3. Galería: glass profundo + caption-reveal + hover-zoom-gradual ── */
.section-portfolio .pmax-cell { position: relative; overflow: hidden; border-radius: 14px; background: var(--glass-card-bg, rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.08); transition: transform .55s var(--pmax-ease), box-shadow .55s var(--pmax-ease), border-color .55s var(--pmax-ease); }
.section-portfolio .pmax-cell::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.62) 100%); opacity: .55; transition: opacity .5s var(--pmax-ease); pointer-events: none; }
.section-portfolio .pmax-cell:hover { transform: translateY(-5px) scale(1.012); box-shadow: 0 22px 44px -18px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--section-accent) 32%, transparent); border-color: color-mix(in srgb, var(--section-accent) 42%, transparent); z-index: 2; }
.section-portfolio .pmax-cell:hover::after { opacity: .85; }
.section-portfolio .pmax-cell img, .section-portfolio .pmax-cell a { display: block; width: 100%; }
.section-portfolio .pmax-cell img { transition: transform .8s var(--pmax-ease); transform-origin: 50% 25%; }
.section-portfolio .pmax-cell:hover img { transform: scale(1.06); }
.section-portfolio .pmax-cap { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 12px 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.72)); transition: transform .5s var(--pmax-ease), opacity .5s var(--pmax-ease); }

/* ── 4. Resultados: barras de progreso 'antes → después' ── */
.section-portfolio .pmax-res { position: relative; overflow: hidden; }
.section-portfolio .pmax-res::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--color-mint), color-mix(in srgb, var(--section-accent) 80%, transparent)); opacity: 0; transition: opacity .6s var(--pmax-ease); }
.section-portfolio .pmax-res:hover::before { opacity: 1; }
.section-portfolio .pmax-res:hover { transform: translateX(4px); }

/* ── 5. Chips-métrica: micro-pop stagger ── */
@keyframes pmax-pop { 0% { transform: scale(.82); opacity: 0; } 70% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } }
.section-portfolio .pmax-featured .pmax-chips span { animation: pmax-pop .5s var(--pmax-ease) both; }
.section-portfolio .pmax-featured .pmax-chips span:nth-child(2) { animation-delay: .06s; }
.section-portfolio .pmax-featured .pmax-chips span:nth-child(3) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  .section-portfolio .pmax-featured .pmax-chips span { animation: none; opacity: 1; transform: none; }
}

/* ── 6. Números index — acento animado ── */
.section-portfolio .pmax-idx { font-variant-numeric: tabular-nums; letter-spacing: .08em; }

/* ── 7. Marquee belt — respetar reduced-motion ya definido globalmente ── */
.section-portfolio .pmax-featured { box-shadow: 4px 4px 0 var(--color-border-hover); }
.section-portfolio .pmax-featured:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--color-accent), 0 24px 60px -24px color-mix(in srgb, var(--color-accent) 40%, transparent); }

/* ── 8. Mobile: desactivar 3D tilt (hover none) & compactar ── */
@media (hover:hover) and (pointer:fine) {
  .section-portfolio .pmax-cell:hover img { transform: scale(1.06); }
}
@media (max-width: 768px) {
  .section-portfolio .pmax-cell:hover { transform: none; }
  .section-portfolio .pmax-cap { transform: none; opacity: 1; }
}