/* V244 · Portafolio fino: 3D suave + video integrado + A6K alineado */

/* 1) VIDEO SUPERIOR MÁS INTEGRADO AL FONDO */
#portafolio .portfolio-hero-showcase{
  margin-top:10px!important;
  gap:18px!important;
  align-items:start!important;
}
#portafolio .portfolio-hero-showcase .portfolio-video-banner{
  position:relative!important;
  overflow:hidden!important;
  width:100%!important;
  min-width:0!important;
  aspect-ratio:16/9!important;
  min-height:clamp(220px,28vw,360px)!important;
  padding:6px!important;
  border-radius:26px!important;
  border:1px solid rgba(173,194,215,.46)!important;
  background:
    radial-gradient(circle at 16% 18%, rgba(215,205,246,.85) 0%, rgba(215,205,246,0) 32%),
    radial-gradient(circle at 82% 18%, rgba(209,236,248,.82) 0%, rgba(209,236,248,0) 36%),
    linear-gradient(135deg,#e9e2f3 0%, #eef3fa 48%, #dff1f4 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    0 14px 34px rgba(24,47,78,.10)!important;
  transform:none!important;
}
#portafolio .portfolio-hero-showcase .portfolio-video-banner::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  pointer-events:none;
}
#portafolio .portfolio-hero-showcase .portfolio-video-banner::after{display:none!important}
#portafolio .portfolio-hero-showcase .portfolio-hero-video{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:22px!important;
  background:
    linear-gradient(135deg, rgba(247,244,251,.98) 0%, rgba(243,248,252,.98) 100%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.78),
    inset 0 0 0 999px rgba(255,255,255,.02)!important;
}
#portafolio .portfolio-hero-showcase .portfolio-featured-badge{
  left:14px!important;
  top:14px!important;
  z-index:2!important;
}
/* Si el navegador no reproduce de inmediato, el poster/logo se sigue viendo integrado. */
#portafolio .portfolio-hero-showcase .portfolio-hero-video[poster]{background-color:#f5f5f6!important}

/* 2) MINI EFECTO 3D / ACERCAMIENTO SUAVE EN LA LÁMINA */
#portafolio .reno16-feature-panel{perspective:1600px!important}
#portafolio .reno16-feature-media{
  position:relative!important;
  cursor:zoom-in!important;
  transform-style:preserve-3d!important;
  transform-origin:center center!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,#f0edf7 0%,#f6fbff 50%,#edf7f8 100%)!important;
  box-shadow:0 12px 28px rgba(29,57,92,.10)!important;
  transition:transform .34s cubic-bezier(.22,.61,.36,1), box-shadow .34s ease, filter .34s ease!important;
  will-change:transform;
}
#portafolio .reno16-feature-media:hover{
  transform:translateY(-4px) scale(1.018) rotateX(2.2deg) rotateY(-2.8deg)!important;
  box-shadow:0 24px 42px rgba(22,46,78,.18)!important;
  filter:saturate(1.04)!important;
}
#portafolio .reno16-feature-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,.11) 58%, rgba(255,255,255,0) 100%);
  opacity:.75;
}
#portafolio .reno16-feature-media > img{
  position:relative!important;
  z-index:0!important;
  width:100%!important;
  height:auto!important;
  display:block!important;
  transition:transform .34s cubic-bezier(.22,.61,.36,1)!important;
  transform-origin:center center!important;
}
#portafolio .reno16-feature-media:hover > img{
  transform:scale(1.022)!important;
}
#portafolio .reno16-feature-media::after{
  content:"Clic para ampliar";
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:2;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(10,30,59,.78);
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.03em;
  opacity:0;
  transform:translateY(5px);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none;
}
#portafolio .reno16-feature-media:hover::after{opacity:1;transform:translateY(0)}

/* 3) MODAL CON APERTURA MÁS SUAVE */
.portfolio-focus-overlay{background:rgba(6,18,34,.72)!important}
.portfolio-focus-dialog{
  overflow:hidden;
  border-radius:24px;
  background:linear-gradient(135deg,#f2eef8 0%,#f8fbff 52%,#edf7f8 100%)!important;
  box-shadow:0 26px 56px rgba(0,0,0,.30)!important;
  transform:translateY(18px) scale(.955) rotateX(2.5deg);
  transform-origin:center center;
}
.portfolio-focus-overlay.is-open .portfolio-focus-dialog{
  transform:translateY(0) scale(1) rotateX(0deg);
}
.portfolio-focus-stage img{box-shadow:0 12px 28px rgba(18,35,70,.16)!important}

/* 4) A6K · botón del mismo tamaño que el resto */
#portfolioGrid .model-card .v214-title-row .v213-portfolio-sheet,
#portfolioGrid .model-card .v235-a6k-title-row .v213-portfolio-sheet,
#portfolioGrid .model-card .v235-a6k-title-row a,
#portfolioGrid .model-card .v235-a6k-title-row button{
  font-size:12px!important;
  line-height:1.2!important;
  padding:7px 10px!important;
  border-radius:10px!important;
  min-height:auto!important;
  height:auto!important;
}
#portfolioGrid .v235-a6k-title-row{gap:8px!important;align-items:center!important;flex-wrap:wrap!important}

@media(max-width:760px){
  #portafolio .portfolio-hero-showcase{gap:12px!important}
  #portafolio .portfolio-hero-showcase .portfolio-video-banner{
    min-height:190px!important;
    border-radius:20px!important;
    padding:4px!important;
  }
  #portafolio .portfolio-hero-showcase .portfolio-hero-video{border-radius:16px!important}
  #portafolio .reno16-feature-media{
    border-radius:16px!important;
    transform:none!important;
  }
  #portafolio .reno16-feature-media:hover{transform:translateY(-2px) scale(1.01)!important}
  #portafolio .reno16-feature-media::after{opacity:1;transform:none;font-size:9px;padding:7px 10px}
}

@media(max-width:520px){
  #portfolioGrid .model-card .v214-title-row .v213-portfolio-sheet,
  #portfolioGrid .model-card .v235-a6k-title-row .v213-portfolio-sheet{
    font-size:11px!important;
    padding:7px 8px!important;
  }
}