/* Nitancara Portfolio — Carrusel del front */
.np-carousel {
	--np-gap: 1rem;
	--np-radius: 14px;
	--np-arrow-bg: rgba(255, 253, 248, .12);
	--np-arrow-bg-hover: rgba(255, 253, 248, .92);
	--np-arrow-fg: #ece2d1;
	--np-arrow-fg-hover: #14110d;
	--np-dot: rgba(236, 226, 209, .35);
	--np-dot-active: #c89f57;
	position: relative;
	width: 100%;
}

.np-carousel__viewport {
	overflow: hidden;
	border-radius: var(--np-radius);
}

.np-carousel__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}

.np-carousel__slide {
	flex: 0 0 calc((100% - var(--np-gap) * (var(--np-per-view, 3) - 1)) / var(--np-per-view, 3));
	margin-right: var(--np-gap);
	list-style: none;
}
.np-carousel__slide:last-child { margin-right: 0; }

.np-carousel__figure {
	margin: 0;
	border-radius: var(--np-radius);
	overflow: hidden;
	background: #1d1812;
	aspect-ratio: 1 / 1;
	position: relative;
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .55);
}
.np-carousel__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.np-carousel__figure:hover .np-carousel__img { transform: scale(1.04); }

.np-carousel__caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: .9rem 1rem;
	font-family: "Fraunces", Georgia, serif;
	color: #fff;
	background: linear-gradient(0deg, rgba(10,8,5,.72) 0%, rgba(10,8,5,0) 100%);
	font-size: .95rem;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .35s ease, transform .35s ease;
}
.np-carousel__figure:hover .np-carousel__caption { opacity: 1; transform: none; }

/* Flechas */
.np-carousel__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px; height: 46px;
	display: grid; place-items: center;
	border: 1px solid rgba(236, 226, 209, .25);
	border-radius: 50%;
	background: var(--np-arrow-bg);
	color: var(--np-arrow-fg);
	cursor: pointer;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background-color .25s ease, color .25s ease, transform .25s ease, opacity .25s ease;
	z-index: 2;
}
.np-carousel__btn:hover {
	background: var(--np-arrow-bg-hover);
	color: var(--np-arrow-fg-hover);
}
.np-carousel__btn:disabled {
	opacity: .35;
	cursor: not-allowed;
}
.np-carousel__btn svg { width: 22px; height: 22px; }
.np-carousel__btn--prev { left: -22px; }
.np-carousel__btn--next { right: -22px; }
@media (max-width: 700px) {
	.np-carousel__btn--prev { left: 8px; }
	.np-carousel__btn--next { right: 8px; }
}

/* Dots */
.np-carousel__dots {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-top: 1.4rem;
}
.np-carousel__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--np-dot);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: background-color .25s ease, transform .25s ease, width .25s ease;
}
.np-carousel__dot:hover { background: rgba(236, 226, 209, .6); }
.np-carousel__dot.is-active {
	background: var(--np-dot-active);
	width: 22px;
	border-radius: 999px;
}

/* Responsive per-view: si caben menos, achicamos a 2 y luego 1 */
@media (max-width: 980px) {
	.np-carousel[data-per-view="4"] { --np-per-view: 3 !important; }
}
@media (max-width: 760px) {
	.np-carousel { --np-per-view: 2 !important; --np-gap: .75rem; }
}
@media (max-width: 520px) {
	.np-carousel { --np-per-view: 1 !important; --np-gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.np-carousel__track { transition: none !important; }
	.np-carousel__img { transition: none; }
	.np-carousel__caption { transition: none; }
}

/* Botón de "abrir" superpuesto a cada slide */
.np-carousel__open {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	background: transparent;
	border: 0; padding: 0; margin: 0;
	cursor: zoom-in;
	color: #fff;
	z-index: 1;
}
.np-carousel__open::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(10,8,5,.0) 60%, rgba(10,8,5,.0) 100%);
	transition: background-color .3s ease;
}
.np-carousel__figure:hover .np-carousel__open::after,
.np-carousel__open:focus-visible::after {
	background: rgba(10, 8, 5, .35);
}
.np-carousel__zoom {
	position: relative; z-index: 1;
	width: 44px; height: 44px;
	padding: 10px;
	background: rgba(255, 253, 248, .92);
	color: #14110d;
	border-radius: 50%;
	box-shadow: 0 8px 20px -8px rgba(0,0,0,.45);
	opacity: 0;
	transform: scale(.85);
	transition: opacity .25s ease, transform .25s ease;
}
.np-carousel__figure:hover .np-carousel__zoom,
.np-carousel__open:focus-visible .np-carousel__zoom {
	opacity: 1;
	transform: scale(1);
}

/* ===== Lightbox ===== */
html.np-lock,
html.np-lock body { overflow: hidden !important; }

