/*
 * Ficha de producto (templates/single-product.html).
 *
 * RÉPLICA de la maqueta aprobada por el dueño el 29-07-2026: prototypes/ficha.html. Los
 * valores de esta hoja —tamaños, pesos, colores, radios, espaciados y el único punto de
 * quiebre en 899/900px— están copiados literalmente de esa maqueta, no interpretados. Donde
 * el marcado de WordPress o WooCommerce impide un selector idéntico (el precio va envuelto
 * en `.woocommerce-Price-amount`, la cantidad en `.quantity`), el VALOR se mantiene exacto y
 * sólo cambia el selector necesario para alcanzarlo.
 *
 * El `zoom:.85` que la maqueta aplica al `body` entre 900 y 1599px ya vive en style.css para
 * todo el sitio: acá no se repite.
 *
 * ÁMBITO. La maqueta usa nombres cortos (`.top`, `.panel`, `.app`, `.doc`) porque es una
 * página suelta. Acá cada regla cuelga de `.nied-ficha` para que esos nombres no se escapen
 * al resto del sitio. Las tarjetas de "Equipos relacionados" siguen siendo las del catálogo
 * (`.nied-product-card`, en catalog.css): un solo dibujo de tarjeta para todo el sitio.
 *
 * MÁRGENES. WordPress inyecta `margin-block-start: var(--wp--style--global--block-gap)` a los
 * hijos de todo grupo `is-layout-flow` con especificidad cero, pero llega igual. El ritmo de
 * la ficha lo fijan los `gap` de la maqueta, así que esos márgenes se neutralizan de una vez,
 * arriba del archivo, en cada contenedor nuevo.
 */

