/* Store4Bike · Contenido SEO de categoria (13/10/2026).
   Marcado: templates/_partials/listado/seo.tpl y seo/{id}.tpl.
   Mismo lenguaje que el resto: sin radios, gris de imagen #f4f4f4, texto
   #1a1a1a y el rojo #d9001d solo como acento. Los enlaces llevan su color
   ESCRITO: `inherit` en un enlace trae el morado del tema. */

/* ---- Entradilla bajo el H1 ---- */
.s4b-seo-intro {
	margin: 6px 0 0;
	max-width: 860px;
	font-size: 14px;
	line-height: 1.55;
	color: #4a4a4a;
}
.s4b-seo-intro strong { color: #1a1a1a; font-weight: 600; }

/* ---- Bloque bajo el listado ---- */
.s4b-seo {
	margin: 56px 0 24px;
	color: #1a1a1a;
	font-size: 15px;
	line-height: 1.6;
}
.s4b-seo a { color: #1a1a1a; text-decoration: underline; text-underline-offset: 2px; }
.s4b-seo a:hover, .s4b-seo a:focus-visible { color: #d9001d; }
.s4b-seo h2, .s4b-seo h3 { text-transform: none; color: #1a1a1a; letter-spacing: 0; }
.s4b-seo p { color: #1a1a1a; margin: 0 0 10px; }

.s4b-seo__h2 {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	margin: 48px 0 16px;
}

/* Portada: foto con el titular encima en escritorio, apilado en movil */
.s4b-seo__portada { position: relative; background: #1a1a1a; }
.s4b-seo__portada img { display: block; width: 100%; height: auto; margin: 0; }
.s4b-seo__portada-texto { padding: 22px 20px 24px; background: #1a1a1a; }
.s4b-seo__portada-texto h2 { color: #fff; font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0 0 10px; }
.s4b-seo__portada-texto p { color: #e6e6e6; margin: 0; }
.s4b-seo__antetitulo {
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #ff5a6e !important;
	margin: 0 0 8px !important;
}

/* Tarjetas numeradas */
.s4b-seo__tarjetas { display: grid; gap: 12px; margin-top: 12px; }
.s4b-seo__tarjeta { background: #f4f4f4; padding: 22px 20px 14px; position: relative; }
.s4b-seo__tarjeta h3 { font-size: 17px; font-weight: 700; margin: 0 0 12px; padding-right: 40px; }
/* Foto de la tarjeta, a sangre arriba (anula el relleno de la tarjeta). El
   numero queda en su esquina, encima de la foto. */
.s4b-seo__tarjeta-foto { display: block; margin: -22px -20px 18px; aspect-ratio: 3 / 2; overflow: hidden; background: #f4f4f4; }
.s4b-seo__tarjeta-foto img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.s4b-seo__tarjeta-foto + .s4b-seo__num { z-index: 1; }
.s4b-seo__tarjeta p { font-size: 14px; }
.s4b-seo__num {
	position: absolute; top: 18px; right: 18px;
	width: 30px; height: 30px;
	display: flex; align-items: center; justify-content: center;
	background: #d9001d; color: #fff;
	font-size: 14px; font-weight: 700;
}

/* Tabla: en movil desliza dentro de su caja, nunca la pagina */
.s4b-seo__tabla-envoltura { overflow-x: auto; }
.s4b-seo__tabla { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.s4b-seo__tabla th {
	text-align: left; font-weight: 700; background: #1a1a1a; color: #fff;
	padding: 12px 14px;
}
.s4b-seo__tabla td { padding: 12px 14px; border-bottom: 1px solid #e3e3e3; vertical-align: top; }
.s4b-seo__tabla tbody tr:nth-child(even) td { background: #f9f9f9; }
.s4b-seo__tabla td:first-child { color: #4a4a4a; width: 45%; }

/* Tipos de moto: fotos de la portada sobre el gris del sitio */
.s4b-seo__tipos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.s4b-seo__tipo { display: block; text-decoration: none !important; background: #f4f4f4; height: 100%; }
.s4b-seo__tipo-foto { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.s4b-seo__tipo-foto img { width: 100%; height: 100%; object-fit: cover; margin: 0; mix-blend-mode: multiply; transition: transform .3s ease; }
.s4b-seo__tipo:hover .s4b-seo__tipo-foto img { transform: scale(1.04); }
.s4b-seo__tipo-nombre { display: block; padding: 10px 12px 12px; font-size: 13px; font-weight: 700; line-height: 1.3; color: #1a1a1a; transition: color .2s ease; }
/* Rojo al señalar, como «Piezas del escape» y el resto de enlaces del sitio. */
.s4b-seo__tipo:hover .s4b-seo__tipo-nombre,
.s4b-seo__tipo:focus-visible .s4b-seo__tipo-nombre { color: #d9001d; }
@media (prefers-reduced-motion: reduce) { .s4b-seo__tipo-foto img { transition: none; } }
/* Recuento bajo el nombre (hub de marca). El nombre pierde su relleno inferior
   para que los dos se lean como una sola etiqueta. */
.s4b-seo__tipo-nombre:has(+ .s4b-seo__tipo-n) { padding-bottom: 2px; }
.s4b-seo__tipo-n { display: block; padding: 0 12px 12px; font-size: 12px; color: #6b6b6b; }

/* Gamas y homologacion del hub de marca: cajas grises como «Piezas del escape». */
.s4b-hub__gamas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.s4b-hub__gamas a {
	display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 14px 16px;
	background: #f4f4f4; color: #1a1a1a; text-decoration: none !important;
}
.s4b-hub__gamas strong { font-size: 15px; line-height: 1.3; color: #1a1a1a; transition: color .2s ease; }
.s4b-hub__gamas span { font-size: 13px; color: #6b6b6b; }
.s4b-hub__gamas a:hover strong, .s4b-hub__gamas a:focus-visible strong { color: #d9001d; }
.s4b-hub__gamas + .s4b-seo__nota { margin-top: 12px; }

/* Marcas de moto y marcas de escape */
.s4b-seo__nota { font-size: 13px !important; color: #4a4a4a !important; }
.s4b-seo__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.s4b-seo__chips a {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
	border: 1px solid #d5d5d5; text-decoration: none; font-size: 14px; font-weight: 600;
}
.s4b-seo__chips a:hover, .s4b-seo__chips a:focus-visible { border-color: #1a1a1a; color: #1a1a1a; background: #f4f4f4; }
.s4b-seo__marcas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.s4b-seo__marcas a {
	display: flex; align-items: center; gap: 14px; padding: 12px 14px;
	background: #f4f4f4; text-decoration: none;
	height: 100%;
}
/* El logo es JPG sobre blanco: multiply lo funde con el gris. */
.s4b-seo__marcas img {
	flex: 0 0 auto; width: 104px; height: auto; margin: 0;
	mix-blend-mode: multiply;
}
.s4b-seo__marca-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s4b-seo__marcas strong { font-size: 15px; }
.s4b-seo__marca-txt > span { font-size: 13px; color: #4a4a4a; line-height: 1.35; }
.s4b-seo__marcas a:hover strong { color: #d9001d; }

/* Cuadro de asesoramiento junto a las preguntas */
.s4b-seo__faq-fila { display: grid; gap: 24px; }
.s4b-seo__ayuda { background: #1a1a1a; color: #fff; padding: 24px 22px; align-self: start; }
.s4b-seo__ayuda h3 { color: #fff; font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0 0 10px; }
.s4b-seo__ayuda p { color: #e6e6e6; font-size: 14px; }
.s4b-seo .s4b-seo__wa {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; margin-top: 16px; padding: 0 16px;
	background: #1a7f37; color: #fff; text-decoration: none;
	font-size: 15px; font-weight: 700;
}
.s4b-seo .s4b-seo__wa:hover, .s4b-seo .s4b-seo__wa:focus-visible { background: #146b2d; color: #fff; }
.s4b-seo__wa svg { flex: 0 0 auto; }
.s4b-seo .s4b-seo__ayuda-otro {
	display: block; margin-top: 12px; text-align: center;
	color: #e6e6e6; font-size: 13px;
}
.s4b-seo .s4b-seo__ayuda-otro:hover { color: #fff; }

/* Preguntas frecuentes */
.s4b-seo__faq { border-top: 1px solid #e3e3e3; }
.s4b-seo__faq details { border-bottom: 1px solid #e3e3e3; }
.s4b-seo__faq summary {
	cursor: pointer; list-style: none; padding: 16px 40px 16px 0; position: relative;
	font-weight: 700; font-size: 15px;
}
.s4b-seo__faq summary::-webkit-details-marker { display: none; }
.s4b-seo__faq summary::after {
	content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	font-size: 22px; font-weight: 400; color: #d9001d;
}
.s4b-seo__faq details[open] summary::after { content: "\2212"; }
.s4b-seo__faq details p { padding: 0 0 16px; font-size: 14px; }

/* ---- BANNER DEL HUB: miga, H1 y entradilla sobre foto ----
   Movil: foto arriba (recorte 4:3 del motivo) y texto debajo sobre oscuro.
   Escritorio: texto encima de la foto, sobre la zona oscura de la izquierda,
   con un degradado que lo asegura a cualquier ancho. */
.s4b-hero { position: relative; margin: 16px 0 0; background: #141414; overflow: hidden; }
.s4b-hero__foto { display: block; width: 100%; height: auto; margin: 0; }
.s4b-hero__texto { position: relative; z-index: 1; padding: 20px 18px 24px; color: #fff; }
.s4b-hero__miga { font-size: 12px; color: #bdbdbd; margin: 0 0 10px; }
.s4b-hero__miga a { color: #bdbdbd; text-decoration: none; }
.s4b-hero__miga a:hover { color: #fff; }
.s4b-hero__miga span[aria-hidden] { margin: 0 6px; }
.s4b-hero h1.s4b-hero__h1 {
	margin: 0 0 10px; font-size: 28px; font-weight: 800; line-height: 1.1;
	color: #fff; text-transform: none; letter-spacing: 0;
}
.s4b-hero__intro { margin: 0; font-size: 14px; line-height: 1.55; color: #e6e6e6; max-width: 560px; }
.s4b-hero__intro strong { color: #fff; font-weight: 700; }
.s4b-hero .s4b-hero__boton {
	display: inline-flex; align-self: flex-start; align-items: center; min-height: 46px; margin-top: 18px; padding: 0 22px;
	background: #d9001d; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none;
}
.s4b-hero .s4b-hero__boton:hover, .s4b-hero .s4b-hero__boton:focus-visible { background: #a80016; color: #fff; }
@media (min-width: 992px) {
	.s4b-hero__foto { aspect-ratio: 3 / 1; min-height: 380px; object-fit: cover; object-position: right center; }
	.s4b-hero::after {
		content: ""; position: absolute; inset: 0; pointer-events: none;
		background: linear-gradient(90deg, rgba(14,14,14,.92) 0%, rgba(14,14,14,.75) 35%, rgba(14,14,14,0) 65%);
	}
	.s4b-hero__texto {
		position: absolute; top: 0; bottom: 0; left: 0; max-width: 640px;
		display: flex; flex-direction: column; justify-content: center; padding: 0 0 0 48px;
	}
	.s4b-hero h1.s4b-hero__h1 { font-size: 40px; }
	.s4b-hero__intro { font-size: 15px; }
}

/* ---- HUB de familia (13/10/2026): bloques ANTES del listado ---- */
.s4b-seo-intro .s4b-seo-intro__ir { color: #1a1a1a; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.s4b-seo-intro .s4b-seo-intro__ir:hover { color: #d9001d; }
.s4b-hub { color: #1a1a1a; }
.s4b-hub a { color: #1a1a1a; }
.s4b-hub__bloque { margin: 32px 0 0; }
.s4b-hub .s4b-seo { margin: 40px 0 0; }
.s4b-hub__h2, .s4b-hub h2.s4b-hub__h2 {
	font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0 0 16px;
	text-transform: none; letter-spacing: 0; color: #1a1a1a;
}
.s4b-hub__h3 { font-size: 15px; font-weight: 700; margin: 22px 0 10px; text-transform: none; color: #1a1a1a; }

/* Piezas del escape: icono + nombre + una linea */
.s4b-hub__piezas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.s4b-hub__piezas a {
	display: flex; align-items: center; gap: 14px; height: 100%;
	padding: 10px 14px; background: #f4f4f4; text-decoration: none;
}
.s4b-hub__piezas img { flex: 0 0 auto; width: 56px; height: auto; margin: 0; mix-blend-mode: multiply; }
.s4b-hub__piezas a > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s4b-hub__piezas strong { font-size: 14px; line-height: 1.3; }
.s4b-hub__piezas a > span > span { font-size: 13px; color: #4a4a4a; line-height: 1.35; }
.s4b-hub__piezas a:hover strong { color: #d9001d; }

/* Selector de moto en banda gris, a todo el ancho del contenedor */
.s4b-hub__moto { background: #f4f4f4; padding: 22px 18px; }
.s4b-hub__moto-texto p { font-size: 14px; color: #4a4a4a; margin: 0 0 14px; }
.s4b-hub__moto .s4b-sv { background: transparent; border: 0; padding: 0; margin: 0; border-radius: 0; }
.s4b-hub__moto .s4b-sv__titulo { display: none; }

/* Carrusel de escapes mas vistos: desplazamiento nativo, las flechas las
   pone hub.js. Misma miniatura que el listado. */
.s4b-hub__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.s4b-hub__flechas { display: flex; gap: 6px; margin-bottom: 16px; }
.s4b-hub__flechas button {
	width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid #d5d5d5; background: #fff; color: #1a1a1a; cursor: pointer; padding: 0;
}
.s4b-hub__flechas button:hover:not(:disabled) { border-color: #1a1a1a; }
.s4b-hub__flechas button:disabled { opacity: .35; cursor: default; }
.s4b-hub__pista {
	list-style: none; margin: 0; padding: 0 0 6px; display: flex; gap: 16px;
	overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
	scrollbar-width: none;
}
.s4b-hub__pista::-webkit-scrollbar { display: none; }
.s4b-hub__item { flex: 0 0 62%; scroll-snap-align: start; min-width: 0; }
.s4b-hub__item .js-product-miniature { width: 100%; margin: 0; }
@media (prefers-reduced-motion: reduce) { .s4b-hub__pista { scroll-behavior: auto; } }
/* Barra de recorrido (la pinta hub.js, como la de la portada): guia gris de
   2 px y tramo negro arrastrable. content-box: con border-box el relleno de
   agarre dejaria la guia en 0 px (trampa ya vista en la portada). */
.s4b-hub__barra {
	position: relative; box-sizing: content-box; height: 2px; padding: 9px 0;
	margin-top: 10px; background: #d5d5d5; background-clip: content-box;
	cursor: pointer; touch-action: none;
}
.s4b-hub__barra[hidden] { display: none; }
.s4b-hub__barra-tramo {
	position: absolute; top: 9px; left: 0; height: 2px; min-width: 36px;
	background: #1a1a1a; cursor: grab;
}

/* Titulo del listado completo */
.s4b-hub__todos { margin: 48px 0 8px !important; padding-top: 24px; border-top: 1px solid #e3e3e3; }
.s4b-hub__todos span { font-size: 15px; font-weight: 400; color: #6b6b6b; margin-left: 6px; }

/* En movil se pasa con el dedo: las flechas solo le quitaban ancho al titulo. */
@media (max-width: 767px) {
	.s4b-hub__flechas { display: none; }
}
@media (min-width: 576px) {
	.s4b-hub__item { flex-basis: calc((100% - 32px) / 3); }
}
@media (min-width: 768px) {
	.s4b-hub__piezas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
	.s4b-hub__bloque { margin-top: 44px; }
	.s4b-hub__item { flex-basis: calc((100% - 64px) / 5); }
	.s4b-hub__moto { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: center; padding: 26px 28px; }
	.s4b-hub__moto-texto p { margin: 0; }
	.s4b-hub__moto .s4b-sv__campos {
		display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end;
	}
	.s4b-hub__moto .s4b-sv__aviso { margin: 8px 0 0; }
}

/* ---- Tablet y escritorio ---- */
@media (min-width: 768px) {
	.s4b-seo__tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.s4b-seo__tipos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.s4b-seo__marcas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
	.s4b-seo__portada img { aspect-ratio: 16 / 7; object-fit: cover; object-position: right center; }
	.s4b-seo__portada::after {
		content: ""; position: absolute; inset: 0;
		background: linear-gradient(90deg, rgba(20,20,20,.88) 0%, rgba(20,20,20,.6) 38%, rgba(20,20,20,0) 62%);
		pointer-events: none;
	}
	.s4b-seo__portada-texto {
		position: absolute; z-index: 1; left: 0; top: 50%; transform: translateY(-50%);
		max-width: 470px; padding: 0 0 0 44px; background: none;
	}
	.s4b-seo__portada-texto h2 { font-size: 30px; }
	.s4b-seo__tipos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.s4b-seo__dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
	.s4b-seo__dos .s4b-seo__h2 { margin-top: 48px; }
	.s4b-seo__faq-fila { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
}

/* ---- ESCAPES POR MARCA DE MOTO (plan SEO 2.1, 26/10/2026): seo/2109.tpl ----
   Hero sin foto: texto a la izquierda y el buscador de modelo a la derecha.
   Sin animaciones de entrada. */
/* Sin foto no hay nada que recortar, y la lista del buscador debe poder salir del hero */
.s4b-hero.s4b-mm-hero { display: grid; gap: 0; overflow: visible; }
.s4b-mm-hero__texto { padding-bottom: 20px; }
.s4b-mm-hero__cifras { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: #bdbdbd; }
.s4b-mm-hero__cifras strong { display: block; font-size: 22px; line-height: 1.1; color: #fff; font-weight: 800; }
.s4b-hero.s4b-mm-hero .s4b-hero__boton { display: flex; justify-content: center; width: 100%; }
.s4b-mm-panel { background: #1f1f1f; padding: 18px 18px 20px; border-top: 1px solid #2c2c2c; }
.s4b-mm-panel__titulo { display: block; margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #bdbdbd; }
/* Buscador de modelo */
.s4b-mm-busca__caja { position: relative; }
.s4b-mm-busca__lupa { position: absolute; left: 14px; top: 15px; color: #6b6b6b; pointer-events: none; }
.s4b-mm-busca .s4b-mm-busca__input {
	width: 100%; height: 50px; padding: 0 14px 0 44px; border: 0; border-radius: 0; background: #fff;
	font-size: 16px; font-weight: 600; color: #1a1a1a; -webkit-appearance: none; appearance: none;
}
.s4b-mm-busca__input::placeholder { color: #8a8a8a; font-weight: 500; }
.s4b-mm-busca__input:focus { outline: 2px solid #d9001d; outline-offset: 0; }
.s4b-mm-busca__res { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 0; padding: 4px 0; list-style: none; background: #fff; border-top: 1px solid #e3e3e3; box-shadow: 0 12px 24px rgba(0, 0, 0, .35); max-height: 320px; overflow-y: auto; }
.s4b-mm-busca__res a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 8px 14px; font-size: 15px; font-weight: 700; color: #1a1a1a; text-decoration: none; }
.s4b-mm-busca__res a span { font-size: 12px; font-weight: 500; color: #6b6b6b; text-align: right; }
.s4b-mm-busca__res a:hover, .s4b-mm-busca__res [aria-selected="true"] a { background: #f4f4f4; color: #d9001d; }
.s4b-mm-busca__vacio { margin: 10px 0 0; font-size: 14px; color: #e6e6e6; }
.s4b-hero .s4b-mm-busca__vacio a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.s4b-mm-busca__sug-t { margin: 18px 0 8px; font-size: 13px; color: #bdbdbd; }
.s4b-mm-busca__sug { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.s4b-hero .s4b-mm-busca__sug a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid #3a3a3a; font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; }
.s4b-hero .s4b-mm-busca__sug a:hover, .s4b-hero .s4b-mm-busca__sug a:focus-visible { border-color: #fff; }
.s4b-hero .s4b-mm-panel__mas { display: inline-block; margin-top: 12px; font-size: 13px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.s4b-hero .s4b-mm-panel__mas:hover { color: #ff6b7d; }


/* Tipo de moto: siete tarjetas con foto (las de la portada: moto a la derecha sobre blanco) */
.s4b-mm-tipos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.s4b-hub .s4b-mm-tipo { display: flex; flex-direction: column; height: 100%; background: #f4f4f4; color: #1a1a1a; text-decoration: none; border-bottom: 3px solid transparent; }
.s4b-mm-tipo__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.s4b-mm-tipo__foto img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: 92% center; mix-blend-mode: multiply; }
.s4b-mm-tipo__txt { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 14px; }
.s4b-mm-tipo__txt strong { font-size: 15px; font-weight: 700; }
.s4b-mm-tipo__txt span { font-size: 13px; color: #6b6b6b; }
.s4b-hub .s4b-mm-tipo:hover, .s4b-hub .s4b-mm-tipo:focus-visible { border-bottom-color: #d9001d; }
.s4b-hub .s4b-mm-tipo:hover strong { color: #d9001d; }

/* Homologacion: dos tarjetas, calle y circuito (sin recuentos por etiqueta) */
.s4b-mm-uso { display: grid; gap: 10px; margin-bottom: 12px; }
.s4b-mm-uso__tarjeta { background: #f4f4f4; padding: 18px 18px 16px; border-top: 3px solid #1a1a1a; }
.s4b-mm-uso__tarjeta + .s4b-mm-uso__tarjeta { border-top-color: #d9001d; }
.s4b-mm-uso__ante { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b6b6b; }
.s4b-hub .s4b-mm-uso h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; text-transform: none; color: #1a1a1a; }
.s4b-mm-uso p { margin: 0 0 12px; font-size: 14px; color: #4a4a4a; }
.s4b-hub .s4b-mm-uso__ir { font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.s4b-hub .s4b-mm-uso__ir:hover { color: #d9001d; }
.s4b-mm-marcas { margin-bottom: 12px; }
.s4b-mm-datos .s4b-hub__h2 { margin-top: 0; }
.s4b-mm-datos > div + div { margin-top: 32px; }

@media (min-width: 576px) {
	.s4b-mm-uso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.s4b-hero.s4b-mm-hero .s4b-hero__boton { display: inline-flex; width: auto; }
}
@media (min-width: 992px) {
	.s4b-mm-hero { grid-template-columns: minmax(0, 1fr) 400px; align-items: stretch; }
	/* Anula el posicionamiento absoluto del banner con foto. */
	.s4b-mm-hero .s4b-mm-hero__texto { position: relative; max-width: none; padding: 40px 32px 40px 48px; }
	.s4b-mm-hero::after { content: none; }
	.s4b-mm-panel { border-top: 0; border-left: 1px solid #2c2c2c; padding: 32px 32px 28px; }
	.s4b-mm-tipos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
	.s4b-mm-datos > div + div { margin-top: 0; }
}

/* ---- Marca de moto, 2.ª pasada (26/10/2026): logo, fotos y barra de filtros ---- */
/* align-self: en escritorio el texto del hero es flex en columna y lo estiraba a todo el ancho (el SVG se pintaba centrado en esa caja). */
.s4b-hero .s4b-mm-hero__logo { display: block; align-self: flex-start; width: auto; height: 44px; margin: 0 0 14px; }
/* Logos oscuros (Suzuki): sobre placa blanca; el relleno no cuenta en la altura */
.s4b-hero .s4b-mm-hero__logo--placa { box-sizing: content-box; padding: 8px 12px; background: #fff; }
/* Logos muy anchos (Kymco): tope de ancho; object-fit para no deformarlos */
.s4b-hero .s4b-mm-hero__logo { max-width: 220px; object-fit: contain; object-position: left center; }
.s4b-mm-uso .s4b-seo__tarjeta-foto { display: block; margin: -18px -18px 16px; aspect-ratio: 3 / 2; overflow: hidden; }
.s4b-mm-uso .s4b-seo__tarjeta-foto img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.s4b-mm-uso__tarjeta { border-top: 0; border-bottom: 3px solid #1a1a1a; }
.s4b-mm-uso__tarjeta + .s4b-mm-uso__tarjeta { border-bottom-color: #d9001d; }

/* Barra de filtros: sustituye a la columna en las categorias de marca de moto */
.s4b-listado__cuerpo--barra { grid-template-columns: minmax(0, 1fr); }
.s4b-mb { display: grid; gap: 14px; margin: 0 0 18px; padding: 16px; background: #f4f4f4; }
.s4b-mb__campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.s4b-mb__etiqueta { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b6b6b; text-align: left; }
.s4b-mb__select {
	width: 100%; height: 46px; padding: 0 40px 0 12px; border: 1px solid #1a1a1a; border-radius: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; background-size: 10px 6px;
	font-size: 15px; font-weight: 600; color: #1a1a1a; -webkit-appearance: none; appearance: none;
}
.s4b-mb__select:focus { outline: 2px solid #d9001d; outline-offset: 1px; }
.s4b-mb__opciones { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.s4b-mb__opciones a {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid #d5d5d5; background: #fff;
	font-size: 14px; font-weight: 600; color: #1a1a1a; text-decoration: none;
}
.s4b-mb__opciones a:hover, .s4b-mb__opciones a:focus-visible { border-color: #1a1a1a; color: #1a1a1a; }
.s4b-mb__opciones a[aria-current] { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
/* Daria 0 resultados con lo ya elegido: se ve, pero no se puede pulsar. */
.s4b-mb__off { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px dashed #d5d5d5; font-size: 14px; font-weight: 600; color: #a5a5a5; cursor: not-allowed; }
.s4b-mb .s4b-mb__limpiar { justify-self: start; align-self: end; font-size: 14px; font-weight: 600; color: #1a1a1a; text-decoration: underline; text-underline-offset: 3px; padding: 10px 0; }
.s4b-mb .s4b-mb__limpiar:hover { color: #d9001d; }
@media (min-width: 576px) {
	.s4b-mm-uso__tarjeta { display: flex; flex-direction: column; }
	.s4b-mm-uso__ir { margin-top: auto; }
}
@media (min-width: 992px) {
	.s4b-hero .s4b-mm-hero__logo { height: 52px; max-width: 260px; }
	.s4b-mb { grid-template-columns: minmax(220px, 300px) auto minmax(0, 1fr) auto; align-items: end; gap: 20px; padding: 18px 20px; }
}
@media (min-width: 1200px) {
	/* Tantas columnas como tipos tenga la marca (Honda 7, Yamaha 6): sin huecos */
	.s4b-mm-tipos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
	.s4b-listado__cuerpo--barra .s4b-listado__productos .product_content { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Fichas de los modelos mas buscados (marca de moto, 26/10/2026; aligeradas el 27/10) */
.s4b-mm-fichas { display: grid; gap: 12px; }
.s4b-mm-ficha { display: flex; flex-direction: column; padding: 0 0 16px; background: #f4f4f4; }
.s4b-mm-ficha__foto { display: block; aspect-ratio: 16 / 9; margin: 0 0 14px; background: #fff; }
.s4b-mm-ficha__foto img { display: block; width: 100%; height: 100%; margin: 0; padding: 8px 16px; object-fit: contain; }
.s4b-mm-ficha > :not(.s4b-mm-ficha__foto) { margin-left: 16px; margin-right: 16px; }
.s4b-hub .s4b-mm-ficha__h3 { margin-top: 0; margin-bottom: 6px; font-size: 20px; font-weight: 800; line-height: 1.15; text-transform: none; color: #1a1a1a; }
.s4b-mm-ficha__h3 span { display: block; margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b6b6b; }
.s4b-mm-ficha__precio { margin-top: 0; margin-bottom: 4px; font-size: 14px; color: #4a4a4a; }
.s4b-mm-ficha__precio strong { font-size: 17px; color: #1a1a1a; }
.s4b-mm-ficha__resumen { margin-top: 0; margin-bottom: 12px; font-size: 13px; color: #6b6b6b; }
.s4b-mm-ficha__anios { list-style: none; margin-top: 0; margin-bottom: 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.s4b-hub .s4b-mm-ficha__anios a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid #d5d5d5; background: #fff; font-size: 13px; font-weight: 600; color: #1a1a1a; text-decoration: none; }
.s4b-hub .s4b-mm-ficha__anios a:hover, .s4b-hub .s4b-mm-ficha__anios a:focus-visible { border-color: #d9001d; color: #d9001d; }
.s4b-hub .s4b-mm-ficha__ir { display: flex; justify-content: center; align-items: center; min-height: 44px; margin-top: auto; padding: 0 16px; background: #1a1a1a; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.s4b-hub .s4b-mm-ficha__ir:hover, .s4b-hub .s4b-mm-ficha__ir:focus-visible { background: #d9001d; color: #fff; }
@media (min-width: 768px) {
	.s4b-mm-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.s4b-mm-fichas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Movil: tipos de moto y fichas de modelo en carrusel (deslizar), como el de
   «más vistos». Sangran hasta el borde de la pantalla (el contenedor tiene
   15 px) y la siguiente tarjeta asoma para invitar a deslizar. Sin JS. */
@media (max-width: 767px) {
	.s4b-mm-tipos, .s4b-mm-fichas {
		grid-template-columns: none; grid-auto-flow: column; overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scroll-padding: 0 15px; scrollbar-width: none;
		margin: 0 -15px; padding: 0 15px 4px;
	}
	.s4b-mm-tipos::-webkit-scrollbar, .s4b-mm-fichas::-webkit-scrollbar { display: none; }
	.s4b-mm-tipos { grid-auto-columns: 44%; }
	.s4b-mm-fichas { grid-auto-columns: 86%; }
	.s4b-mm-tipos > li, .s4b-mm-ficha { scroll-snap-align: start; }
}

/* Indice «Escapes por marca de moto» (2108, 27/10/2026): solo navegacion */
.s4b-hero.s4b-mi-hero .s4b-hero__texto { position: relative; max-width: none; }
.s4b-mi-hero::after { content: none; }
.s4b-mi-marcas { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.s4b-hub .s4b-mi-marca { display: flex; flex-direction: column; height: 100%; background: #f4f4f4; color: #1a1a1a; text-decoration: none; border-bottom: 3px solid transparent; }
.s4b-mi-marca__logo { display: flex; align-items: center; justify-content: center; height: 96px; padding: 16px; background: #1a1a1a; }
.s4b-mi-marca__logo img { display: block; max-width: 100%; max-height: 52px; width: auto; height: auto; margin: 0; }
.s4b-mi-marca__logo--placa { background: #fff; }
.s4b-mi-marca__txt { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.s4b-mi-marca__txt strong { font-size: 16px; font-weight: 700; }
.s4b-mi-marca__txt span { font-size: 13px; color: #6b6b6b; }
.s4b-hub .s4b-mi-marca:hover, .s4b-hub .s4b-mi-marca:focus-visible { border-bottom-color: #d9001d; }
.s4b-hub .s4b-mi-marca:hover strong { color: #d9001d; }
@media (min-width: 768px) {
	.s4b-mi-marcas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 1200px) {
	.s4b-mi-marcas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
	.s4b-hero.s4b-mi-hero .s4b-hero__texto { padding: 40px 48px; }
}

/* ---- LANDING DE MODELO (plan SEO 2.2, 27/10/2026): seo/2118.tpl (Vespino) ---- */
/* Panel del hero: datos clave, cada uno lleva a su ficha */
.s4b-mo-claves { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.s4b-hero .s4b-mo-claves a {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline;
	padding: 12px 14px; border: 1px solid #3a3a3a; color: #fff; text-decoration: none;
}
.s4b-mo-claves span { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #bdbdbd; }
.s4b-mo-claves strong { font-size: 16px; font-weight: 800; }
.s4b-mo-claves em { font-style: normal; font-size: 14px; color: #e6e6e6; white-space: nowrap; }
.s4b-hero .s4b-mo-claves a:hover, .s4b-hero .s4b-mo-claves a:focus-visible { border-color: #fff; }
.s4b-hero .s4b-mo-claves a:hover strong { color: #ff6b7d; }

/* Cual elegir: una tarjeta por forma (en movil, carrusel como las fichas de marca) */
.s4b-mo-formas { display: grid; gap: 12px; }
.s4b-mo-forma { display: flex; flex-direction: column; padding: 0 0 16px; background: #f4f4f4; }
.s4b-mo-forma > :not(.s4b-mo-forma__foto) { margin-left: 16px; margin-right: 16px; }
.s4b-mo-forma__foto { display: block; aspect-ratio: 16 / 9; margin: 0 0 14px; background: #fff; }
.s4b-mo-forma__foto img { display: block; width: 100%; height: 100%; margin: 0; padding: 8px 16px; object-fit: contain; }
.s4b-hub .s4b-mo-forma__h3 { margin-top: 0; margin-bottom: 6px; font-size: 20px; font-weight: 800; line-height: 1.15; text-transform: none; color: #1a1a1a; }
.s4b-mo-forma__dato { margin-top: 0; margin-bottom: 8px; font-size: 14px; color: #4a4a4a; }
.s4b-mo-forma__dato strong { color: #1a1a1a; }
.s4b-mo-forma__txt { margin-top: 0; margin-bottom: 14px; font-size: 14px; line-height: 1.5; color: #4a4a4a; }
.s4b-hub .s4b-mo-forma__ir { display: flex; justify-content: center; align-items: center; min-height: 44px; margin-top: auto; padding: 0 16px; background: #1a1a1a; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.s4b-hub .s4b-mo-forma__ir:hover, .s4b-hub .s4b-mo-forma__ir:focus-visible { background: #d9001d; color: #fff; }
@media (min-width: 768px) {
	.s4b-mo-formas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.s4b-mo-formas {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scroll-padding: 0 15px; scrollbar-width: none; margin: 0 -15px; padding: 0 15px 4px;
	}
	.s4b-mo-formas::-webkit-scrollbar { display: none; }
	.s4b-mo-forma { scroll-snap-align: start; }
}

/* Landing de modelo con generaciones (KTM Duke, 27/10/2026): panel «Elige tu …» */
.s4b-mo-gen-t { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: #fff; }
.s4b-mo-gen-t:first-of-type { margin-top: 0; }
.s4b-mo-gen { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; }
.s4b-hero .s4b-mo-gen a { justify-content: center; padding: 0 8px; font-size: 13px; }

/* ---- CATEGORIAS POR TIPO DE MOTO (plan SEO 2.3, 27/10/2026): seo/tipo-moto.tpl ----
   Usa las clases del hub de Escapes; aqui solo lo propio. */
/* Dos tipos: tarjetas grandes, dos columnas desde tablet */
.s4b-seo__tipos.s4b-tm-tipos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.s4b-tm-tipos .s4b-seo__tipo-nombre { padding: 14px 16px 2px; font-size: 18px; font-weight: 800; }
.s4b-tm-tipos .s4b-seo__tipo-n { padding: 0 16px 16px; font-size: 14px; }
@media (min-width: 768px) {
	.s4b-seo__tipos.s4b-tm-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.s4b-hub .s4b-hub__h3 + .s4b-tm-chips { margin-top: 0; }
.s4b-tm-chips a span { margin-left: 6px; font-weight: 400; color: #6b6b6b; }
/* Marcas con logo (a una tinta, img/marcas-moto/mono/): tarjetas iguales en rejilla */
.s4b-tm-logos { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.s4b-tm-logos a {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 88px; padding: 10px 12px;
	border: 1px solid #d5d5d5; background: #fff; text-decoration: none !important;
}
.s4b-tm-logos img { display: block; width: auto; height: auto; max-width: 100%; max-height: 30px; object-fit: contain; }
.s4b-tm-logos span { font-size: 12px; color: #6b6b6b; }
.s4b-tm-logos a:hover, .s4b-tm-logos a:focus-visible { border-color: #1a1a1a; background: #f4f4f4; }
.s4b-tm-logos a:hover span, .s4b-tm-logos a:focus-visible span { color: #1a1a1a; }
@media (min-width: 768px) {
	.s4b-tm-logos { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
	.s4b-tm-logos img { max-height: 34px; }
}
.s4b-tm-chips + .s4b-seo__nota { margin-top: 10px; }

/* Tarjetas de la guia: cada opcion es un enlace con su nombre, su texto y sus datos */
.s4b-tm-tarjeta { display: flex; flex-direction: column; }
.s4b-tm-lista { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 6px; }
.s4b-tm-lista a {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 10px 12px;
	background: #fff; border-left: 3px solid transparent; color: #1a1a1a; text-decoration: none !important;
}
.s4b-tm-lista strong { font-size: 15px; font-weight: 800; }
.s4b-tm-lista span { font-size: 13px; line-height: 1.4; color: #4a4a4a; }
.s4b-tm-lista em { font-style: normal; font-size: 13px; font-weight: 700; color: #1a1a1a; }
.s4b-tm-lista a:hover, .s4b-tm-lista a:focus-visible { border-left-color: #d9001d; }
.s4b-tm-lista a:hover strong, .s4b-tm-lista a:focus-visible strong { color: #d9001d; }
.s4b-seo__tarjeta .s4b-tm-tarjeta__nota { margin-top: auto; font-size: 13px; color: #4a4a4a; }
.s4b-tm-tarjeta__nota a { color: #1a1a1a; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* Movil: las tres tarjetas de la guia en carrusel (deslizar), como las fichas de
   marca: sangran hasta el borde y la siguiente asoma. Sin JS. */
@media (max-width: 767px) {
	.s4b-seo__tarjetas.s4b-tm-guia {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scroll-padding: 0 15px; scrollbar-width: none; margin: 12px -15px 0; padding: 0 15px 4px;
	}
	.s4b-tm-guia::-webkit-scrollbar { display: none; }
	.s4b-tm-guia > .s4b-seo__tarjeta { scroll-snap-align: start; }
	/* Hero sin foto: solo ocupaba la pantalla (la fuente movil es un GIF vacio) */
	.s4b-tm-hero picture { display: none; }
}