/* Lightbox (Magnific Popup) para las imágenes "open lightbox" de WPBakery */

.dmasc-lightbox.mfp-bg {
	background: #0b0b0b;
}

/* Fundido de entrada y salida */
.dmasc-lightbox.mfp-bg,
.dmasc-lightbox .mfp-content {
	opacity: 0;
	transition: opacity .3s ease;
}
.dmasc-lightbox.mfp-bg.mfp-ready {
	opacity: .985;
}
.dmasc-lightbox.mfp-ready .mfp-content {
	opacity: 1;
}
.dmasc-lightbox.mfp-removing.mfp-bg,
.dmasc-lightbox.mfp-removing .mfp-content {
	opacity: 0;
}

/* Pantalla completa sin estorbos: la X+contador y el pie (CTA) se ven un
   momento al abrir o cambiar de foto y se desvanecen solos, dejando solo
   la imagen. Tocar la foto los trae de vuelta (ver dmascChromeBound en
   js/lightbox.js). Las flechas de navegación quedan fuera de este ciclo. */
.dmasc-lightbox .dmasc-mfp-topbar,
.dmasc-lightbox .mfp-bottom-bar {
	transition: opacity .35s ease;
}
.dmasc-lightbox.dmasc-chrome-hidden .dmasc-mfp-topbar,
.dmasc-lightbox.dmasc-chrome-hidden .mfp-bottom-bar {
	opacity: 0;
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	.dmasc-lightbox .dmasc-mfp-topbar,
	.dmasc-lightbox .mfp-bottom-bar {
		transition: none;
	}
}

/* Compensa la barra de scroll oculta en los elementos fixed mientras está abierto
   (la cabecera ya no es fixed sino sticky: se ajusta sola) */
html.dmasc-lightbox-open #topcontrol {
	margin-right: var(--dmasc-scrollbar, 0px);
}

