/* ══════════════════════════════════════════════════════════════════════
   Tipos de Puntadas (post 1383) — SCOPEADO exclusivamente a esta página.
   Grid de puntadas + botón "Ver aplicaciones" + lightbox propio + franja
   de título. No toca ningún CSS compartido con otras páginas.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Franja "Tipos de Puntadas" ────────────────────────────────────────
   Sin CSS legacy real localizable para este componente específico —
   reconstruida desde la captura de referencia: fondo gris muy claro,
   línea fucsia en el borde superior, texto oscuro alineado a la
   izquierda, altura compacta. */
.oz-tp-header {
	background: #f7f7f7;
	border-top: 3px solid #ff0047;
	padding: 14px 20px;
	margin-bottom: 20px;
}

.oz-tp-header__title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: #222222;
	text-align: left;
}

/* ── Ítem de puntada: sin card, sin fondo, sin borde — directo sobre el
   fondo blanco, tal como el original. ──────────────────────────────── */
.oz-tp-item__icon img {
	display: block;
	margin: 0 auto;
}

.oz-tp-item__name {
	text-align: center;
	color: #ff0047;
	font-weight: 700;
	font-size: 16px;
	margin: 10px 0 12px;
}

.oz-tp-item__btn-wrap {
	text-align: center;
}

.oz-tp-item__btn,
.oz-pb-text .oz-tp-item__btn {
	display: inline-block;
	background: #ff0047;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 3px;
	cursor: pointer;
}

.oz-tp-item__btn:visited,
.oz-pb-text .oz-tp-item__btn:visited {
	color: #ffffff;
}

.oz-tp-item__btn:hover,
.oz-tp-item__btn:focus,
.oz-pb-text .oz-tp-item__btn:hover,
.oz-pb-text .oz-tp-item__btn:focus {
	background: #d40039;
	color: #ffffff;
	text-decoration: none;
}

/* ── Lightbox propio ──────────────────────────────────────────────────
   Overlay oscuro, imagen centrada, limitada al viewport (nunca se sale
   de pantalla), proporción original intacta (max-width/max-height +
   object-fit:contain — nunca recorta). */
.oz-tp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
}

.oz-tp-lightbox.is-open {
	display: block;
}

.oz-tp-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.82);
}

.oz-tp-lightbox__stage {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	box-sizing: border-box;
	/* El stage cubre todo el viewport (para centrar la imagen), pero no
	   debe interceptar clics: solo la imagen y el botón cerrar deben ser
	   clicables, para que "clic en el fondo" (backdrop) funcione en
	   cualquier punto vacío del stage, no solo fuera de sus bordes. */
	pointer-events: none;
}

.oz-tp-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
	pointer-events: auto;
}

.oz-tp-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}

.oz-tp-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.3);
}

body.oz-tp-lightbox-open {
	overflow: hidden;
}