/* NV Masajistas — galería masonry + ficha emergente
   Colores y tipografías: cambia solo las variables del primer bloque. */

@font-face { font-family: 'NVM Lora'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/lora-latin-700-italic.woff2') format('woff2'); }
@font-face { font-family: 'NVM Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/lato-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'NVM Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/lato-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'NVM Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/lato-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'NVM Lato'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/lato-latin-700-italic.woff2') format('woff2'); }

.nvm,
.nvm-modal {
	--nvm-bg: #191616;          /* fondo de la ficha */
	--nvm-cream: #eae8da;       /* nombre */
	--nvm-text: #d6d4c1;        /* texto */
	--nvm-red: #a41416;         /* esencia y acentos */
	--nvm-font-title: 'NVM Lora', 'Lora', Georgia, 'Times New Roman', serif;
	--nvm-font-body: 'NVM Lato', 'Lato', 'Helvetica Neue', Arial, sans-serif;
	--nvm-radius: 20px;
	--nvm-gap: clamp(14px, 2.2vw, 30px);    /* separación entre columnas */
	--nvm-gap-y: clamp(22px, 2.8vw, 38px);  /* separación vertical entre fichas */
	--nvm-ease: cubic-bezier(.2, .7, .2, 1);
}

.nvm *,
.nvm-modal * { box-sizing: border-box; }

/* ---------- Galería masonry ---------- */

.nvm { --nvm-c: var(--nvm-cols, 4); width: 100%; margin: 0 auto; }
@media (max-width: 1024px) { .nvm { --nvm-c: var(--nvm-cols-tablet, 3); } }
@media (max-width: 600px)  { .nvm { --nvm-c: var(--nvm-cols-mobile, 2); --nvm-gap-y: 24px; } }

/* Sin JS: rejilla normal */
.nvm-grid {
	display: grid;
	grid-template-columns: repeat(var(--nvm-c), minmax(0, 1fr));
	column-gap: var(--nvm-gap);
	row-gap: var(--nvm-gap-y);
	align-items: start;
}

/* Con JS: masonry de columnas reales (orden de izquierda a derecha) */
.nvm-grid.is-masonry { display: block; position: relative; }
.nvm-grid.is-masonry > .nvm-card {
	position: absolute;
	top: 0;
	left: 0;
	width: calc((100% - (var(--nvm-c) - 1) * var(--nvm-gap)) / var(--nvm-c));
	opacity: 0;
}
.nvm-grid.is-laid > .nvm-card { opacity: 1; transition: opacity .6s var(--nvm-ease), transform .5s var(--nvm-ease); }

.nvm .nvm-card { margin: 0; padding: 0; }

.nvm .nvm-card__link {
	display: block;
	color: inherit;
	border-radius: var(--nvm-radius);
	outline: none;
}

/* Sin subrayado en ningún estado (Astra subraya los enlaces del contenido) */
.nvm .nvm-card__link,
.nvm .nvm-card__link:hover,
.nvm .nvm-card__link:focus,
.nvm .nvm-card__link:visited,
.nvm .nvm-card__name {
	text-decoration: none !important;
	border-bottom: 0 !important;
	box-shadow: none;
}

.nvm .nvm-card__media {
	display: block;
	overflow: hidden;
	border-radius: var(--nvm-radius);
	background: #0f0d0d;
	transform: translateZ(0); /* recorte limpio de esquinas en Safari */
}

.nvm .nvm-card__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	transition: transform .9s var(--nvm-ease), filter .6s var(--nvm-ease);
}

.nvm .nvm-card__name {
	margin: .9em 0 0;
	padding: 0;
	font-family: var(--nvm-font-title);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1.2rem, .95rem + .9vw, 1.75rem);
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	color: var(--nvm-cream);
}

@media (hover: hover) {
	.nvm a.nvm-card__link .nvm-card__img { filter: brightness(.9); }
	.nvm a.nvm-card__link:hover .nvm-card__img { transform: scale(1.04); filter: brightness(1); }
}
.nvm a.nvm-card__link:focus-visible .nvm-card__media { outline: 2px solid var(--nvm-red); outline-offset: 4px; }

.nvm .nvm-fichas,
.nvm .nvm-fichas[hidden] { display: none !important; }

/* ---------- Ficha emergente ---------- */

html.nvm-lock { overflow: hidden; }
html.nvm-lock body { padding-right: var(--nvm-sbw, 0px); }

.nvm-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.nvm-modal[hidden] { display: none; }

.nvm-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 8, 8, .84);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .35s var(--nvm-ease);
}

.nvm-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 1180px;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	display: flex;
	background: var(--nvm-bg);
	border: 1px solid rgba(234, 232, 218, .08);
	border-radius: 18px;
	box-shadow: 0 40px 120px rgba(0, 0, 0, .55);
	opacity: 0;
	transform: translateY(18px) scale(.985);
	transition: opacity .4s var(--nvm-ease), transform .5s var(--nvm-ease);
}

.nvm-modal.is-open .nvm-modal__backdrop { opacity: 1; }
.nvm-modal.is-open .nvm-modal__dialog { opacity: 1; transform: none; }