.nied-ficha {
	--nied-ink: var(--wp--preset--color--navy, #0b1f38);
	--nied-blue: var(--wp--preset--color--blue, #0868e8);
	--nied-blue-dark: var(--wp--preset--color--blue-dark, #0453bd);
	--nied-price: #0a47a8;
	--nied-orange: var(--wp--preset--color--orange, #f58220);
	--nied-orange-dark: #d96808;
	--nied-canvas: var(--wp--preset--color--canvas, #f4f7fb);
	--nied-line: #dce5ee;
	--nied-line-soft: #eef2f7;
	--nied-line-strong: #c3d5e7;
	--nied-muted: #60758c;
	--nied-body: #3f556e;
	--nied-ok: #147a55;
	--nied-warn: #a85b00;
	/* Mismos dos colores que la etiqueta de descuento de la tarjeta del catálogo. Están
	   declarados allá bajo `.nied-catalog-page`, que no aplica en la ficha, así que se repiten
	   acá: si alguna vez cambian, hay que cambiarlos en los dos lados. */
	--nied-off: #b0251a;
	--nied-off-bg: #fdecea;
	--nied-white: var(--wp--preset--color--white, #fff);
	--nied-badge-blue-bg: #e4f0ff;
	--nied-badge-blue-text: #075abd;
	--nied-badge-orange-bg: #fff0df;
	--nied-badge-orange-text: #a75500;
	--nied-shadow-card: 0 10px 28px rgba(11, 31, 56, 0.08);
	--nied-radius-sm: 8px;
	--nied-radius-md: 11px;
	--nied-radius-lg: 13px;
	--nied-focus: 0 0 0 3px rgba(8, 104, 232, 0.32);

	padding-block: 0 40px;
}

/* La ficha es una sola columna de 1240px. El layout `constrained` de WordPress recorta a los
   760px del contentSize todo hijo que no venga marcado como ancho; acá no hay columna
   angosta que proteger, así que se levanta el techo para todos. */
.nied-ficha.is-layout-constrained > * {
	max-width: var(--wp--style--global--wide-size, 1240px);
	margin-block: 0;
}

.nied-ficha :is(p, h1, h2, h3, dl, dd, dt, figure) {
	margin: 0;
}

.nied-ficha :is(.top, .gcol, .sum, .pbox) > * {
	margin-block: 0;
}

.nied-ficha img {
	display: block;
	max-width: 100%;
	height: auto;
}

.nied-ficha :is(a, button, input, summary):focus-visible {
	outline: 2px solid transparent;
	box-shadow: var(--nied-focus);
	border-radius: var(--nied-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
	.nied-ficha * {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------- Migas ---------- */
.nied-ficha .crumb {
	padding: 18px 0 14px;
	color: var(--nied-muted);
	font-size: 12.5px;
}
.nied-ficha .crumb a {
	color: var(--nied-muted);
	text-decoration: none;
}
.nied-ficha .crumb a:hover {
	text-decoration: underline;
}
.nied-ficha .nied-ficha-notices:empty {
	display: none;
}

/* ---------- Bloque de decisión ----------
   La tira de datos clave cuelga bajo la galería y llena el vacío que quedaba ahí (criterio
   §54). Las dos columnas estiran igual y el último bloque de cada una se pega al pie, así la
   tira cierra exactamente a la misma altura que el recuadro de garantía. */
.nied-ficha .top {
	display: grid;
	gap: 20px;
	padding-bottom: 8px;
}
.nied-ficha .gcol,
.nied-ficha .sum {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

@media (min-width: 900px) {
	.nied-ficha .top {
		grid-template-columns: minmax(0, 1fr) minmax(430px, .85fr);
		gap: 40px;
		align-items: stretch;
	}
	/* El sobrante de alto se lo come la tarjeta de la foto, no un hueco.
	   Empujar el último bloque de la columna izquierda hacia abajo alineaba la tira con el
	   recuadro de garantía, pero abría un vacío entre la foto y la tira — y cuando el
	   producto no tiene datos clave, empujaba la foto entera dejando el hueco arriba. */
	.nied-ficha .gcol > .gal {
		flex: 1 1 auto;
	}
	.nied-ficha .sum > :last-child {
		margin-top: auto;
	}
}

/* En móvil la tira no se puede meter entre la foto y el precio: la columna se disuelve y el
   orden queda foto → nombre → precio → garantía → datos clave. */
@media (max-width: 899px) {
	.nied-ficha .gcol {
		display: contents;
	}
	.nied-ficha .gal {
		order: 1;
	}
	.nied-ficha .sum {
		order: 2;
	}
	.nied-ficha .qs-grid {
		order: 3;
	}
}

/* ---------- Galería ---------- */
.nied-ficha .gal {
	display: flex;
	flex-direction: column;
	padding: 18px;
	border: 1px solid var(--nied-line);
	border-radius: 16px;
	background: var(--nied-white);
}
/* El alto lo pone el recuadro, no la foto: el catálogo trae imágenes de tamaños muy
   distintos y sin una caja fija cada ficha medía otra cosa. `min-height` es el alto de la
   maqueta; `flex:1` deja que crezca si la columna de compra es más alta que la foto. */
.nied-ficha .gmain {
	position: relative;
	flex: 1 1 auto;
	min-height: 420px;
	display: grid;
	place-items: center;
}
.nied-ficha .gmain img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	cursor: zoom-in;
}
/* Lupa: la foto sobre un velo, siempre dentro de la pantalla, con flechas y miniaturas para
   recorrer las demás (dueño, 19-09). Es un <dialog> colgado de <html> y no de <body> a
   propósito: entre 900 y 1599px el cuerpo lleva `zoom:.85`, que también escala lo que está
   posicionado fijo, y la foto terminaba más grande que la ventana. Fuera de `.nied-ficha` no
   le llegan sus variables, así que los colores van directos; esquinas rectas, como la ficha. */
.nied-lupa {
	inset: 0;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 64px 12px 12px;
	border: 0;
	box-sizing: border-box;
	overflow: hidden;
	overscroll-behavior: contain;
	background: rgba(11, 31, 56, .92);
	color: #fff;
	font-family: var(--wp--preset--font-family--sans, system-ui, sans-serif);
}
.nied-lupa::backdrop {
	background: transparent;
}
.nied-lupa[open] {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	gap: 12px;
}
.nied-lupa__foto {
	position: relative;
	min-width: 0;
	min-height: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nied-lupa__foto img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	background: #fff;
}
/* Videos de «Nied en operación» dentro del visor; su miniatura lleva ▶. */
.nied-lupa__video {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	background: #000;
}
.nied-lupa__th--video {
	position: relative;
}
.nied-lupa__th--video::after {
	content: "▶";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 22px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}
.nied-lupa__ir,
.nied-lupa__cerrar {
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font: inherit;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.nied-lupa__ir {
	position: absolute;
	top: 50%;
	margin-top: -24px;
	background: rgba(11, 31, 56, .6);
	font-size: 32px;
}
.nied-lupa__ir--prev {
	left: 4px;
}
.nied-lupa__ir--next {
	right: 4px;
}
.nied-lupa__cerrar {
	position: absolute;
	top: 12px;
	right: 12px;
}
.nied-lupa__ir:hover,
.nied-lupa__ir:focus-visible,
.nied-lupa__cerrar:hover,
.nied-lupa__cerrar:focus-visible {
	background: rgba(255, 255, 255, .26);
}
.nied-lupa__cuenta {
	position: absolute;
	left: 50%;
	bottom: 4px;
	transform: translateX(-50%);
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(11, 31, 56, .6);
	font-size: 13px;
}
/* Pista de teclado: unos 3 segundos cada vez que se abre, y sólo con mouse (dueño, 19-09). */
.nied-lupa__pista {
	display: none;
}
@media (hover: hover) and (pointer: fine) {
	.nied-lupa__pista {
		position: absolute;
		left: 50%;
		bottom: 44px;
		transform: translateX(-50%);
		display: block;
		margin: 0;
		padding: 8px 16px;
		border-radius: 999px;
		background: rgba(11, 31, 56, .85);
		color: #fff;
		font-size: 14px;
		white-space: nowrap;
		pointer-events: none;
		opacity: 0;
		animation: nied-lupa-pista 3.2s ease forwards;
	}
}
@keyframes nied-lupa-pista {
	10%, 75% { opacity: 1; }
	100% { opacity: 0; visibility: hidden; }
}
.nied-lupa__ths {
	display: flex;
	gap: 8px;
	overflow: auto;
	scrollbar-width: thin;
}
.nied-lupa__th {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	padding: 4px;
	border: 2px solid transparent;
	background: #fff;
	opacity: .55;
	cursor: pointer;
}
.nied-lupa__th img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.nied-lupa__th.on {
	border-color: var(--nied-orange);
	opacity: 1;
}
.nied-lupa__th:hover,
.nied-lupa__th:focus-visible {
	opacity: 1;
}
/* Escritorio: las miniaturas en columna a la izquierda, lejos de la × (dueño, 19-09). */
@media (min-width: 900px) {
	.nied-lupa {
		padding: 32px 76px;
	}
	.nied-lupa:has(.nied-lupa__ths) {
		padding-left: 24px;
	}
	.nied-lupa[open]:has(.nied-lupa__ths) {
		grid-template-columns: 72px minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr);
		gap: 24px;
	}
	.nied-lupa:has(.nied-lupa__ths) .nied-lupa__foto {
		grid-area: 1 / 2;
	}
	.nied-lupa__ths {
		grid-area: 1 / 1;
		flex-direction: column;
	}
	.nied-lupa__th {
		width: 72px;
		height: 72px;
	}
}

.nied-ficha .gbadge {
	position: absolute;
	left: 0;
	top: 0;
	padding: 6px 9px;
	border-radius: 6px;
	background: var(--nied-badge-blue-bg);
	color: var(--nied-badge-blue-text);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
/* El porcentaje de descuento, en el mismo lugar que en la tarjeta del catálogo: arriba a la
   derecha de la foto, a la altura de "Disponible". Ahí ya lo reconoce el que viene de la
   grilla, y deja libre el bloque de precio. */
.nied-ficha .goff {
	position: absolute;
	z-index: 2;
	right: 0;
	top: 0;
	padding: 6px 9px;
	border-radius: 6px;
	background: var(--nied-off-bg);
	color: var(--nied-off);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.2;
}
.nied-ficha .ths {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
.nied-ficha .th {
	width: 72px;
	height: 72px;
	padding: 6px;
	border: 1px solid var(--nied-line);
	border-radius: 9px;
	background: var(--nied-white);
	cursor: pointer;
}
.nied-ficha .th.on {
	border-color: var(--nied-blue);
	box-shadow: 0 0 0 1px var(--nied-blue);
}
.nied-ficha .th img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---------- Panel de compra ---------- */
.nied-ficha .marca {
	color: var(--nied-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
}
.nied-ficha .sum h1 {
	color: var(--nied-ink);
	font-size: 30px;
	font-weight: 650;
	line-height: 1.18;
	letter-spacing: -.01em;
}
.nied-ficha .lead,
.nied-ficha .lead p {
	color: var(--nied-body);
	font-size: 14.5px;
	line-height: 1.6;
}
.nied-ficha .lead p {
	margin: 0;
}

.nied-ficha .pbox {
	padding: 18px;
	border: 1px solid var(--nied-line);
	border-radius: 14px;
	background: var(--nied-white);
}
.nied-ficha .precio {
	color: var(--nied-price);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.015em;
	font-variant-numeric: tabular-nums;
}
/* El precio de oferta llega envuelto en <del>/<ins>: el vigente manda y el anterior se
   tacha, en el mismo cuerpo tipográfico que usa la tarjeta del catálogo. */
.nied-ficha .precio del,
.nied-ficha .precio del bdi {
	color: var(--nied-muted);
	font-size: 17px;
	font-weight: 500;
	text-decoration: line-through;
}
.nied-ficha .precio ins,
.nied-ficha .precio ins bdi {
	text-decoration: none;
}
.nied-ficha .precio .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
/* Precio de un producto solo-cotización: lo emite Nied Core en lugar del monto. */
.nied-ficha .precio .nied-quote-price {
	color: var(--nied-badge-orange-text);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0;
}
.nied-ficha .neto {
	margin-top: 4px;
	color: var(--nied-muted);
	font-size: 12.5px;
}
.nied-ficha .neto .woocommerce-Price-amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* Disponibilidad: el badge de modalidad comercial de Nied Core, sin su píldora, para que
   lea como la línea de estado de la maqueta. La marca de estado va delante, igual que en
   la tarjeta del catálogo: ✓ para lo disponible, ● para lo que se configura. */
.nied-ficha .disp {
	margin-top: 12px;
	color: var(--nied-ok);
	font-size: 13px;
	font-weight: 600;
}

/* Aviso de color: una ficha cubre todos los colores de su formato, y el cliente tiene que confirmar
   cuál hay antes de pagar. Va pegado a la disponibilidad, que es lo último que mira antes de comprar. */
.nied-ficha .color-aviso { margin: 10px 0 0; padding: 10px 12px; border: 1px solid #e3d3bd; background: #fdf6ec; color: #5b4525; font-size: .82rem; line-height: 1.5; }
.nied-ficha .color-aviso b { color: #43331b; }
.nied-ficha .color-aviso a { color: var(--nied-blue, #244d70); font-weight: 700; }
.nied-ficha .disp .nied-commercial-badge {
	display: inline;
	padding: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: 0;
	text-transform: none;
}
.nied-ficha .disp .nied-commercial-badge::before {
	content: "\2713\00a0";
}
.nied-ficha .disp .nied-commercial-badge.is-quote-only {
	color: var(--nied-warn);
}
.nied-ficha .disp .nied-commercial-badge.is-quote-only::before {
	content: "\25CF\00a0";
}
.nied-ficha .disp.is-out {
	color: var(--nied-muted);
}
/* Agotado ya lo dice la línea `.disp`, con qué hacer; el aviso de WooCommerce sobra. */
.nied-ficha .pbox .stock.out-of-stock {
	display: none;
}
.nied-ficha .gbadge.is-out {
	background: #eef1f4;
	color: var(--nied-muted);
}
.nied-ficha .disp span {
	color: var(--nied-muted);
	font-weight: 500;
}

/* El ahorro es un dato, no un grito: mismo peso que la línea del neto, justo debajo. El
   porcentaje no va acá sino sobre la foto (`.goff`), donde ya lo vio en la grilla y donde no
   le pelea el golpe de vista al precio azul ni al "Disponible" verde. */
.nied-ficha .ahorro {
	margin-top: 2px;
	color: var(--nied-muted);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.4;
}

/* ---------- Cuenta regresiva de la oferta ----------
   Va bajo los botones y sin fondo de color: junto al precio y en naranja competía con la
   cifra y con la disponibilidad, que es lo que se lee primero. Con sólo el encuadre gris se
   lee como un dato más de la caja, y la urgencia la sigue poniendo el reloj corriendo — que
   es la única parte que de verdad la necesita. */
.nied-ficha .cuenta {
	margin-top: 12px;
	padding: 12px 14px;
	border: 1px solid var(--nied-line);
	border-radius: 10px;
	background: transparent;
}
.nied-ficha .cuenta__aviso {
	margin: 0 0 8px;
	color: var(--nied-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.nied-ficha .cuenta__cajas {
	display: flex;
	gap: 8px;
}
.nied-ficha .cuenta__caja {
	flex: 1 1 0;
	min-width: 0;
	padding: 7px 4px;
	border-radius: 8px;
	background: var(--nied-line-soft);
	text-align: center;
}
.nied-ficha .cuenta__caja b {
	display: block;
	color: var(--nied-ink);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.15;
	/* Ancho fijo por dígito: sin esto los números bailan a cada segundo. */
	font-variant-numeric: tabular-nums;
}
.nied-ficha .cuenta__caja span {
	display: block;
	margin-top: 2px;
	color: var(--nied-muted);
	font-size: 10.5px;
	font-weight: 500;
}
.nied-ficha .cuenta__fecha {
	margin: 8px 0 0;
	color: var(--nied-muted);
	font-size: 11.5px;
	line-height: 1.4;
}

/* ---------- Formulario de compra de WooCommerce ----------
   WooCommerce encola sus estilos de bloque después de esta hoja y le pone margen propio al
   formulario: dejaba la cantidad pegada al "Disponible", el botón pegado a la cantidad y 32px
   sueltos antes de "Cotizar". Se repite la clase para ganar por especificidad, que es más
   barato de leer que un `!important` y no deja una bomba para el próximo que toque esto.
   Ritmo de la maqueta: 14 disponibilidad→cantidad, 12 cantidad→comprar, 12 comprar→cotizar. */
.nied-ficha .pbox form.cart.cart {
	display: block;
	margin: 0;
}
.nied-ficha .pbox form.cart .quantity.quantity {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	margin-bottom: 0;
}
/* `.woocommerce div.product form.cart button.single_add_to_cart_button` pesa (0,4,3) y le
   pone margen cero: hay que pasarlo por cantidad de clases, no de etiquetas. */
.nied-ficha .pbox.pbox form.cart button.single_add_to_cart_button {
	margin-top: 12px;
}
.nied-ficha .pbox a.nied-product-quote,
.nied-ficha .pbox a.nied-product-pdf {
	margin-top: 12px;
}
.nied-ficha .pbox form.cart .quantity.hidden {
	display: none;
}
/* La etiqueta de WooCommerce dice "{nombre del producto} cantidad" y vive oculta para los
   lectores de pantalla: se queda así. El rótulo corto que pide la maqueta lo agrega
   product.js aparte, marcado como decorativo, para no duplicar el nombre accesible. */
.nied-ficha .pbox form.cart .quantity .qtylabel {
	color: var(--nied-ink);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.nied-ficha .stepper {
	display: flex;
	align-items: center;
	overflow: hidden;
	border: 1px solid var(--nied-line);
	border-radius: 9px;
}
.nied-ficha .stepper .step {
	width: 42px;
	height: 46px;
	border: 0;
	background: #f6f9fc;
	color: var(--nied-ink);
	font: inherit;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}
.nied-ficha .stepper .step:hover {
	background: #eaf1f8;
}
.nied-ficha .stepper input.qty {
	width: 52px;
	height: 46px;
	padding: 0;
	border: 0;
	background: var(--nied-white);
	color: var(--nied-ink);
	font: inherit;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.nied-ficha .stepper input.qty::-webkit-outer-spin-button,
.nied-ficha .stepper input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
}

/* Los dos botones son el `.cta` de la maqueta: azul lleno para comprar, azul de línea para
   cotizar. `a.` sube la especificidad por encima de la regla del plugin nied-core, que lo
   pinta blanco sobre naranja (≈2.3:1, falla AA). */
.nied-ficha .pbox button.single_add_to_cart_button,
.nied-ficha .pbox a.nied-product-quote,
.nied-ficha .pbox a.nied-product-pdf {
	width: 100%;
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
	padding: 0 20px;
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 650;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.nied-ficha .pbox button.single_add_to_cart_button {
	border: 0;
	background: var(--nied-blue);
	color: var(--nied-white);
}
.nied-ficha .pbox button.single_add_to_cart_button:hover {
	background: var(--nied-blue-dark);
}
.nied-ficha .pbox a.nied-product-quote,
.nied-ficha .pbox a.nied-product-quote:hover,
.nied-ficha .pbox a.nied-product-quote:focus,
.nied-ficha .pbox a.nied-product-pdf,
.nied-ficha .pbox a.nied-product-pdf:hover,
.nied-ficha .pbox a.nied-product-pdf:focus {
	border: 2px solid var(--nied-blue);
	background: var(--nied-white);
	color: var(--nied-blue);
}
.nied-ficha .pbox a.nied-product-quote:hover {
	background: #f2f7ff;
}
.nied-ficha .pbox a.nied-product-pdf:hover {
	background: #f2f7ff;
}
.nied-ficha .pbox .stock,
.nied-ficha .pbox .woocommerce-variation-availability {
	margin: 10px 0 0;
	color: var(--nied-muted);
	font-size: 12.5px;
	font-weight: 500;
}
.nied-ficha .pbox .wp-block-woocommerce-add-to-cart-form:empty {
	display: none;
}

/* ---------- Tira de datos clave ---------- */
.nied-ficha .qs-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.nied-ficha .qs {
	padding: 14px 12px;
	border: 1px solid var(--nied-line);
	border-radius: 12px;
	background: var(--nied-white);
	text-align: center;
}
.nied-ficha .qs b {
	display: block;
	color: var(--nied-ink);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.nied-ficha .qs span {
	display: block;
	margin-top: 3px;
	color: var(--nied-muted);
	font-size: 11px;
	font-weight: 500;
}
@media (min-width: 900px) {
	.nied-ficha .qs-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- Garantía y servicio ---------- */
.nied-ficha .trust {
	display: grid;
	gap: 9px;
	padding: 14px 16px;
	border: 1px solid var(--nied-line);
	border-radius: 12px;
	background: var(--nied-white);
}
.nied-ficha .trust p {
	color: var(--nied-body);
	font-size: 12.5px;
	line-height: 1.5;
}
.nied-ficha .trust b {
	color: var(--nied-ink);
	font-weight: 650;
}

/* ---------- Secciones ---------- */
.nied-ficha .blk {
	padding: 36px 0 0;
}
.nied-ficha .blk > * {
	margin-block: 0;
}
.nied-ficha .blk h2 {
	margin-bottom: 14px;
	color: var(--nied-ink);
	font-size: 22px;
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: -.01em;
}
.nied-ficha .panel {
	padding: 22px;
	border: 1px solid var(--nied-line);
	border-radius: 16px;
	background: var(--nied-white);
}

/* "Para qué sirve" es el filtro más rápido de la página: en dos segundos dice si el equipo
   es para el trabajo de quien mira. Por eso pesa más que el cuerpo de texto —16.5px contra
   los 14.5 de la descripción— y no queda al mismo nivel que un párrafo (criterio §61). */
.nied-ficha .apps {
	display: grid;
	gap: 10px;
}
.nied-ficha .app {
	display: flex;
	gap: 11px;
	padding: 16px 18px;
	border-radius: 12px;
	background: #f2f7ff;
	color: var(--nied-ink);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.005em;
}
.nied-ficha .app::before {
	content: "\2713";
	flex: 0 0 auto;
	color: var(--nied-blue);
	font-weight: 700;
}
@media (min-width: 900px) {
	.nied-ficha .apps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Descripción y equipamiento ----------
   Dos columnas en escritorio porque son listas de ítems cortos, no párrafos. */
.nied-ficha .prosa p {
	color: var(--nied-body);
	font-size: 14.5px;
	line-height: 1.65;
}
.nied-ficha .prosa p + p {
	margin-top: 12px;
}
.nied-ficha .prosa h3 {
	margin: 20px 0 12px;
	color: var(--nied-ink);
	font-size: 15px;
	font-weight: 650;
	line-height: 1.3;
}
.nied-ficha .prosa a {
	color: var(--nied-blue);
}
/* La grilla de dos columnas es para las listas que arma la ficha (`.vent`, `.equip`), que
   son de una línea por viñeta. Las listas que vienen escritas dentro de la descripción
   pueden traer párrafos enteros por viñeta, y en dos columnas se leen como un bloque
   desordenado: ésas van en una sola columna. */
.nied-ficha .vent,
.nied-ficha .equip,
.nied-ficha .prosa :is(ul, ol) {
	display: grid;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nied-ficha .prosa :is(ul, ol):not(.vent):not(.equip) {
	grid-template-columns: 1fr;
	gap: 10px;
}
.nied-ficha .prosa :is(ul, ol) + p,
.nied-ficha .prosa p + :is(ul, ol) {
	margin-top: 12px;
}
.nied-ficha .vent li,
.nied-ficha .equip li,
.nied-ficha .prosa :is(ul, ol) li {
	position: relative;
	padding-left: 22px;
	color: var(--nied-body);
	font-size: 13.5px;
	line-height: 1.5;
}
.nied-ficha .vent li::before,
.nied-ficha .prosa :is(ul, ol):not(.equip) li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--nied-blue);
	font-weight: 700;
}
.nied-ficha .prosa .equip li::before,
.nied-ficha .equip li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #a9bccf;
}
.nied-ficha .prosa p.fuente,
.nied-ficha .fuente {
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid var(--nied-line-soft);
	color: var(--nied-muted);
	font-size: 11.5px;
	line-height: 1.5;
}
/* El aviso de las especificaciones cuelga fuera del recuadro, así que la línea de arriba
   sobra: la separación ya la da el borde del propio recuadro. */
.nied-ficha .blk > .fuente {
	margin-top: 10px;
	padding-top: 0;
	border-top: 0;
}
@media (min-width: 900px) {
	.nied-ficha .vent,
	.nied-ficha .equip,
	.nied-ficha .prosa :is(ul, ol) {
		grid-template-columns: 1fr 1fr;
		gap: 9px 28px;
	}
}

/* ---------- Especificaciones técnicas ---------- */
.nied-ficha .srow {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--nied-line-soft);
	font-size: 13.5px;
}
.nied-ficha .srow:last-child {
	border-bottom: 0;
}
.nied-ficha .srow:nth-child(odd) {
	margin-inline: -22px;
	padding-inline: 22px;
	background: #fafcfe;
}
.nied-ficha .srow dt {
	flex: 1;
	color: var(--nied-muted);
	font-weight: 500;
}
.nied-ficha .srow dd {
	font-weight: 600;
	text-align: right;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* ---------- Nied en operación ----------
   Video y fotos de terreno de la familia del producto (dueño, 19-09). El sobretítulo va sobre el
   h2 como en la portada; el video no se descarga hasta que se le da play. */
.nied-ficha .op-eyebrow {
	margin: 0 0 4px;
	color: var(--nied-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.nied-ficha .op-video {
	margin: 0 0 16px;
}
.nied-ficha .op-video video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #0b1f38;
}
.nied-ficha .op-video figcaption,
.nied-ficha .op-grid figcaption {
	margin-top: 6px;
	color: var(--nied-body);
	font-size: 14px;
	line-height: 1.45;
}
.nied-ficha .op-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.nied-ficha .op-grid figure {
	margin: 0;
}
.nied-ficha .op-grid a {
	position: relative;
	display: block;
}
.nied-ficha .op-grid img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.nied-ficha .op-grid span {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 3px 8px;
	background: rgba(11, 31, 56, .82);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}
/* Las fotos abren el visor con todo lo del producto; la cuarta dice cuántas quedan. */
.nied-ficha .op-grid a {
	cursor: zoom-in;
}
.nied-ficha .op-grid span.op-more {
	inset: 0;
	display: grid;
	place-items: center;
	padding: 0;
	background: rgba(11, 31, 56, .62);
	font-size: 28px;
}
.nied-ficha .op-all {
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nied-blue);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}
/* Escritorio: video a la izquierda y fotos 2×2 a la derecha, para que la sección no ocupe una
   pantalla entera. Si falta uno de los dos, el otro toma el ancho (las fotos, en 4 columnas). */
@media (min-width: 900px) {
	.nied-ficha .op {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		column-gap: 20px;
		align-items: start;
	}
	.nied-ficha .op > .op-eyebrow,
	.nied-ficha .op > h2 {
		grid-column: 1 / -1;
	}
	.nied-ficha .op > .op-video {
		margin: 0;
	}
	.nied-ficha .op:not(:has(.op-video)) > .op-grid {
		grid-column: 1 / -1;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.nied-ficha .op:not(:has(.op-grid)) > .op-video {
		grid-column: 1 / -1;
		max-width: 760px;
	}
	.nied-ficha .op > .op-all {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

/* ---------- Documentos ---------- */
.nied-ficha .docs {
	display: grid;
	gap: 10px;
}
.nied-ficha .doc {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 66px;
	padding: 14px 16px;
	border: 1px solid var(--nied-line);
	border-radius: 12px;
	background: var(--nied-white);
	color: inherit;
	text-decoration: none;
}
.nied-ficha .doc:hover {
	border-color: #bcd8fb;
}
.nied-ficha .doc .ic {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	background: var(--nied-badge-orange-bg);
	color: #994a00;
	font-size: 10px;
	font-weight: 700;
}
.nied-ficha .doc b {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
}
.nied-ficha .doc small {
	display: block;
	margin-top: 2px;
	color: var(--nied-muted);
	font-size: 11.5px;
}
@media (min-width: 900px) {
	.nied-ficha .docs {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- Equipos relacionados y guías ----------
   Las dos franjas usan el mismo `section.blk` que el resto de la ficha: la maqueta no les
   pone antetítulo ni enlace, y tenerlos con una cabecera propia les daba más peso del que
   les toca al final de la página. Acá sólo quedan sus grillas, de 4 y de 3. */
.nied-ficha .nied-related-grid,
.nied-ficha .nied-guide-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.nied-ficha .nied-guide-grid {
	grid-template-columns: minmax(0, 1fr);
}
.nied-ficha .nied-related-grid .nied-product-card__title {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
}
.nied-ficha .nied-related-grid .nied-product-card__price {
	margin: 4px 0 10px;
}
.nied-ficha .nied-guide-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 150px;
	padding: 20px;
	border: 1px solid var(--nied-line);
	border-radius: 16px;
	background: var(--nied-white);
	box-shadow: none;
	color: inherit;
	text-decoration: none;
}
.nied-ficha .nied-guide-card:hover {
	transform: none;
	border-color: #bcd8fb;
	box-shadow: none;
}
.nied-ficha .nied-guide-card__tag {
	width: max-content;
	padding: 5px 9px;
	border-radius: 999px;
	background: #eaf3ff;
	color: var(--nied-blue);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.nied-ficha .nied-guide-card__title {
	margin: 0;
	color: var(--nied-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
}
.nied-ficha .nied-guide-card__excerpt {
	margin: 0;
	color: var(--nied-muted);
	font-size: 12.5px;
	line-height: 1.5;
}
.nied-ficha .nied-guide-card__more {
	margin-top: auto;
	padding-top: 0;
	color: var(--nied-blue);
	font-size: 12.5px;
	font-weight: 650;
}
@media (min-width: 900px) {
	.nied-ficha .nied-related-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.nied-ficha .nied-guide-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Móvil ---------- */
@media (max-width: 899px) {
	.nied-ficha {
		padding-bottom: calc(82px + env(safe-area-inset-bottom));
	}
	.nied-ficha .gmain {
		height: 280px;
	}
	.nied-ficha .gmain img {
		max-height: 260px;
	}
	.nied-ficha .sum h1 {
		font-size: 26px;
	}
	.nied-ficha .precio {
		font-size: 29px;
	}
	.nied-ficha .panel {
		padding: 16px;
	}
	.nied-ficha .srow:nth-child(odd) {
		margin-inline: -16px;
		padding-inline: 16px;
	}
	/* El catálogo vuelca su tarjeta a horizontal en móvil, con la foto fija en 132px a la
	   izquierda. Dentro de una celda de dos columnas eso deja 30px para el texto, así que
	   en la tira de relacionados la tarjeta se queda vertical, como en la maqueta. */
	.nied-ficha .nied-related-grid .nied-product-card {
		flex-direction: column;
		align-items: stretch;
	}
	.nied-ficha .nied-related-grid .nied-product-card__media {
		flex: 0 0 auto;
		width: auto;
		align-self: auto;
		padding: 12px;
	}
	.nied-ficha .nied-related-grid .nied-product-card > div.nied-product-card__body {
		padding: 0 12px 14px;
	}
}

/* Barra fija móvil: el bloque `nied/product-actionbar` ya existía y conserva su marcado.
   Oculta desde 900px, donde el panel de compra está a la vista sin desplazarse. */
.nied-product-actionbar {
	display: none;
}
@media (max-width: 899px) {
	.nied-product-actionbar {
		position: fixed;
		z-index: 40;
		inset: auto 0 0 0;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--nied-line, #dce5ee);
		background: #fff;
		box-shadow: 0 -8px 24px rgba(11, 31, 56, 0.10);
	}
	.nied-product-actionbar__price {
		flex: 0 0 auto;
		margin: 0;
		color: var(--nied-price, #0a47a8);
		font-size: 18px;
		font-weight: 700;
		line-height: 1.1;
		font-variant-numeric: tabular-nums;
	}
	.nied-product-actionbar__price del {
		display: none;
	}
	.nied-product-actionbar__price .nied-quote-price {
		color: #a75500;
		font-size: 13px;
		font-weight: 650;
	}
	.nied-product-actionbar .nied-cta {
		flex: 1;
		min-height: 48px;
		margin-top: 0;
	}
}

/* Desplegable nativo para los accesorios con muchas compatibilidades. Sólo uno del catálogo
   pasa de ocho modelos, así que no vale un componente: `<details>` no necesita JavaScript y
   el teclado lo abre solo. */
.nied-ficha .compat-mas {
	margin-top: 10px;
}
.nied-ficha .compat-mas > summary {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	color: var(--nied-blue);
	font-size: 13.5px;
	font-weight: 650;
	cursor: pointer;
}
.nied-ficha .compat-mas > summary::marker {
	color: var(--nied-muted);
}
.nied-ficha .compat-mas[open] > summary {
	margin-bottom: 8px;
}

/* Viñetas largas: una sola columna. Con textos de tres o cuatro líneas la grilla de dos
   columnas deja de leerse como lista y pasa a leerse como bloque. Se marca desde PHP porque
   el CSS no puede medir cuánto texto trae cada viñeta. */
@media (min-width: 900px) {
	.nied-ficha .vent.es-larga,
	.nied-ficha .equip.es-larga {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}
.nied-ficha .vent.es-larga li,
.nied-ficha .equip.es-larga li {
	line-height: 1.55;
}
.nied-ficha .vent li strong,
.nied-ficha .equip li strong {
	color: var(--nied-ink);
}

/* ===== Product A editorial treatment (R2, 2026-09-07) ===== */
.nied-ficha {
	--nied-ink: #172b3e;
	--nied-blue: #244d70;
	--nied-blue-dark: #193a56;
	--nied-price: #172b3e;
	--nied-orange: #d69760;
	--nied-orange-dark: #c7854d;
	--nied-canvas: #f3f5f6;
	--nied-line: #d2dae0;
	--nied-line-soft: #e7ecef;
	--nied-line-strong: #8295a4;
	--nied-muted: #526477;
	--nied-body: #334a60;
	--nied-radius-sm: 0;
	--nied-radius-md: 0;
	--nied-radius-lg: 0;
	--nied-shadow-card: none;
	--nied-focus: 0 0 0 3px #244d70;
	background: #f3f5f6;
	color: var(--nied-ink);
}
.nied-ficha :is(.gal, .gmain, .th, .pbox, .panel, .app, .doc, .cuenta, .cuenta__caja,
	.stepper, .gbadge, .goff, .qs, .trust, .nied-guide-card) {
	border-radius: 0;
	box-shadow: none;
}
.nied-ficha :is(.gal, .gmain, .th, .pbox, .panel, .app, .doc, .cuenta, .cuenta__caja,
	.qs, .trust, .nied-guide-card) { border-color: var(--nied-line); }
.nied-ficha .gal,
.nied-ficha .gmain,
.nied-ficha .th,
.nied-ficha .pbox,
.nied-ficha .panel,
.nied-ficha .doc,
.nied-ficha .qs,
.nied-ficha .trust,
.nied-ficha .nied-guide-card { background: #fff; }
.nied-ficha .sum h1,
.nied-ficha :is(h2, h3) { font-weight: 600; }
.nied-ficha .sum h1 { letter-spacing: -.025em; line-height: 1.14; }
.nied-ficha .precio .amount,
.nied-ficha .precio .woocommerce-Price-amount { color: var(--nied-price); }
.nied-ficha .pbox button.single_add_to_cart_button,
.nied-ficha button.single_add_to_cart_button {
	min-height: 52px;
	border-radius: 0;
	background: #244d70;
	color: #fff;
	font-weight: 600;
}
.nied-ficha .pbox a.nied-product-quote,
.nied-ficha .nied-product-quote {
	min-height: 52px;
	border-radius: 0;
	border-color: #b57039;
	background: #fff;
	color: var(--nied-ink);
	font-weight: 600;
}
.nied-ficha .nied-product-actionbar { box-shadow: none; border-top-color: var(--nied-line); }
.nied-ficha .nied-related-grid .nied-product-card,
.nied-ficha .nied-guide-card { border-radius: 0; box-shadow: none; }
.nied-ficha .nied-guide-card__tag { border-radius: 0; background: #eaf0f4; color: var(--nied-blue); }

@media (max-width: 899px) {
	.nied-ficha .panel { padding: 16px; }
	.nied-ficha .pbox button.single_add_to_cart_button,
	.nied-ficha .nied-product-quote { min-height: 48px; }
	.nied-ficha .nied-product-actionbar { box-shadow: none; }
}