.np-lightbox {
	position: fixed; inset: 0;
	display: none;
	z-index: 9999;
	color: #fff;
}
.np-lightbox.is-open { display: block; }
.np-lightbox__backdrop {
	position: absolute; inset: 0;
	background: rgba(10, 8, 5, .92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: zoom-out;
	animation: np-lb-fade .25s ease;
}
.np-lightbox__figure {
	position: absolute; inset: 0;
	margin: 0;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	padding: 64px 80px 80px;
	pointer-events: none;
	gap: 14px;
}
.np-lightbox__img {
	max-width: 100%;
	max-height: calc(100vh - 160px);
	width: auto; height: auto;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
	pointer-events: auto;
	animation: np-lb-pop .35s cubic-bezier(.22,.61,.36,1);
}
.np-lightbox__caption {
	display: flex; align-items: center; gap: 14px;
	color: rgba(255, 253, 248, .85);
	font-family: "Inter", system-ui, sans-serif;
	font-size: .92rem;
	pointer-events: auto;
}
.np-lightbox__title { font-weight: 500; }
.np-lightbox__title:empty { display: none; }
.np-lightbox__counter {
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
	color: rgba(255, 253, 248, .55);
}
.np-lightbox__btn {
	position: absolute;
	display: grid; place-items: center;
	width: 48px; height: 48px;
	border: 1px solid rgba(255, 253, 248, .25);
	border-radius: 50%;
	background: rgba(20, 17, 13, .55);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
	z-index: 2;
}
.np-lightbox__btn:hover {
	background: rgba(255, 253, 248, .92);
	color: #14110d;
	transform: scale(1.05);
}
.np-lightbox__btn svg { width: 22px; height: 22px; }
.np-lightbox__btn--close { top: 18px; right: 18px; }
.np-lightbox__btn--prev  { top: 50%; left: 18px; transform: translateY(-50%); }
.np-lightbox__btn--next  { top: 50%; right: 18px; transform: translateY(-50%); }
.np-lightbox__btn--prev:hover,
.np-lightbox__btn--next:hover { transform: translateY(-50%) scale(1.05); }

@media (max-width: 600px) {
	.np-lightbox__figure { padding: 56px 12px 72px; }
	.np-lightbox__btn { width: 42px; height: 42px; }
	.np-lightbox__btn--close { top: 10px; right: 10px; }
	.np-lightbox__btn--prev  { left: 10px; }
	.np-lightbox__btn--next  { right: 10px; }
	.np-lightbox__img { max-height: calc(100vh - 130px); }
}

@keyframes np-lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes np-lb-pop  { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.np-lightbox__backdrop, .np-lightbox__img { animation: none; }
	.np-lightbox__btn, .np-carousel__zoom { transition: none; }
}

/* ===== Rejilla (grid) de la página de portfolio ===== */
.np-grid {
	--np-grid-radius: 0;
	--np-grid-gap: clamp(.5rem, 1.2vw, 1rem);
	width: 100%;
}
.np-grid__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--np-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.np-grid__item { margin: 0; list-style: none; }

.np-grid__figure {
	position: relative;
	margin: 0;
	border-radius: var(--np-grid-radius);
	overflow: hidden;
	background: #1d1812;
	aspect-ratio: 1 / 1;
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .55);
}
.np-grid__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.np-grid__figure:hover .np-grid__img { transform: scale(1.04); }

.np-grid__caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: .9rem 1rem;
	color: #fff;
	background: linear-gradient(0deg, rgba(10,8,5,.72) 0%, rgba(10,8,5,0) 100%);
	font-size: .95rem;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .35s ease, transform .35s ease;
}
.np-grid__figure:hover .np-grid__caption { opacity: 1; transform: none; }

.np-grid__open {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	background: transparent;
	border: 0; padding: 0; margin: 0;
	cursor: zoom-in;
	color: #fff;
	z-index: 1;
}
.np-grid__open::after {
	content: "";
	position: absolute; inset: 0;
	background: rgba(10, 8, 5, 0);
	transition: background-color .3s ease;
}
.np-grid__figure:hover .np-grid__open::after,
.np-grid__open:focus-visible::after {
	background: rgba(10, 8, 5, .35);
}
.np-grid__zoom {
	position: relative; z-index: 1;
	width: 44px; height: 44px;
	padding: 10px;
	background: rgba(255, 253, 248, .92);
	color: #14110d;
	border-radius: 50%;
	box-shadow: 0 8px 20px -8px rgba(0,0,0,.45);
	opacity: 0;
	transform: scale(.85);
	transition: opacity .25s ease, transform .25s ease;
}
.np-grid__figure:hover .np-grid__zoom,
.np-grid__open:focus-visible .np-grid__zoom {
	opacity: 1;
	transform: scale(1);
}

/* Sin nombre de imagen: ni al pasar el cursor (rejilla/carrusel) ni al abrir (lightbox). */
.np-grid__caption,
.np-carousel__caption,
.np-lightbox__title { display: none; }

@media (max-width: 600px) {
	.np-grid__list { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.np-grid__img, .np-grid__caption, .np-grid__zoom { transition: none; }
}