/* WebPrime Studio — Widget 02: Case Studies Showcase */
.wpcs-section{
	--wpcs-section-bg:#fff;
	--wpcs-content-bg:#fff;
	--wpcs-border:#b7b7b7;
	--wpcs-border-w:1px;
	position:relative;
	width:100%;
	background:var(--wpcs-section-bg);
	color:#111;
	overflow:hidden;
}
.wpcs-section.is-full-bleed{
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
}
.wpcs-shell{width:100%;margin:0 auto}
.wpcs-grid{
	display:grid;
	width:100%;
	grid-template-columns:repeat(var(--wpcs-d-cols),minmax(0,1fr));
	gap:var(--wpcs-d-gap);
	border-top:var(--wpcs-border-w) solid var(--wpcs-border);
	border-bottom:var(--wpcs-border-w) solid var(--wpcs-border);
}
.wpcs-case{
	position:relative;
	min-width:0;
	background:var(--wpcs-content-bg);
	border-right:var(--wpcs-border-w) solid var(--wpcs-border);
}
.wpcs-case:last-child{border-right:0}
.wpcs-case__media-link{display:block;color:inherit!important;text-decoration:none!important;background:transparent!important}
.wpcs-case__media{
	width:100%;
	height:var(--wpcs-d-img);
	overflow:hidden;
	background:var(--wpcs-image-bg,#f2f2f2);
}
.wpcs-case__media picture,
.wpcs-case__media img{
	display:block;
	width:100%;
	height:100%;
}
.wpcs-case__media img{
	object-fit:var(--wpcs-fit);
	object-position:var(--wpcs-d-pos);
	transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .35s ease;
}
.wpcs-case__placeholder{
	display:grid;
	place-items:center;
	height:100%;
	min-height:220px;
	background:linear-gradient(135deg,#eee,#f8f8f8);
	color:#777;
	font-size:13px;
}
.wpcs-case__content{
	position:relative;
	display:flex;
	align-items:flex-start;
	min-height:var(--wpcs-d-content);
	background:var(--wpcs-content-bg);
}
.wpcs-text{width:100%}
.wpcs-text--laptop,.wpcs-text--tablet,.wpcs-text--mobile{display:none}
.wpcs-section.align-left .wpcs-case__content{text-align:left}
.wpcs-section.align-center .wpcs-case__content{text-align:center}
.wpcs-section.align-right .wpcs-case__content{text-align:right}
.wpcs-case__title{
	margin:0 0 4px;
	font-size:19px;
	line-height:1.22;
	font-weight:500;
	letter-spacing:-.025em;
}
.wpcs-case__meta{
	margin:0 0 13px;
	font-size:14px;
	line-height:1.35;
}
.wpcs-section .wpcs-case__link,
.wpcs-section .wpcs-case__link:visited,
.wpcs-section .wpcs-case__link:focus,
.wpcs-section .wpcs-case__link:hover{
	--wpcs-cta:#111;
	--wpcs-cta-hover:#111;
	--wpcs-cta-bg:#fff;
	--wpcs-cta-bg-hover:#111;
	display:inline-flex;
	align-items:center;
	gap:6px;
	min-height:34px;
	color:var(--wpcs-cta)!important;
	background:transparent!important;
	text-decoration:none!important;
	box-shadow:none!important;
	border:0;
	font-size:14px;
	font-weight:500;
	line-height:1.2;
	transition:color .2s ease,background .2s ease,transform .2s ease;
}
.wpcs-section .wpcs-case__link:hover{color:var(--wpcs-cta-hover)!important}
.wpcs-case__link i{font-style:normal;transition:transform .2s ease}
.wpcs-case__link:hover i{transform:translateX(3px)}

.wpcs-section.cta-underline .wpcs-case__link{position:relative;padding:0 0 3px}
.wpcs-section.cta-underline .wpcs-case__link:after{
	content:"";
	position:absolute;
	left:0;right:0;bottom:0;
	height:1px;
	background:currentColor;
	transform-origin:left center;
	transform:scaleX(1);
	transition:transform .25s ease;
}
.wpcs-section.cta-underline .wpcs-case__link:hover:after{transform:scaleX(.68)}
.wpcs-section.cta-underline .wpcs-case__link i{display:none}
.wpcs-section.cta-text .wpcs-case__link i{display:none}
.wpcs-section.cta-button .wpcs-case__link{
	padding:9px 14px;
	min-height:40px;
	border:1px solid currentColor;
	background:var(--wpcs-cta-bg)!important;
}
.wpcs-section.cta-button .wpcs-case__link:hover{
	color:#fff!important;
	background:var(--wpcs-cta-bg-hover)!important;
}

/* Image interactions */
.wpcs-section.image-hover-zoom .wpcs-case:hover .wpcs-case__media img{transform:scale(1.025)}
.wpcs-section.image-hover-fade .wpcs-case:hover .wpcs-case__media img{opacity:.88}
.wpcs-section.image-hover-lift .wpcs-case{transition:transform .32s ease}
.wpcs-section.image-hover-lift .wpcs-case:hover{transform:translateY(-3px);z-index:2}

/* Whole-card clickable keeps content links usable while media remains the large click target. */
.wpcs-section.is-card-clickable .wpcs-case{cursor:pointer}

/* Laptop */
@media (max-width:1199px) and (min-width:900px){
	.wpcs-grid{
		grid-template-columns:repeat(var(--wpcs-l-cols),minmax(0,1fr));
		gap:var(--wpcs-l-gap);
	}
	.wpcs-case__media{height:var(--wpcs-l-img)}
	.wpcs-case__media img{object-position:var(--wpcs-l-pos)}
	.wpcs-case__content{min-height:var(--wpcs-l-content)}
	.wpcs-text--desktop{display:none}
	.wpcs-text--laptop{display:block}
}

/* Tablet */
@media (max-width:899px) and (min-width:600px){
	.wpcs-grid{
		grid-template-columns:repeat(var(--wpcs-t-cols),minmax(0,1fr));
		gap:var(--wpcs-t-gap);
		border-top:0;
	}
	.wpcs-case{
		border:var(--wpcs-border-w) solid var(--wpcs-border);
	}
	.wpcs-case:last-child{border-right:var(--wpcs-border-w) solid var(--wpcs-border)}
	.wpcs-case__media{height:var(--wpcs-t-img)}
	.wpcs-case__media img{object-position:var(--wpcs-t-pos)}
	.wpcs-case__content{min-height:var(--wpcs-t-content)}
	.wpcs-text--desktop{display:none}
	.wpcs-text--tablet{display:block}
}

/* Mobile */
@media (max-width:599px){
	.wpcs-grid{
		gap:var(--wpcs-m-gap);
		border:0;
	}
	.wpcs-case{
		border:var(--wpcs-border-w) solid var(--wpcs-border);
	}
	.wpcs-case:last-child{border-right:var(--wpcs-border-w) solid var(--wpcs-border)}
	.wpcs-case__media{height:var(--wpcs-m-img)}
	.wpcs-case__media img{object-position:var(--wpcs-m-pos)}
	.wpcs-case__content{min-height:var(--wpcs-m-content)}
	.wpcs-text--desktop{display:none}
	.wpcs-text--mobile{display:block}
	.wpcs-text--mobile .wpcs-case__meta{display:none}
	.wpcs-text--mobile .wpcs-case__link{display:none}
	.wpcs-section.show-meta-mobile .wpcs-text--mobile .wpcs-case__meta{display:block}
	.wpcs-section.show-cta-mobile .wpcs-text--mobile .wpcs-case__link{display:inline-flex}

	.wpcs-section.mobile-stack .wpcs-grid{grid-template-columns:1fr}
	.wpcs-section.mobile-compact2 .wpcs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.wpcs-section.mobile-compact2 .wpcs-case__content{min-height:0}
	.wpcs-section.mobile-compact2 .wpcs-case__title{font-size:15px}
	.wpcs-section.mobile-compact2 .wpcs-case__meta{font-size:12px}
	.wpcs-section.mobile-swipe .wpcs-grid{
		display:grid;
		grid-auto-flow:column;
		grid-auto-columns:min(var(--wpcs-m-width),420px);
		grid-template-columns:none;
		overflow-x:auto;
		scroll-snap-type:x mandatory;
		-webkit-overflow-scrolling:touch;
		padding-bottom:8px;
	}
	.wpcs-section.mobile-swipe .wpcs-case{scroll-snap-align:start}
}

@media (prefers-reduced-motion:reduce){
	.wpcs-case,.wpcs-case__media img,.wpcs-case__link,.wpcs-case__link i{transition:none!important}
}

/* v1.6.1 image framing */
.wpcs-section:not(.ratio-custom) .wpcs-case__media{height:auto}
.wpcs-section.ratio-landscape .wpcs-case__media{aspect-ratio:4/3}
.wpcs-section.ratio-wide .wpcs-case__media{aspect-ratio:16/9}
.wpcs-section.ratio-square .wpcs-case__media{aspect-ratio:1/1}
.wpcs-section.ratio-portrait .wpcs-case__media{aspect-ratio:4/5}
.wpcs-section.ratio-tall .wpcs-case__media{aspect-ratio:3/4}
.wpcs-section.ratio-original .wpcs-case__media{height:auto;aspect-ratio:auto;overflow:visible}
.wpcs-section.ratio-original .wpcs-case__media picture,
.wpcs-section.ratio-original .wpcs-case__media img{height:auto}
.wpcs-section.ratio-original .wpcs-case__media img{object-fit:contain}
.wpcs-section.is-custom-focus .wpcs-case__media img{object-position:var(--wpcs-focus-x) var(--wpcs-focus-y)!important}
@media(max-width:1199px){.wpcs-section:not(.ratio-custom) .wpcs-case__media{height:auto}}


/* WebPrime Studio · Transiciones premium entre secciones · v1.10.1
   Lógica corregida:
   - Curva superior = la sección actual entra por encima de la anterior.
   - Curva inferior = el COLOR DE LA SIGUIENTE SECCIÓN entra desde abajo,
     como una nueva capa con esquinas superiores redondeadas.
*/
.wp-curve-top{
  border-top-left-radius:var(--wp-section-radius,32px);
  border-top-right-radius:var(--wp-section-radius,32px);
  margin-top:calc(var(--wp-section-overlap,0px) * -1);
  position:relative;
  z-index:3;
  overflow:hidden;
}

/* No redondeamos el borde inferior de la sección actual:
   eso era lo que producía la curva "al revés". */
.wp-curve-bottom{
  position:relative;
  z-index:2;
  overflow:visible!important;
  padding-bottom:var(--wp-transition-depth,28px);
}

/* Esta capa representa visualmente el inicio de la SIGUIENTE sección. */
.wp-curve-bottom::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--wp-transition-depth,28px);
  background:var(--wp-transition-next,#fff);
  border-top-left-radius:var(--wp-section-radius,32px);
  border-top-right-radius:var(--wp-section-radius,32px);
  pointer-events:none;
  z-index:10;
}

/* El solapamiento inferior ahora hace que la capa de transición suba,
   no que la sección actual se redondee hacia abajo. */
.wp-curve-bottom::after{
  transform:translateY(calc(var(--wp-section-overlap,0px) * -1));
}

@media(max-width:599px){
  .wp-curve-no-mobile.wp-curve-top{
    border-top-left-radius:0!important;
    border-top-right-radius:0!important;
    margin-top:0!important;
  }
  .wp-curve-no-mobile.wp-curve-bottom{
    padding-bottom:0!important;
  }
  .wp-curve-no-mobile.wp-curve-bottom::after{
    display:none!important;
  }
}
