/*
 * Portfolio & Carousel — Frontend CSS v7.0.0
 * Fusionado en Pau Services Block desde Ultra Light Carousel Pro
 * Nuevo: modo Masonry Reveal para portfolio profesional
 * WPO: animaciones 100% composited (transform + opacity only)
 * @package PauServicesBlock
 */

/* ════════════════════════════════════════
   VARIABLES & WRAPPER EXTERIOR — SLIDER
════════════════════════════════════════ */
.ulcp-outer {
	--ulcp-frame-color: #ffffff;
	--ulcp-radius:      12px;
	--ulcp-shadow-i:    0.6;
	--ulcp-border-w:    0px;
	--ulcp-border-c:    #ffffff;
	--ulcp-gap:         12px;

	position:       relative;
	width:          100%;
	display:        flex;
	flex-direction: row;
	align-items:    center;
	gap:            var(--ulcp-gap);
	margin-bottom:  40px;
	box-sizing:     border-box;
	overflow-x:     clip;
}

.ulcp {
	position:      relative;
	overflow:      hidden;
	flex:          1;
	min-width:     0;
	box-sizing:    border-box;
	border:        var(--ulcp-border-w) solid var(--ulcp-border-c);
	border-radius: var(--ulcp-radius);
	transition:    border-color .3s ease;
}

.ulcp__track {
	display:     flex;
	height:      100%;
	will-change: transform;
	transition:  transform .52s cubic-bezier(.4,0,.2,1);
}

.ulcp__slide {
	flex-shrink:  0;
	position:     relative;
	overflow:     hidden;
	box-sizing:   border-box;
	height:       100%;
	margin-right: var(--ulcp-gap);
	background:   #e0e0e0;
}
.ulcp__slide:last-child { margin-right: 0; }

/* Skeleton shimmer — composited */
.ulcp__slide::after {
	content:    '';
	position:   absolute;
	inset:      0;
	transform:  translateX(-100%);
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
	animation:  ulcp-skeleton 1.6s ease-in-out infinite;
	pointer-events: none;
}
.ulcp__slide:has(img.ulcp--loaded)::after { display: none; }

@keyframes ulcp-skeleton {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

.ulcp__slide img {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	opacity:    0;
	transition: opacity .4s ease;
}
.ulcp__slide img.ulcp--loaded { opacity: 1; }

/* Caption */
.ulcp__caption {
	position:   absolute;
	bottom:     0;
	left:       0;
	right:      0;
	z-index:    2;
	padding:    20px 22px 18px;
	background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 70%, transparent 100%);
	color:      #fff;
}
.ulcp__text   { margin: 0 0 6px; font-size: 15px; font-weight: 600; line-height: 1.45; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.ulcp__author { display: block; font-size: 12px; opacity: .8; font-weight: 500; letter-spacing: .02em; }
.ulcp[data-columns="2"] .ulcp__text,
.ulcp[data-columns="3"] .ulcp__text,
.ulcp[data-columns="4"] .ulcp__text  { font-size: 12px; }
.ulcp[data-columns="3"] .ulcp__author,
.ulcp[data-columns="4"] .ulcp__author { font-size: 10px; }

/* ── Flechas ──────────────────────────────────────────────────── */
.ulcp__prev,
.ulcp__next {
	width: 48px; height: 48px;
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background:   rgba(10,22,40,.82);
	color:        #fff;
	border:       1.5px solid rgba(255,255,255,.22);
	border-radius:50%;
	cursor:       pointer;
	padding:      0;
	z-index:      10;
	box-shadow:   0 4px 16px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.2);
	transition:   background .22s ease, border-color .22s ease, transform .22s ease, opacity .22s ease;
}
@supports (backdrop-filter: blur(1px)) {
	.ulcp__prev, .ulcp__next {
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
	}
}
.ulcp__prev:hover, .ulcp__next:hover {
	background:   rgba(34,81,204,.9);
	border-color: rgba(107,158,255,.5);
	transform:    scale(1.1);
	box-shadow:   0 6px 24px rgba(34,81,204,.4), 0 2px 8px rgba(0,0,0,.25);
}
.ulcp__prev:active, .ulcp__next:active { transform: scale(.96); }
.ulcp__prev:focus-visible, .ulcp__next:focus-visible { outline: 2px solid #6b9eff; outline-offset: 3px; }

.ulcp-outer--full-width  .ulcp__prev,
.ulcp-outer--full-screen .ulcp__prev { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); z-index: 20; }
.ulcp-outer--full-width  .ulcp__next,
.ulcp-outer--full-screen .ulcp__next { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); z-index: 20; }
.ulcp-outer--full-width  .ulcp__prev:hover,
.ulcp-outer--full-screen .ulcp__prev:hover,
.ulcp-outer--full-width  .ulcp__next:hover,
.ulcp-outer--full-screen .ulcp__next:hover { transform: translateY(-50%) scale(1.1); }