/* Porto fuerza max-height:none en img.mfp-img: la imagen debe caber en pantalla */
.dmasc-lightbox.mfp-wrap img.mfp-img {
	width: auto;
	max-height: calc(100vh - 90px) !important;
	padding: 40px 0 45px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
/* Sombra de Magnific y fondo claro de carga de Porto: asomaban como una línea bajo la foto */
.dmasc-lightbox .mfp-figure:after,
.dmasc-lightbox .mfp-figure figure:before {
	display: none;
}
.dmasc-lightbox.mfp-wrap .mfp-image-holder .mfp-content {
	max-width: 92vw;
}

.dmasc-lightbox .mfp-bottom-bar {
	margin-top: -30px;
}

/* CTA "¿Buscas algo similar? Hablemos →" centrado bajo la foto. Sin alt
   visible (ver dmasc-mfp-topbar más abajo y js/lightbox.js): el pie ya
   solo tiene esto. */
.dmasc-lightbox .mfp-bottom-bar {
	padding: 0 24px;
	text-align: center;
}
.dmasc-lightbox .mfp-cta {
	display: inline-block;
	margin-top: 4px;
	color: #fff;
	font-family: Manrope, sans-serif;
	font-size: 14px;
	line-height: 1.5; /* Magnific pone line-height:0 en .mfp-figure */
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: rgba(255, 255, 255, .45);
	transition: text-decoration-color .2s ease;
}
.dmasc-lightbox .mfp-cta:hover,
.dmasc-lightbox .mfp-cta:focus {
	color: #fff;
	text-decoration-color: #fff;
}

/* X y contador en una sola esquina controlada: antes cada uno tenía su
   propia ancla (el close de Magnific relativo al contenedor, el contador
   relativo a la foto) y, según cuánto ancho ocupara la imagen, acababan
   solapándose — no solo en horizontal, pasaba en cualquier ancho si la
   foto llegaba a tocar la esquina. Con los dos dentro de la misma fila
   flex no hay matemática de posiciones que pueda fallar. */
.dmasc-lightbox .mfp-figure {
	position: relative;
}
.dmasc-lightbox .dmasc-mfp-topbar {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	/* Porto dibuja la X girando un "+" 45°; girada, su alcance real en
	   diagonal es ~36*√2/2 ≈ 25px desde el centro en vez de 18px — unos
	   7-8px más por cada lado de lo que parece a simple vista. Sin la
	   rotación se ve un "+" en vez de una X (ya lo probamos), así que la
	   dejamos y en su lugar ampliamos el hueco lo suficiente para que ese
	   alcance extra nunca llegue a tocar el contador. */
	gap: 20px;
}
.dmasc-lightbox .dmasc-mfp-topbar .mfp-close {
	position: static !important;
	width: 36px !important;
	height: 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 36px !important;
	text-align: center !important;
	background: none !important;
}
.dmasc-lightbox .mfp-counter {
	/* Magnific trae .mfp-counter{position:absolute;top:0;right:0} de serie
	   (pensado para cuando vivía suelto dentro de la franja inferior); sin
	   anularlo aquí, se sale de la fila flex de dmasc-mfp-topbar y se coloca
	   encima de la X en vez de al lado. */
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(0, 0, 0, .65);
	padding: 5px 10px 5px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
/* Icono de foto delante del número: deja claro a la primera que es un
   contador de fotos. Como pseudo-elemento no le afecta que Magnific
   reescriba el texto del contador en cada cambio de imagen. */
.dmasc-lightbox .mfp-counter::before {
	content: "";
	width: 13px;
	height: 13px;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7l1.5-3h5L16 7'/%3E%3Ccircle cx='12' cy='13.5' r='3.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Móvil: menos aire lateral en la franja, el resto ya no depende del ancho */
@media (max-width: 575px) {
	.dmasc-lightbox .mfp-bottom-bar {
		padding: 0 12px;
	}
}

/* Las flechas están fuera de .mfp-content: se funden aparte con el resto */
.dmasc-lightbox .mfp-arrow {
	opacity: 0;
	transition: opacity .3s ease;
}
.dmasc-lightbox.mfp-ready .mfp-arrow {
	opacity: .55;
}
.dmasc-lightbox.mfp-removing .mfp-arrow {
	opacity: 0;
}
.dmasc-lightbox .mfp-arrow:hover,
.dmasc-lightbox .mfp-arrow:focus {
	opacity: 1;
}

/* ==========================================================================
   Indicador "se puede ampliar" en las imágenes con lightbox: icono de flechas
   en la esquina inferior derecha y cursor de lupa.
   ========================================================================== */

/* Sin zoom en la foto al pasar el ratón: con imágenes pegadas de ancho fraccionario
   (p. ej. 3 × 336,33 px) el escalado dejaba ver una línea blanca en la unión. */
a.prettyphoto .vc_single_image-wrapper {
	position: relative;
	vertical-align: top;
}
a.prettyphoto,
a.prettyphoto img {
	cursor: zoom-in;
}

/* Solo el icono, sin caja: trazo blanco fino con una sombra suave.
   Discreto en reposo, pleno al pasar el ratón. */
a.prettyphoto .vc_single_image-wrapper::after {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7'/%3E%3C/svg%3E");
	content: "";
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 18px;
	height: 18px;
	background: var(--icon) center / contain no-repeat;
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, .55));
	opacity: .75;
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
}
a.prettyphoto:hover .vc_single_image-wrapper::after {
	opacity: 1;
	transform: scale(1.12);
}

/* Fotos con la esquina clara (p. ej. planos): icono oscuro. La clase la pone js/lightbox.js
   midiendo el brillo de la esquina (requiere imágenes del mismo dominio). */
a.prettyphoto.dmasc-ampliar--claro .vc_single_image-wrapper::after {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323201b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7'/%3E%3C/svg%3E");
	filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8));
	opacity: .7;
}
a.prettyphoto.dmasc-ampliar--claro:hover .vc_single_image-wrapper::after {
	opacity: 1;
}

/* ==========================================================================
   Galería con el móvil en horizontal (pantallas bajas): la foto ocupa toda la
   altura y la X, el CTA y el contador van encima, sobre un degradado. Anula
   también los estilos "móvil" de Magnific (.mfp-img-mobile), que ponen barras
   fijas con fondo. El deslizamiento con el dedo está en js/lightbox.js.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
	.dmasc-lightbox .mfp-container {
		padding-left: 0;
		padding-right: 0;
	}
	.dmasc-lightbox.mfp-wrap img.mfp-img {
		max-height: 100vh !important;
		max-height: 100dvh !important;
		padding: 0 !important;
		box-shadow: none;
	}
	.dmasc-lightbox .mfp-figure figure {
		position: relative;
		margin: 0;
	}
	.dmasc-lightbox .mfp-bottom-bar {
		position: absolute !important;
		top: auto !important;
		bottom: 0 !important;
		left: 0;
		right: 0;
		width: auto;
		margin: 0 !important;
		padding: 28px 18px 12px !important;
		background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)) !important;
		text-align: left;
	}
	/* La X y el contador ya van juntos en dmasc-mfp-topbar (regla general) —
	   aquí solo se ajusta un poco su tamaño, más compacto, para esta franja
	   más baja. */
	.dmasc-lightbox .dmasc-mfp-topbar {
		top: 6px;
		right: 8px;
	}
	.dmasc-lightbox .dmasc-mfp-topbar .mfp-close {
		width: 36px !important;
		height: 36px !important;
		line-height: 36px !important;
		text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
		opacity: .9;
	}
	.dmasc-lightbox .mfp-cta {
		margin: 0;
		font-size: 14px;
		white-space: nowrap;
	}
	.dmasc-lightbox .mfp-arrow {
		filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5));
	}
}