/* VLER Ficha — estilos de la ficha de producto (pestañas, PDF, ejemplos de uso, cotización). */
:root {
	--vler-azul: #1b3a6b;
	--vler-azul-claro: #2f6fd0;
	--vler-rojo: #d81f2a;
	--vler-texto: #404040;
	--vler-borde: #e6e6e6;
}

/* ---------- Pestaña: Aplicaciones ---------- */
.vler-usos__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 10px 32px;
}

.vler-usos__lista li {
	position: relative;
	margin: 0;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--vler-texto);
}

.vler-usos__lista li::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	width: 14px;
	height: 14px;
	background: var(--vler-azul-claro);
	-webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	        mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Pestaña: Características técnicas ---------- */
.vler-tecnicos {
	width: 100%;
	max-width: 760px;
	border-collapse: collapse;
	font-size: 15px;
}

.vler-tecnicos th,
.vler-tecnicos td {
	padding: 11px 16px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--vler-borde);
	line-height: 1.45;
}

.vler-tecnicos th {
	width: 38%;
	font-weight: 600;
	color: var(--vler-azul);
	background: #fafbfc;
}

.vler-tecnicos td {
	color: var(--vler-texto);
}

.vler-tecnicos tr:last-child th,
.vler-tecnicos tr:last-child td {
	border-bottom: 0;
}

.vler-tecnicos__nota {
	font-size: 13px;
	font-style: italic;
	color: #6b6b6b;
	background: #fafbfc;
}

/* ---------- Pestaña: Cómo usar ---------- */
.vler-pasos {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: vler-paso;
	max-width: 760px;
}

.vler-pasos li {
	position: relative;
	counter-increment: vler-paso;
	margin: 0 0 16px;
	padding: 0 0 0 44px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--vler-texto);
}

.vler-pasos li:last-child {
	margin-bottom: 0;
}

.vler-pasos li::before {
	content: counter(vler-paso);
	position: absolute;
	top: 0;
	left: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--vler-azul);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

/* ---------- Pestaña: Documentos ---------- */
.vler-docs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.vler-docs__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 24px;
	border: 1px solid var(--vler-azul);
	border-radius: 4px;
	background: transparent;
	color: var(--vler-azul);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.vler-docs__btn:hover,
.vler-docs__btn:focus {
	background: var(--vler-azul);
	color: #fff;
	text-decoration: none;
}

.vler-docs__btn:focus-visible {
	outline: 2px solid var(--vler-azul-claro);
	outline-offset: 3px;
}

.vler-docs__btn::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	background: currentColor;
	-webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10m0 0l-4-4m4 4l4-4M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	        mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10m0 0l-4-4m4 4l4-4M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Ejemplos de uso ---------- */
.vler-ejemplos { margin: 48px 0 0; }
.vler-ejemplos__titulo { margin: 0 0 20px; font-size: 26px; color: var(--vler-azul); }
.vler-ejemplos__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vler-ejemplos__item { margin: 0; }
.vler-ejemplos__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.vler-ejemplos__item figcaption { margin-top: 8px; font-size: 14px; color: var(--vler-texto); }

/* ---------- Cotizar ---------- */
.vler-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.vler-cta { display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border-radius: 4px; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; color: #fff; }
.vler-cta--cotizar { background: var(--vler-rojo); }
.vler-cta--whatsapp { background: #1f9d55; }
.vler-cta:hover, .vler-cta:focus { color: #fff; filter: brightness(.92); text-decoration: none; }

/* ---------- Catálogo sin precio: restos que el tema pinte por su cuenta ---------- */
.single-product .price,
.woocommerce-loop-product__link .price,
.wopb-product-price { display: none !important; }

@media (max-width: 767px) {
	.vler-usos__lista { grid-template-columns: 1fr; }
	.vler-tecnicos th { width: 45%; }
	.vler-docs__btn, .vler-cta { width: 100%; }
	.vler-ejemplos__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}