/* ── Dots ──────────────────────────────────────────────────────── */
.ulcp__dots {
	position: absolute; bottom: 14px; width: 100%; text-align: center; z-index: 10;
	display: flex; align-items: center; justify-content: center; gap: 7px;
}
.ulcp__dots button {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	/* Área táctil 44×44px mínimo WCAG 2.5.5 */
	min-width:  44px;
	min-height: 44px;
	padding:    0;
	background: transparent;
	border:     none;
	cursor:     pointer;
	position:   relative;
}
/* Dot visual dentro del área táctil */
.ulcp__dots button::before {
	content:       '';
	display:       block;
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    rgba(255,255,255,.4);
	transition:    background .3s ease, width .3s ease, border-radius .3s ease;
}
.ulcp__dots button.active::before  { background: #fff; width: 22px; border-radius: 4px; }
.ulcp__dots button:focus-visible   { outline: 2px solid rgba(255,255,255,.8); outline-offset: 2px; border-radius: 4px; }

/* ── Modos de visualización ───────────────────────────────────── */
.ulcp-outer--full-screen { width: 100vw; margin-left: calc(50% - 50vw); position: relative; overflow-x: visible; }
.ulcp-outer--half-screen { width: 70%; margin: 0 auto; }
.ulcp-outer--contained,
.ulcp-outer--full-width,
.ulcp-outer--half-screen,
.ulcp-outer--full-screen { padding-bottom: 20px; }

/* ── Marcos premium ──────────────────────────────────────────── */
.ulcp-outer--frame-minimal {
	border-radius: var(--ulcp-radius);
	box-shadow: 0 2px 16px rgba(0,0,0,calc(.18 * var(--ulcp-shadow-i))), 0 1px 4px rgba(0,0,0,calc(.10 * var(--ulcp-shadow-i)));
}
.ulcp-outer--frame-minimal .ulcp { border-radius: var(--ulcp-radius); }

.ulcp-outer--frame-elevated {
	border-radius: var(--ulcp-radius);
	box-shadow: 0 0 0 4px var(--ulcp-frame-color), 0 28px 72px rgba(0,0,0,calc(.36 * var(--ulcp-shadow-i))), 0 8px 24px rgba(0,0,0,calc(.22 * var(--ulcp-shadow-i)));
	transition: box-shadow .35s ease, transform .35s ease;
}
.ulcp-outer--frame-elevated:hover {
	box-shadow: 0 0 0 4px var(--ulcp-frame-color), 0 40px 90px rgba(0,0,0,calc(.44 * var(--ulcp-shadow-i))), 0 12px 32px rgba(0,0,0,calc(.28 * var(--ulcp-shadow-i)));
	transform: translateY(-4px);
}
.ulcp-outer--frame-elevated .ulcp { border-radius: calc(var(--ulcp-radius) - 2px); }

.ulcp-outer--frame-dramatic {
	border-radius: var(--ulcp-radius);
	box-shadow: 0 0 0 5px var(--ulcp-frame-color), 0 0 0 9px rgba(0,0,0,calc(.45 * var(--ulcp-shadow-i))), 0 40px 90px rgba(0,0,0,calc(.60 * var(--ulcp-shadow-i))), 0 12px 36px rgba(0,0,0,calc(.35 * var(--ulcp-shadow-i)));
	transition: box-shadow .35s ease, transform .35s ease;
}
.ulcp-outer--frame-dramatic:hover {
	box-shadow: 0 0 0 5px var(--ulcp-frame-color), 0 0 0 9px rgba(0,0,0,calc(.45 * var(--ulcp-shadow-i))), 0 56px 110px rgba(0,0,0,calc(.70 * var(--ulcp-shadow-i))), 0 16px 48px rgba(0,0,0,calc(.40 * var(--ulcp-shadow-i)));
	transform: translateY(-5px);
}
.ulcp-outer--frame-dramatic .ulcp { border-radius: calc(var(--ulcp-radius) - 2px); }

.ulcp-outer--frame-glow {
	border-radius: var(--ulcp-radius);
	box-shadow: 0 0 0 2px var(--ulcp-frame-color), 0 0 calc(28px * var(--ulcp-shadow-i)) var(--ulcp-frame-color), 0 20px 56px rgba(0,0,0,calc(.45 * var(--ulcp-shadow-i)));
	transition: box-shadow .35s ease;
}
.ulcp-outer--frame-glow:hover {
	box-shadow: 0 0 0 2px var(--ulcp-frame-color), 0 0 calc(52px * var(--ulcp-shadow-i)) var(--ulcp-frame-color), 0 28px 72px rgba(0,0,0,calc(.50 * var(--ulcp-shadow-i)));
}
.ulcp-outer--frame-glow .ulcp { border-radius: var(--ulcp-radius); }

.ulcp-outer--frame-polaroid {
	flex-direction: column !important; align-items: stretch !important;
	border-radius: 4px; background-color: var(--ulcp-frame-color) !important;
	padding: 10px 10px 52px !important; gap: 0 !important;
	box-shadow: 0 calc(12px * var(--ulcp-shadow-i)) calc(48px * var(--ulcp-shadow-i)) rgba(0,0,0,calc(.30 * var(--ulcp-shadow-i))), 0 calc(4px * var(--ulcp-shadow-i)) calc(14px * var(--ulcp-shadow-i)) rgba(0,0,0,calc(.20 * var(--ulcp-shadow-i)));
	transition: box-shadow .35s ease, transform .35s ease;
}
.ulcp-outer--frame-polaroid:hover {
	box-shadow: 0 calc(24px * var(--ulcp-shadow-i)) calc(64px * var(--ulcp-shadow-i)) rgba(0,0,0,calc(.38 * var(--ulcp-shadow-i))), 0 calc(6px * var(--ulcp-shadow-i)) calc(20px * var(--ulcp-shadow-i)) rgba(0,0,0,calc(.22 * var(--ulcp-shadow-i)));
	transform: rotate(-0.6deg) scale(1.012);
}
.ulcp-outer--frame-polaroid .ulcp { border-radius: 2px; width: 100% !important; flex: none !important; }
.ulcp-outer--frame-polaroid .ulcp__prev,
.ulcp-outer--frame-polaroid .ulcp__next { display: flex !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 30; }
.ulcp-outer--frame-polaroid .ulcp__prev { left: 14px !important; }
.ulcp-outer--frame-polaroid .ulcp__next { right: 14px !important; }
.ulcp-outer--frame-polaroid .ulcp__prev:hover { transform: translateY(-50%) scale(1.1) !important; }
.ulcp-outer--frame-polaroid .ulcp__next:hover { transform: translateY(-50%) scale(1.1) !important; }

.ulcp-outer--frame-elevated.ulcp-outer--full-width .ulcp__prev,
.ulcp-outer--frame-elevated.ulcp-outer--full-screen .ulcp__prev,
.ulcp-outer--frame-dramatic.ulcp-outer--full-width .ulcp__prev,
.ulcp-outer--frame-dramatic.ulcp-outer--full-screen .ulcp__prev,
.ulcp-outer--frame-glow.ulcp-outer--full-width .ulcp__prev,
.ulcp-outer--frame-glow.ulcp-outer--full-screen .ulcp__prev { left: 24px; }
.ulcp-outer--frame-elevated.ulcp-outer--full-width .ulcp__next,
.ulcp-outer--frame-elevated.ulcp-outer--full-screen .ulcp__next,
.ulcp-outer--frame-dramatic.ulcp-outer--full-width .ulcp__next,
.ulcp-outer--frame-dramatic.ulcp-outer--full-screen .ulcp__next,
.ulcp-outer--frame-glow.ulcp-outer--full-width .ulcp__next,
.ulcp-outer--frame-glow.ulcp-outer--full-screen .ulcp__next { right: 24px; }

/* ── Progreso autoplay ─────────────────────────────────────────── */
.ulcp__progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.15); z-index: 20; overflow: hidden; }
.ulcp__progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, #2251cc, #6b9eff); border-radius: 0 2px 2px 0; transition: width linear; }

