/* Ficha de producto de Motoshop (nudge): formato landing con los colores y tipografías del sitio.
   Rojo #E10600, amarillo #FFD400, fondo #0B0B0C, tarjetas #141416. Títulos en Saira Condensed y texto en Sora. */

/* ---------- Resumen (al lado de la galería) ---------- */
body.single-product .summary .nmf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
body.single-product .summary .nmf-chips span {
	padding: 5px 12px; border-radius: 4px; background: #E10600; color: #fff;
	font-family: 'Saira Condensed', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase;
}
body.single-product .summary .nmf-chips span + span { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
body.single-product .summary h1.product_title { margin-bottom: 14px !important; }
body.single-product .summary p.price {
	margin: 0 0 4px !important; padding: 0 !important; min-height: 0 !important; height: auto !important; color: #fff !important;
	font-family: 'Saira Condensed', sans-serif !important; font-size: 44px !important; font-weight: 800 !important; line-height: 1 !important;
}
body.single-product .summary p.price .woocommerce-Price-currencySymbol { margin-right: 4px; font-size: .6em; vertical-align: .55em; }
body.single-product .summary .nmf-cuotas { margin: 6px 0 20px; color: #FFD400; font-family: 'Sora', sans-serif; font-size: 16px; line-height: 1.4; }
body.single-product .summary .nmf-cuotas strong { font-weight: 700; }
body.single-product .summary .nms-financiar { margin: 0 0 12px !important; }
body.single-product .summary .nms-financiar a.nms-boton-financiar.button { min-height: 56px; font-size: 21px !important; line-height: 32px !important; }

/* ---------- Landing debajo de la ficha ---------- */
.nmf { clear: both; max-width: 1180px; margin: 64px auto 40px; padding: 0; color: #F4F4F2; font-family: 'Sora', sans-serif; }
.nmf * { box-sizing: border-box; }
.nmf h2, .nmf h3 { color: #fff; font-family: 'Saira Condensed', sans-serif; font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.nmf-eyebrow { display: inline-block; margin-bottom: 12px; color: #E10600; font-family: 'Saira Condensed', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }

.nmf-intro { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; padding: 48px 0; border-top: 1px solid rgba(255, 255, 255, .09); }
.nmf-intro h2 { margin: 0; font-size: clamp(38px, 5vw, 64px); }
.nmf-intro-texto p { margin: 0 0 16px; color: #C9C9CE; font-size: 17px; line-height: 1.75; }
.nmf-intro-texto p:first-child { color: #F4F4F2; font-size: 19px; }

.nmf-puntos { padding: 48px 0; border-top: 1px solid rgba(255, 255, 255, .09); }
.nmf-puntos h3 { margin: 0 0 28px; font-size: clamp(28px, 3.4vw, 40px); }
.nmf-puntos ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.nmf-puntos li {
	display: flex; align-items: center; gap: 14px; margin: 0; padding: 18px 20px; min-height: 76px;
	background: #141416; border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px;
	color: #F4F4F2; font-size: 16px; font-weight: 600; line-height: 1.35;
}
.nmf-check { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(225, 6, 0, .15); }
.nmf-check svg { width: 20px; height: 20px; fill: #E10600; }

.nmf-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 0 0 48px; }
.nmf-fotos img { width: 100%; height: auto; border-radius: 12px; }

.nmf-cta {
	display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: center; margin-top: 8px; padding: 44px 48px;
	border-radius: 18px; background: radial-gradient(circle at 100% 0, rgba(225, 6, 0, .45), transparent 55%), #141416;
	border: 1px solid rgba(225, 6, 0, .35);
}
.nmf-cta h3 { margin: 0 0 12px; font-size: clamp(30px, 3.6vw, 46px); }
.nmf-cta-texto p { margin: 0; color: #C9C9CE; font-size: 17px; line-height: 1.6; }
.nmf-cta-texto strong { color: #FFD400; }
.nmf-cta-botones { display: flex; flex-direction: column; gap: 12px; min-width: 300px; }
.nmf-btn {
	display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 28px; border-radius: 8px;
	font-family: 'Saira Condensed', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none !important;
	transition: transform .15s, filter .15s;
}
.nmf-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.nmf-btn-rojo { background: #E10600; color: #fff !important; }
.nmf-btn-wa { background: #25D366; color: #fff !important; }
.nmf-dir { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 4px 0 0; color: #9C9CA2; font-size: 14px; }
.nmf-dir svg { flex: none; width: 18px; height: 18px; fill: #E10600; }

/* ---------- Relacionados: el botón «Ver información» tapaba la foto; toda la tarjeta lleva a la moto ---------- */
body.single-product .related.products h2,
body.single-product .upsells.products h2 {
	color: #fff; font-family: 'Saira Condensed', sans-serif !important; font-size: clamp(30px, 3.6vw, 44px) !important; font-weight: 900 !important; text-transform: uppercase;
}
body.single-product .related li.product.classic,
body.single-product .upsells li.product.classic { position: relative; }
body.single-product .related li.product.classic .product-wrap,
body.single-product .upsells li.product.classic .product-wrap { position: static; }
body.single-product .related li.product.classic .product-wrap > a::after,
body.single-product .upsells li.product.classic .product-wrap > a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
body.single-product .related li.product.classic .product-add-to-cart,
body.single-product .upsells li.product.classic .product-add-to-cart { display: none !important; }

@media (max-width: 999px) {
	.nmf { margin-top: 40px; }
	.nmf-intro { grid-template-columns: 1fr; gap: 20px; padding: 36px 0; }
	.nmf-cta { grid-template-columns: 1fr; padding: 32px 24px; }
	.nmf-cta-botones { min-width: 0; }
}
@media (max-width: 767px) {
	body.single-product .summary p.price { font-size: 38px !important; }
	.nmf-intro-texto p, .nmf-intro-texto p:first-child { font-size: 16px; }
	.nmf-puntos { padding: 36px 0; }
	.nmf-puntos ul { grid-template-columns: 1fr; }
	.nmf-puntos li { min-height: 0; padding: 14px 16px; font-size: 15px; }
	.nmf-btn { font-size: 19px; }
}

/* ---------- Proporción foto / texto en tablet y computadora ----------
   La galería ocupaba el 40% y la foto tenía tope de 480 px de alto (con fotos verticales quedaba angosta),
   mientras los botones ocupaban todo el otro lado. Ahora la foto manda: 52% / 44% y foto 4:5. */
@media (min-width: 768px) {
	body.single-product div.product .single-product-main-image { width: 52% !important; margin-right: 0 !important; }
	body.single-product div.product .summary.entry-summary { width: 44% !important; }
	html body.single-product.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
		width: 100% !important; max-height: none !important; aspect-ratio: 4 / 5; height: auto !important; object-fit: cover; border-radius: 12px;
	}
	body.single-product .summary h1.product_title { font-size: clamp(34px, 3.6vw, 52px) !important; }
}

/* 19/10: en Safari de iPhone la fila flex de insignias se acomodaba al lado de la foto flotante (quedaba cortada
   en el borde derecho). Como texto común baja debajo de la foto, igual que el título, y en computadora no cambia. */
body.single-product .summary .nmf-chips { display: block; margin: 0 0 6px; }
body.single-product .summary .nmf-chips span { display: inline-block; margin: 0 8px 8px 0; vertical-align: top; }