.nvm-modal__body {
	width: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(40px, 5.5vw, 76px) clamp(24px, 5.5vw, 84px);
	border-radius: inherit;
	scrollbar-width: thin;
	scrollbar-color: rgba(234, 232, 218, .2) transparent;
}

/* Reset de botones (Astra les da estilos propios) */
.nvm-modal .nvm-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}
.nvm-modal .nvm-btn:focus { outline: none; }
.nvm-modal .nvm-btn:focus-visible { outline: 2px solid var(--nvm-red); outline-offset: 3px; }

.nvm-modal .nvm-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(25, 22, 22, .6);
	color: var(--nvm-cream);
	transition: background-color .25s, transform .4s var(--nvm-ease);
}
.nvm-modal .nvm-modal__close:hover { background: var(--nvm-red); transform: rotate(90deg); }
.nvm-modal .nvm-modal__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* Maquetación de la ficha */
.nvm-ficha {
	display: grid;
	grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
	gap: clamp(32px, 6.5vw, 96px);
	align-items: start;
	color: var(--nvm-text);
	font-family: var(--nvm-font-body);
}

/* Galería */
.nvm-ficha__stage {
	position: relative;
	width: 100%;
	aspect-ratio: var(--nvm-ratio, 4 / 5);
	max-height: min(72vh, 700px);
	overflow: hidden;
	border-radius: var(--nvm-radius);
	background: #0f0d0d;
	transform: translateZ(0);
	touch-action: pan-y;
	user-select: none;
}

.nvm-modal .nvm-ficha__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity .55s var(--nvm-ease);
}
.nvm-modal .nvm-ficha__slide.is-active { opacity: 1; }

.nvm-modal .nvm-ficha__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: 0;
	-webkit-user-drag: none;
}

.nvm-modal .nvm-ficha__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(25, 22, 22, .55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: var(--nvm-cream);
	transform: translateY(-50%);
	transition: opacity .3s, background-color .25s;
}
.nvm-modal .nvm-ficha__nav--prev { left: 14px; }
.nvm-modal .nvm-ficha__nav--next { right: 14px; }
.nvm-modal .nvm-ficha__nav:hover { background: var(--nvm-red); }
.nvm-modal .nvm-ficha__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (hover: hover) {
	.nvm-modal .nvm-ficha__nav { opacity: 0; }
	.nvm-modal .nvm-ficha__stage:hover .nvm-ficha__nav,
	.nvm-modal .nvm-ficha__nav:focus-visible { opacity: 1; }
}

.nvm-ficha__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 14px;
}

.nvm-modal .nvm-ficha__thumb {
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: 10px;
	opacity: .45;
	transition: opacity .3s, box-shadow .3s;
}
.nvm-modal .nvm-ficha__thumb:hover { opacity: .8; }
.nvm-modal .nvm-ficha__thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px var(--nvm-bg), 0 0 0 4px var(--nvm-red); }
.nvm-modal .nvm-ficha__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }

/* Datos */
.nvm-ficha__info { padding-top: .1em; }

.nvm-modal .nvm-ficha__name {
	margin: 0 0 .55em;
	padding: 0;
	font-family: var(--nvm-font-title);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(2.2rem, 1.6rem + 2vw, 2.8rem);
	line-height: 1.05;
	letter-spacing: 0;
	text-transform: none;
	color: var(--nvm-cream);
}

.nvm-modal .nvm-ficha__esencia {
	margin: 0 0 2.1em;
	padding: 0;
	font-family: var(--nvm-font-body);
	font-weight: 400;
	font-size: .95rem;
	line-height: 1.55;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--nvm-red);
}

.nvm-modal .nvm-ficha__desc {
	font-family: var(--nvm-font-body);
	font-size: 1.09rem;
	line-height: 1.26;
	color: var(--nvm-text);
}
.nvm-modal .nvm-ficha__desc p { margin: 0 0 1em; color: inherit; font: inherit; }
.nvm-modal .nvm-ficha__desc p:last-child { margin-bottom: 0; }

.nvm-modal .nvm-ficha__especialidades {
	margin: 2.6em 0 0;
	font-family: var(--nvm-font-body);
	font-style: italic;
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--nvm-text);
}
.nvm-modal .nvm-ficha__especialidades strong { font-weight: 700; color: inherit; }

/* Móvil / tablet vertical: ficha a pantalla completa, galería arriba */
@media (max-width: 900px) {
	.nvm-modal { padding: 0; }
	.nvm-modal__dialog {
		max-width: none;
		height: 100%;
		max-height: none;
		border: 0;
		border-radius: 0;
	}
	.nvm-modal__body { padding: 68px 20px 40px; }
	.nvm-modal .nvm-modal__close { top: 12px; right: 12px; }
	.nvm-ficha { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.nvm-ficha__stage { max-height: 62vh; }
	.nvm-modal .nvm-ficha__nav { opacity: 1; }
	.nvm-modal .nvm-ficha__thumb { width: 60px; height: 60px; }
	.nvm-modal .nvm-ficha__esencia { font-size: .85rem; letter-spacing: .2em; margin-bottom: 1.6em; }
}

@media (prefers-reduced-motion: reduce) {
	.nvm *, .nvm-modal *, .nvm-modal__dialog, .nvm-modal__backdrop { transition: none !important; }
}