/* ════════════════════════════════════════
   MODO PORTFOLIO — overlay (slider)
════════════════════════════════════════ */
.ulcp__ps-badge {
	position: absolute; top: 14px; right: 14px; z-index: 5;
	width: 52px; height: 52px; border-radius: 50%;
	background: rgba(4,11,26,.82); border: 2px solid #22c55e;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
	box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}
@supports (backdrop-filter: blur(1px)) {
	.ulcp__ps-badge { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}
.ulcp__ps-badge-num { font-size: 16px; font-weight: 900; color: #22c55e; line-height: 1; }
.ulcp__ps-badge-lbl { font-size: 8px; font-weight: 700; color: rgba(255,255,255,.55); letter-spacing: .06em; text-transform: uppercase; }

.ulcp__overlay {
	position: absolute; inset: 0; z-index: 3;
	padding: 18px 20px;
	display: flex; flex-direction: column; justify-content: flex-end;
	transform: translateY(100%);
	transition: transform .38s cubic-bezier(.4,0,.2,1);
	will-change: transform;
	overflow: hidden;
}
.ulcp__slide:hover .ulcp__overlay,
.ulcp__slide:focus-within .ulcp__overlay { transform: translateY(0); }
@media (hover: none) {
	.ulcp__overlay { transform: translateY(0); background: rgba(4,11,26,0.82) !important; }
}
.ulcp__ov-sector {
	display: inline-block; font-size: 10px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: #6b9eff; background: rgba(34,81,204,.25); border: 1px solid rgba(107,158,255,.3);
	border-radius: 20px; padding: 3px 10px; margin-bottom: 8px; align-self: flex-start;
}
.ulcp__ov-title { font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 10px; line-height: 1.2; letter-spacing: -.02em; }
.ulcp__ov-data  { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ulcp__ov-row   { display: flex; gap: 8px; font-size: 12px; line-height: 1.4; }
.ulcp__ov-row dt {
	font-weight: 700; color: rgba(255,255,255,.5); flex-shrink: 0; min-width: 56px;
	text-transform: uppercase; font-size: 9px; letter-spacing: .06em; padding-top: 2px;
}
.ulcp__ov-row dd           { color: rgba(255,255,255,.88); margin: 0; }
.ulcp__ov-row--result dt   { color: #6b9eff; }
.ulcp__ov-row--result dd   { color: #a5c4ff; font-weight: 700; }

/* ════════════════════════════════════════
   MASONRY REVEAL — portfolio profesional
   Layout: CSS Grid con tarjetas de alto variable
   Hover: info panel sube desde abajo (transform only)
   Click: lightbox nativo con <dialog>
   Entrada: IntersectionObserver + stagger delay
════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   MÓDULO 3 — MASONRY REVEAL  (rediseño v4.1.5)
   Card estilo: fondo blanco/claro, elevación 3D, "enciende" en hover
   Móvil: 1 columna, overlay siempre visible, botón Ver proyecto visible
══════════════════════════════════════════════════════════════ */

/* ── Wrapper ────────────────────────────────────────────────── */
.ulcp-masonry-outer {
	--ulcp-m-cols:      2;
	--ulcp-m-gap:       20px;
	--ulcp-m-accent:    #d4af37;
	--ulcp-radius:      16px;
	--ulcp-frame-color: #ffffff;
	--ulcp-shadow-i:    0.6;
	--ulcp-border-w:    0px;
	--ulcp-border-c:    #e2e8f0;

	width:         100%;
	box-sizing:    border-box;
	margin-bottom: 40px;
	padding:       32px 24px;
}

/* ── Grid ───────────────────────────────────────────────────── */
.ulcp-masonry {
	display:               grid;
	grid-template-columns: repeat(var(--ulcp-m-cols), minmax(0, 1fr));
	gap:                   var(--ulcp-m-gap);
	width:                 100%;
}

/* ── Card — núcleo ──────────────────────────────────────────── */
.ulcp-masonry__item {
	position:      relative;
	overflow:      hidden;
	border-radius: var(--ulcp-radius);
	border:        1.5px solid rgba(0,0,0,.07);
	aspect-ratio:  4 / 3;
	cursor:        pointer;
	background:    #fff;

	/* Sombra flotante base — efecto card Apple */
	box-shadow:
		0 1px 0 0 rgba(255,255,255,.9) inset,   /* highlight top edge */
		0 4px 6px  rgba(0,0,0,.06),
		0 10px 32px rgba(0,0,0,.10),
		0 2px 6px  rgba(0,0,0,.06);

	/* Entrada composited */
	opacity:   0;
	transform: translateY(24px) scale(.98);
	transition:
		opacity    .5s  cubic-bezier(.33,1,.68,1),
		transform  .5s  cubic-bezier(.33,1,.68,1),
		box-shadow .35s ease;
}

.ulcp-masonry__item.ulcp-m-visible {
	opacity:   1;
	transform: translateY(0) scale(1);
}

/* Tall card */
.ulcp-masonry__item.ulcp-m-tall {
	aspect-ratio: auto;
	grid-row:     span 2;
}

/* ── HOVER: la card "se enciende" ────────────────────────────── */
.ulcp-masonry__item:hover {
	transform: translateY(-4px) scale(1.01);
	box-shadow:
		0 1px 0 0 rgba(255,255,255,1) inset,
		0 0  0  1px rgba(var(--ulcp-m-accent-rgb, 212,175,55),.25),  /* aura color accent */
		0 8px 16px  rgba(0,0,0,.08),
		0 24px 56px rgba(0,0,0,.18),
		0 0 40px rgba(var(--ulcp-m-accent-rgb, 212,175,55),.12);     /* halo luminoso */
	border-color: rgba(212,175,55,.3);
	z-index: 2;
}

/* ── Imagen ────────────────────────────────────────────────────  */
.ulcp-masonry__img {
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center;
	display:         block;
	transition:      transform .6s cubic-bezier(.33,1,.68,1);
}
.ulcp-masonry__item:hover .ulcp-masonry__img {
	transform: scale(1.05);
}

/* ── Gradiente peek — siempre visible en reposo ─────────────── */
.ulcp-masonry__peek {
	position:   absolute;
	bottom: 0; left: 0; right: 0;
	height:     70px;
	background: linear-gradient(to top,
		rgba(0,0,0,.55) 0%,
		transparent 100%);
	z-index:    2;
	pointer-events: none;
	transition: opacity .35s ease;
}
.ulcp-masonry__item:hover .ulcp-masonry__peek { opacity: 0; }
@media (hover: none) { .ulcp-masonry__peek { opacity: 0; } }

/* Título peek */
.ulcp-masonry__title-peek {
	position:      absolute;
	bottom:        12px; left: 14px; right: 14px;
	z-index:       3;
	pointer-events: none;
	transition:    opacity .3s ease;
}
.ulcp-masonry__title-peek span {
	display:        inline-block;
	font-size:      13px;
	font-weight:    700;
	color:          #fff;
	text-shadow:    0 1px 4px rgba(0,0,0,.5);
	max-width:      100%;
	white-space:    nowrap;
	overflow:       hidden;
	text-overflow:  ellipsis;
}
.ulcp-masonry__item:hover .ulcp-masonry__title-peek { opacity: 0; }
@media (hover: none) { .ulcp-masonry__title-peek { opacity: 0; } }

/* ── Panel info — aparece en hover / siempre en touch ────────── */
.ulcp-masonry__info {
	position:    absolute;
	bottom: 0; left: 0; right: 0;
	z-index:     4;
	padding:     18px 16px 16px;
	background:  rgba(255,255,255,.97);
	/* Borde superior accent */
	border-top:  3px solid var(--ulcp-m-accent);
	transform:   translateY(100%);
	transition:  transform .38s cubic-bezier(.4,0,.2,1);
}
/* Hover desktop */
.ulcp-masonry__item:hover .ulcp-masonry__info,
.ulcp-masonry__item:focus-within .ulcp-masonry__info {
	transform: translateY(0);
}
/* Touch: siempre visible */
@media (hover: none) {
	.ulcp-masonry__info {
		transform:  translateY(0);
		position:   relative;
		transform:  none;
		border-top: 3px solid var(--ulcp-m-accent);
	}
}

/* Badge sector */
.ulcp-masonry__sector {
	display:        inline-block;
	font-size:      9px;
	font-weight:    700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color:          var(--ulcp-m-accent);
	border:         1px solid var(--ulcp-m-accent);
	border-radius:  20px;
	padding:        2px 9px;
	margin-bottom:  8px;
	opacity:        .9;
	align-self:     flex-start;
	background:     rgba(212,175,55,.07);
}

/* Título del proyecto */
.ulcp-masonry__proj-title {
	font-size:      15px;
	font-weight:    800;
	color:          #0f172a;     /* texto oscuro sobre fondo blanco */
	margin:         0 0 8px;
	line-height:    1.25;
	letter-spacing: -.02em;
}

/* Lista datos */
.ulcp-masonry__dl  { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ulcp-masonry__row { display: flex; gap: 8px; font-size: 11px; line-height: 1.4; }
.ulcp-masonry__dt  {
	font-weight: 700; color: #64748b; flex-shrink: 0; min-width: 52px;
	text-transform: uppercase; font-size: 8px; letter-spacing: .06em; padding-top: 2px;
}
.ulcp-masonry__dd { color: #334155; margin: 0; }
.ulcp-masonry__row.is-result .ulcp-masonry__dt { color: var(--ulcp-m-accent); opacity: .9; }
.ulcp-masonry__row.is-result .ulcp-masonry__dd { color: var(--ulcp-m-accent); font-weight: 700; }

/* PS Badge */
.ulcp-masonry__ps {
	position:       absolute;
	top:            12px; right: 12px;
	z-index:        6;
	width:          44px; height: 44px;
	border-radius:  50%;
	background:     rgba(255,255,255,.95);
	border:         2px solid #22c55e;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content:center;
	gap:            1px;
	box-shadow:     0 2px 8px rgba(34,197,94,.25), 0 0 0 3px rgba(34,197,94,.12);
}
@supports (backdrop-filter: blur(1px)) {
	.ulcp-masonry__ps { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}
.ulcp-masonry__ps-num { font-size: 14px; font-weight: 900; color: #16a34a; line-height: 1; }
.ulcp-masonry__ps-lbl { font-size: 6.5px; font-weight: 700; color: #64748b; letter-spacing: .06em; text-transform: uppercase; }

/* Botón Ver proyecto */
.ulcp-masonry__btn {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	margin-top:      10px;
	padding:         7px 14px;
	border-radius:   8px;
	background:      var(--ulcp-m-accent);
	color:           #000;
	font-size:       11px;
	font-weight:     700;
	text-decoration: none;
	border:          none;
	cursor:          pointer;
	transition:      opacity .18s, transform .18s;
	letter-spacing:  .04em;
	box-shadow:      0 2px 8px rgba(212,175,55,.35);
}
.ulcp-masonry__btn:hover { opacity: .88; transform: translateY(-1px); }

/* ── Lightbox nativo <dialog> ──────────────────────────────── */
.ulcp-lb {
	position:     fixed;
	inset:        0;
	margin:       auto;
	padding:      0;
	background:   #07111f;
	border:       none;
	max-width:    min(90vw, 1200px);
	max-height:   90vh;
	width:        auto;
	border-radius:16px;
	overflow:     hidden;
	box-shadow:   0 32px 80px rgba(0,0,0,.7);
	opacity:      0;
	transform:    scale(.94);
	transition:   opacity .3s ease, transform .3s cubic-bezier(.33,1,.68,1);
}
.ulcp-lb[open]   { opacity: 1; transform: scale(1); }
.ulcp-lb::backdrop {
	background:            rgba(0,0,0,.88);
	backdrop-filter:       blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.ulcp-lb__inner {
	display:    flex;
	max-height: 90vh;
}
.ulcp-lb__img-wrap { flex: 1; min-width: 0; overflow: hidden; }
.ulcp-lb__img { width: 100%; height: 100%; object-fit: contain; display: block; background: #040b1a; }

/* Panel lateral */
.ulcp-lb__panel {
	width:           300px;
	flex-shrink:     0;
	background:      #0d1b2e;
	padding:         28px 24px;
	display:         flex;
	flex-direction:  column;
	gap:             16px;
	overflow-y:      auto;
}
.ulcp-lb__sector-badge {
	display:        inline-block;
	font-size:      10px;
	font-weight:    700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color:          var(--ulcp-m-accent, #d4af37);
	border:         1px solid var(--ulcp-m-accent, #d4af37);
	border-radius:  20px;
	padding:        3px 10px;
	align-self:     flex-start;
}
.ulcp-lb__title {
	font-size:   22px;
	font-weight: 800;
	color:       #f1f5f9;
	margin:      0;
	line-height: 1.2;
}
.ulcp-lb__dl   { display: flex; flex-direction: column; gap: 10px; }
.ulcp-lb__row  { display: flex; flex-direction: column; gap: 2px; }
.ulcp-lb__dt   { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #64748b; }
.ulcp-lb__dd   { font-size: 13px; color: #cbd5e1; margin: 0; line-height: 1.45; }
.ulcp-lb__row.is-result .ulcp-lb__dt { color: var(--ulcp-m-accent, #d4af37); }
.ulcp-lb__row.is-result .ulcp-lb__dd { color: var(--ulcp-m-accent, #d4af37); font-weight: 700; }
.ulcp-lb__ps {
	display:         flex;
	align-items:     center;
	gap:             12px;
	padding:         14px 16px;
	border-radius:   10px;
	background:      rgba(34,197,94,.08);
	border:          1px solid rgba(34,197,94,.2);
	margin-top:      auto;
}
.ulcp-lb__ps-num  { font-size: 36px; font-weight: 900; color: #22c55e; line-height: 1; }
.ulcp-lb__ps-text { font-size: 11px; color: #94a3b8; line-height: 1.3; }

/* Botón cerrar lightbox */
.ulcp-lb__close {
	position:        absolute;
	top:             12px;
	right:           12px;
	z-index:         10;
	/* Círculo perfecto — width=height forzados, sin padding asimétrico */
	width:           36px !important;
	height:          36px !important;
	min-width:       36px;
	min-height:      36px;
	border-radius:   50% !important;
	padding:         0 !important;
	line-height:     1 !important;
	/* Colores explícitos — no heredados del tema */
	background:      #000000 !important;
	border:          2px solid rgba(255,255,255,.6) !important;
	color:           #ffffff !important;
	cursor:          pointer;
	display:         flex !important;
	align-items:     center !important;
	justify-content: center !important;
	gap:             0;
	transition:      background .2s ease, border-color .2s ease;
	box-sizing:      border-box !important;
	appearance:      none;
	-webkit-appearance: none;
}
/* SVG centrado sin distorsión */
.ulcp-lb__close svg {
	display:      block;
	width:        14px !important;
	height:       14px !important;
	flex-shrink:  0;
	pointer-events: none;
}
/* X blanca — stroke hardcoded, no currentColor */
.ulcp-lb__close svg path,
.ulcp-lb__close svg line {
	stroke:       #ffffff !important;
	stroke-width: 2.5 !important;
	fill:         none !important;
}
.ulcp-lb__close:hover,
.ulcp-lb__close:focus-visible {
	background:   #2251cc !important;
	border-color: rgba(255,255,255,.9) !important;
	outline:      none;
}

/* Responsive lightbox */
@media (max-width: 680px) {
	.ulcp-lb__inner   { flex-direction: column; }
	.ulcp-lb__panel   { width: 100%; max-height: 50vh; }
	.ulcp-lb__img-wrap { max-height: 45vh; }
}

/* Frames decorativos (se mantienen) */
.ulcp-masonry-outer.ulcp-mf-elevated { box-shadow: 0 0 0 4px var(--ulcp-frame-color), 0 20px 56px rgba(0,0,0,.14); border-radius: 20px; }
.ulcp-masonry-outer.ulcp-mf-glow     { box-shadow: 0 0 0 2px var(--ulcp-frame-color), 0 0 32px var(--ulcp-frame-color); border-radius: 20px; }

/* ── Responsive Masonry ──────────────────────────────────────── */
@media (max-width: 900px) {
	.ulcp-masonry-outer { padding: 24px 16px; }
	.ulcp-masonry { --ulcp-m-cols: 2; --ulcp-m-gap: 12px; }
	.ulcp-masonry__item.ulcp-m-tall { aspect-ratio: 4/3; grid-row: span 1; }
}
@media (max-width: 600px) {
	/* 1 columna en móvil */
	.ulcp-masonry { grid-template-columns: 1fr !important; }
	.ulcp-masonry__item { aspect-ratio: 4/3; }
	.ulcp-masonry__item.ulcp-m-tall { grid-row: span 1; }
	/* Panel siempre visible en 1 col */
	.ulcp-masonry__info {
		transform:  translateY(0) !important;
		position:   relative;
		border-top: 3px solid var(--ulcp-m-accent);
	}
	.ulcp-masonry__peek,
	.ulcp-masonry__title-peek { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   MÓDULO 4 — MASONRY SPOTLIGHT  (v4.1.9)
   Fix parpadeo definitivo: overlay position:absolute → altura
   de la card NUNCA cambia → CSS columns nunca se recalcula →
   cero flickering. Overlay pointer-events:none, btn:auto.
══════════════════════════════════════════════════════════════ */

.ulcp-spotlight-outer {
	--ulcp-sp-gap:    18px;
	--ulcp-sp-accent: #6366f1;
	--ulcp-sp-dur:    280ms;
	--ulcp-sp-ease:   cubic-bezier(.33,1,.68,1);
}

.ulcp-spotlight-outer {
	width:         100%;
	box-sizing:    border-box;
	margin-bottom: 40px;
	padding:       20px;
}

/* column-count explícito por breakpoint (no vars) */
.ulcp-spotlight                   { column-count: 3; column-gap: var(--ulcp-sp-gap); }
@media (max-width: 900px) { .ulcp-spotlight { column-count: 3; column-gap: 12px; } }
@media (max-width: 768px) { .ulcp-spotlight { column-count: 2; column-gap: 12px; } }
@media (max-width: 480px) { .ulcp-spotlight { column-count: 1; column-gap: 0;    } }

/* ── Card ─────────────────────────────────────────────────────
   overflow:hidden para clipar zoom imagen.
   SIN cambio de altura en hover → cero rebalanceo de columns.
──────────────────────────────────────────────────────────────*/
.ulcp-sp__item {
	break-inside:  avoid;
	margin-bottom: var(--ulcp-sp-gap);
	border-radius: 16px;
	overflow:      hidden;
	position:      relative;
	cursor:        pointer;
	display:       block;
	background:    #fff;
	border:        1.5px solid rgba(0,0,0,.07);
	box-shadow:
		0 1px 0 rgba(255,255,255,.9) inset,
		0 4px 8px  rgba(0,0,0,.06),
		0 12px 32px rgba(0,0,0,.09);
	/* Solo opacity + transform para la entrada stagger */
	opacity:   0;
	transform: translateY(20px);
	transition:
		opacity      460ms ease,
		transform    460ms var(--ulcp-sp-ease),
		box-shadow   var(--ulcp-sp-dur) ease,
		border-color var(--ulcp-sp-dur) ease;
}

.ulcp-sp__item.ulcp-sp-visible {
	opacity:   1;
	transform: translateY(0);
}

/* Hover: solo box-shadow + border — cero transform en la card
   → cero recomposición de capas → cero parpadeo              */
.ulcp-sp__item:hover {
	border-color: rgba(99,102,241,.5);
	box-shadow:
		0 1px 0 rgba(255,255,255,1) inset,
		0 0  0  1px rgba(99,102,241,.2),
		0 6px 18px  rgba(0,0,0,.1),
		0 20px 50px rgba(0,0,0,.14),
		0 0  44px rgba(99,102,241,.15);
	z-index: 3;
}

/* Spotlight dimming: solo filter, sin transform en otras cards */
@media (hover: hover) {
	.ulcp-spotlight-outer:hover .ulcp-sp__item:not(:hover) {
		filter:     brightness(.42) saturate(.2);
		box-shadow: none;
	}
}

/* ── Imagen ──────────────────────────────────────────────────*/
.ulcp-sp__img {
	display:    block;
	width:      100%;
	height:     auto;
	object-fit: cover;
	/* GPU layer propio — aísla el zoom del resto */
	transform:  translateZ(0);
	transition: transform .5s var(--ulcp-sp-ease);
}
.ulcp-sp__item:hover .ulcp-sp__img {
	transform: scale(1.05) translateZ(0);
}

/* Shimmer sobre la imagen (capa separada, no en el item) */
.ulcp-sp__img-wrap {
	position: relative;
}
.ulcp-sp__img-wrap::after {
	content:        '';
	position:       absolute;
	inset:          0;
	background:     linear-gradient(90deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
	transform:      translateX(-100%);
	animation:      ulcp-sp-shimmer 1.8s ease-in-out infinite;
	pointer-events: none;
	z-index:        1;
}
.ulcp-sp__item.ulcp-sp-loaded .ulcp-sp__img-wrap::after { display: none; }
@keyframes ulcp-sp-shimmer { to { transform: translateX(100%); } }

/* PS badge */
.ulcp-sp__ps {
	position:        absolute;
	top:             10px;
	right:           10px;
	width:           40px;
	height:          40px;
	border-radius:   50%;
	background:      rgba(255,255,255,.95);
	border:          2px solid #22c55e;
	color:           #16a34a;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             0;
	box-shadow:      0 2px 8px rgba(34,197,94,.25);
	z-index:         4;
}
.ulcp-sp__ps[data-ps-score="warning"] { border-color: #f59e0b; color: #b45309; }
.ulcp-sp__ps[data-ps-score="bad"]     { border-color: #ef4444; color: #dc2626; }
.ulcp-sp__ps-num { font-size: 10px; font-weight: 900; line-height: 1; }
.ulcp-sp__ps-lbl { font-size: 6px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #64748b; line-height: 1; }

/* ══════════════════════════════════════════════════════════
   OVERLAY — position:absolute SIEMPRE
   La card no cambia de altura → columns no rebalancea → NO FLICKER
   pointer-events:none en overlay, pointer-events:auto en btn
   → clicks en imagen abren lightbox, btn abre URL
══════════════════════════════════════════════════════════ */
.ulcp-sp__overlay {
	position:       absolute;
	bottom:         0;
	left:           0;
	right:          0;
	padding:        16px 14px 14px;
	background:     rgba(255,255,255,.97);
	border-top:     3px solid var(--ulcp-sp-accent);
	/* Estado oculto */
	opacity:        0;
	visibility:     hidden;
	transform:      translateY(4px);
	transition:
		opacity    var(--ulcp-sp-dur) ease,
		visibility var(--ulcp-sp-dur),
		transform  var(--ulcp-sp-dur) var(--ulcp-sp-ease);
	/* Clicks pasan a través al card (que abre lightbox) */
	pointer-events: none;
	z-index:        2;
}

/* Desktop: visible en hover CSS */
.ulcp-sp__item:hover .ulcp-sp__overlay {
	opacity:    1;
	visibility: visible;
	transform:  translateY(0);
}

/* Móvil: overlay aparece via JS .sp-tap-active (primer tap)
   igual que hover en desktop — imagen siempre visible primero */
.ulcp-sp__item.sp-tap-active .ulcp-sp__overlay {
	opacity:    1;
	visibility: visible;
	transform:  translateY(0);
}

/* Textos overlay */
.ulcp-sp__sector {
	display:        block;
	font-size:      9.5px;
	font-weight:    700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color:          var(--ulcp-sp-accent);
	margin-bottom:  4px;
	line-height:    1;
}

.ulcp-sp__title {
	margin:      0 0 7px;
	font-size:   clamp(12px, 1.3vw, 16px);
	font-weight: 700;
	color:       #0f172a;
	line-height: 1.2;
	display:             -webkit-box;
	-webkit-line-clamp:  2;
	-webkit-box-orient:  vertical;
	overflow:            hidden;
}

.ulcp-sp__dl  { margin: 4px 0 9px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ulcp-sp__row { display: flex; gap: 6px; font-size: 10px; line-height: 1.3; }
.ulcp-sp__dt  { font-weight: 700; color: #64748b; flex-shrink: 0; min-width: 50px; text-transform: uppercase; font-size: 8px; letter-spacing: .06em; padding-top: 1px; }
.ulcp-sp__dd  { color: #334155; margin: 0; }
.ulcp-sp__row.is-result .ulcp-sp__dt { color: var(--ulcp-sp-accent); }
.ulcp-sp__row.is-result .ulcp-sp__dd { color: var(--ulcp-sp-accent); font-weight: 700; }

/* ── Botón Ver proyecto ───────────────────────────────────────
   pointer-events:auto — clickable aunque el padre sea :none
   Normal:  dorado #d4af37 + texto blanco
   Hover:   azul   #1d4ed8 + texto blanco
──────────────────────────────────────────────────────────── */
.ulcp-sp__btn {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	padding:         7px 13px;
	border-radius:   8px;
	background:      #d4af37;
	color:           #ffffff;
	font-size:       11px;
	font-weight:     700;
	border:          none;
	cursor:          pointer;
	letter-spacing:  .04em;
	box-shadow:      0 2px 8px rgba(212,175,55,.3);
	text-decoration: none;
	transition:      background .2s ease, box-shadow .2s ease;
	pointer-events:  auto;   /* override del overlay pointer-events:none */
}
.ulcp-sp__btn:hover {
	background:  #1d4ed8;
	box-shadow:  0 3px 14px rgba(29,78,216,.4);
}
.ulcp-sp__btn svg { pointer-events: none; flex-shrink: 0; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 480px) {
	.ulcp-spotlight-outer { padding: 12px; }
	.ulcp-sp__item        { margin-bottom: 12px; }
	.ulcp-spotlight-outer:hover .ulcp-sp__item:not(:hover) {
		filter: none !important;
	}
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
	.ulcp-sp__item, .ulcp-sp__item.ulcp-sp-visible {
		transition: none !important; animation: none !important;
		opacity: 1; transform: none;
	}
	.ulcp-sp__overlay { transition: none !important; }
	.ulcp-sp__img { transition: none !important; }
	.ulcp-sp__img-wrap::after { animation: none !important; display: none; }
}

/* ── Correcciones de contraste WCAG AA ────────────────────────
   Dorado #d4af37 sobre blanco falla (2.08:1).
   Texto sobre fondos claros usa versión oscurecida #92700a (5.2:1)
──────────────────────────────────────────────────────────────*/

/* Masonry: sector badge sobre overlay blanco */
.ulcp-masonry__info .ulcp-masonry__sector,
.ulcp-masonry__info .ulcp-masonry__dt,
.ulcp-masonry__info .ulcp-masonry__row.is-result .ulcp-masonry__dt {
	color: #92700a;
}
.ulcp-masonry__info .ulcp-masonry__row.is-result .ulcp-masonry__dd {
	color: #92700a;
	font-weight: 700;
}

/* Spotlight: sector sobre overlay blanco */
.ulcp-sp__overlay .ulcp-sp__sector {
	color: #4f46e5;   /* indigo oscuro — contraste 7.5:1 sobre blanco */
}
.ulcp-sp__overlay .ulcp-sp__row.is-result .ulcp-sp__dt,
.ulcp-sp__overlay .ulcp-sp__row.is-result .ulcp-sp__dd {
	color: #4f46e5;
}

/* Lightbox: PS number necesita contraste sobre dark bg — ya OK (#22c55e sobre #0d1b2e ≈ 5.8:1) */

/* Touch targets mínimos — todos los botones interactivos */
.ulcp-masonry__btn,
.ulcp-sp__btn,
.ulcp__prev,
.ulcp__next {
	min-height: 44px;
}

/* Lightbox close: ya 36px — aumentar a 44px */
.ulcp-lb__close {
	width:      44px !important;
	height:     44px !important;
	min-width:  44px;
	min-height: 44px;
}