/* Store4Bike · Portada.
 *
 * `.s4b-contenedor` (máx. 1.440 px) y `.s4b-oculto` los define cabecera.css,
 * que se carga siempre. Aquí NO se redefinen: las dos hojas se pelearían por
 * el mismo ancho.
 *
 * Sin border-radius: sin-radios.css manda en todo el sitio.
 */

.s4b-portada {
    display: block;
}

/* EL BEIGE DE FONDO NO ES DE LA PORTADA: es del TEMA, en `body` y en `#wrapper`
 * (#f4f3f1), y se ve por todo lo que el contenido no tapa. Un barrido de
 * «background» sobre este fichero no lo encuentra nunca, porque no esta aqui.
 * Se blanquea SOLO en la portada (`body#index`) para no tocar categoria, ficha
 * ni carrito, que hoy se apoyan en ese beige. */
body#index,
body#index #wrapper {
    background: #fff;
}

/* ------------------------------------------------------------------ */
/*  Bloque «Buscar» — el protagonista de la página                      */
/* ------------------------------------------------------------------ */
.s4b-p-buscar {
    /* FONDO BLANCO EN TODA LA PORTADA (peticion del cliente, 13/09/2026).
     * Antes esta banda era #f5f5f5. */
    background: #fff;
    /* SIN LINEA DIVISORIA (peticion del cliente, 13/09/2026). Aqui hubo un
     * `border-bottom` que sustituia al gris; el cliente quiere la portada sin
     * ninguna raya entre secciones. **Lo que separa ahora es el RELLENO**, y
     * por eso no se toca: son los 36 px de abajo contra los 34 del bloque
     * siguiente. Si algun dia se recortan, los bloques se pegan. */
    padding: 44px 0 36px;
    text-align: center;
}

/* El selector de vehiculo trae su propio fondo gris (#f6f6f7) escrito EN SU
 * PLANTILLA, `_partials/selector-vehiculo.tpl`, no en una hoja: por eso no
 * aparece buscando «background» en este fichero y se escapa del barrido.
 * Se blanquea SOLO DENTRO DE LA PORTADA — la misma pieza se pinta encima de
 * todos los listados de categoria, y alli el gris sigue siendo el que la separa
 * del resto de la barra de filtros. El borde se mantiene o la caja se pierde. */
.s4b-p-buscar .s4b-sv {
    background: #fff;
    /* SIN CAJA (13/09/2026, peticion del cliente): fuera el borde y, con el, el
     * relleno — sin fondo ni borde no delimita nada y solo mete los campos hacia
     * dentro. El margen inferior se queda: separa del bloque siguiente. */
    border: 0;
    padding: 0;
}

/* El subtitulo del selector, fuera. Es `.s4b-sv__titulo span`; el `<strong>` de
   al lado —«Encuentra piezas para tu moto»— se queda. */
.s4b-p-buscar .s4b-sv__titulo span {
    display: none;
}

.s4b-p-buscar .s4b-contenedor {
    position: relative;   /* referencia del panel de sugerencias */
}

.s4b-p-buscar__titular {
    margin: 0 0 6px;
    font-size: 30px;
    line-height: 1.15;
    /* El tema aplica `text-transform: capitalize` a los h1, y en castellano eso
     * escribe mal: «¿Qué Pieza Buscas?» en vez de «¿Qué pieza buscas?».
     * El texto del HTML SIEMPRE es el correcto; lo estropea el CSS al pintarlo.
     * Se anula aquí, no en el tema, que es generado. */
    text-transform: none;
}

.s4b-p-buscar__sub {
    margin: 0 0 22px;
    color: #666;
}

.s4b-p-buscar__forma {
    display: flex;
    max-width: 720px;
    margin: 0 auto;
    border: 1px solid #cfcfcf;
    background: #fff;
}

.s4b-p-buscar__campo {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 14px 16px;
    font-size: 16px;   /* 16px o iOS hace zoom al enfocar el campo */
}

.s4b-p-buscar__campo:focus {
    outline: 2px solid #1a1a1a;
    outline-offset: -2px;
}

.s4b-p-buscar__boton {
    /* Mismo caso que `.s4b-buscador__boton` de la cabecera, y el mismo desfase
     * de 3 px: siendo `block`, el <svg> es un elemento EN LINEA y se apoya en la
     * LINEA BASE del texto en vez de en el centro de la caja. Se arreglo el de
     * la cabecera el 13/09/2026 y este tenia identico fallo. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: #1a1a1a;
    color: #fff;
    padding: 0 20px;
    cursor: pointer;
}

.s4b-p-buscar__o {
    margin: 22px 0 10px;
    color: #777;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* El panel reutiliza .s4b-sugerencias de cabecera.css, pero aquí la caja está
   centrada y con otro ancho. `top: 100%` es obligatorio: sin él, la posición
   estática lo coloca donde no toca — pasó en la cabecera, donde el panel se
   pintaba ENCIMA del logo. */
.s4b-p-buscar #s4b-p-sugerencias {
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 720px;
    max-width: calc(100% - 30px);
    text-align: left;
    border-top: 1px solid #cfcfcf;
}

/* ------------------------------------------------------------------ */
/*  El selector de moto, INTEGRADO en la portada (14/09/2026, peticion   */
/*  del cliente: «que se sienta mas integrado con el diseño»)            */
/* ------------------------------------------------------------------ */
/* EL PROBLEMA MEDIDO: era una ISLA CENTRADA de 720 px —ocupaba 353..1073 en una
   ventana de 1440— mientras TODOS los demas bloques de la portada arrancan en
   x=15, alineados al contenedor. Un bloque centrado entre bloques alineados se
   lee como algo pegado, no como parte de la pagina.

   La solucion no es ensancharlo y ya: son tres controles, y estirados a 1.410 px
   quedan dos desplegables enormes y vacios. Se reparte en DOS COLUMNAS —titulo a
   la izquierda, controles a la derecha— que es lo que llena el ancho sin
   deformar nada.

   Se hereda `text-align: center` de `.s4b-p-buscar`: hay que anularlo o el
   titulo sigue centrado dentro de su columna. */
.s4b-p-buscar #s4b-selector-vehiculo {
    max-width: 720px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .s4b-p-buscar #s4b-selector-vehiculo {
        max-width: none;
        margin: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: end;
        column-gap: 40px;
        text-align: left;
    }

    /* El titulo pasa a columna y se lee como los demas titulos de seccion
       («Compra por categoría», «Escapes por tipo de moto»): mismo tamaño y mismo
       peso, para que el bloque no parezca de otro sitio. */
    .s4b-p-buscar .s4b-sv__titulo {
        display: block;
        margin: 0;
        white-space: nowrap;
    }

    .s4b-p-buscar .s4b-sv__titulo strong {
        font-size: 20px;
        font-weight: 600;
    }

    /* Los controles ocupan la columna ancha. Los desplegables se reparten lo
       que quede y el boton mide lo que pida su texto.

       SON TRES DESDE EL 19/09/2026 (marca, modelo y cilindrada). Esta rejilla
       estaba escrita para DOS, con las columnas contadas a mano, asi que al
       añadir el tercero **el boton se caia a una segunda fila** en 1440, 1200
       y 992 — medido en los tres. Y no se veia tocando el CSS del propio
       selector: manda esta regla, que es mas especifica.

       `repeat(3, ...)` y no `auto-fit`: el numero de controles lo decide la
       plantilla, no el ancho. **Si algun dia se añade o se quita un
       desplegable, hay que cambiar ese 3.** */
    .s4b-p-buscar .s4b-sv__campos {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
        gap: 12px;
        align-items: end;
    }

    /* El aviso («no hay piezas para esa combinacion») cuelga de la columna de
       los controles, que es donde se ha actuado; debajo del titulo no se ve. */
    .s4b-p-buscar .s4b-sv__aviso {
        grid-column: 2;
        margin: 8px 0 0;
    }
}

@media (max-width: 767px) {
    .s4b-p-buscar {
        padding: 28px 0 24px;
    }

    .s4b-p-buscar__titular {
        font-size: 23px;
    }
}

/* ------------------------------------------------------------------ */
/*  Carrusel de banners — lo primero que se ve                         */
/* ------------------------------------------------------------------ */
.s4b-p-banners {
    position: relative;
    overflow: hidden;   /* recorta las diapositivas que no tocan */
}

.s4b-p-banners__pista {
    display: flex;
    /* Sin la transicion el salto es brusco; con `prefers-reduced-motion` se
       anula abajo. */
    transition: transform .45s ease;
}

.s4b-p-banner {
    position: relative;
    /* `flex: 0 0 100%` y NO `width: 100%`: en un contenedor flex, el ancho
       solo no impide que las diapositivas se encojan para caber todas. */
    flex: 0 0 100%;
    min-width: 0;
}

.s4b-p-banner__img {
    display: block;
    width: 100%;
    height: auto;
    /* TOPE EN PIXELES, NO EN `vh` (13/09/2026). Con `58vh` el banner crecia con
     * la ventana: en un monitor de 1440 px de alto se comia 835 px, que es
     * justo lo que el cliente pidio evitar. Un tope fijo mantiene la banda
     * contenida y deja asomar el buscador, que es LA herramienta de esta
     * tienda.
     * `object-fit: cover` recorta por los lados en vez de deformar, asi que el
     * motivo debe ir CENTRADO en la imagen. */
    max-height: 340px;
    object-fit: cover;
    object-position: center;
}

/* EN MOVIL EL BANNER ES CUADRADO (1:1), peticion del cliente el 13/09/2026.
   Se llego aqui en tres pasos: primero 828x1000 vertical (se comia la pantalla),
   luego un tope de 200 px, y ahora 1:1.
   `aspect-ratio` en vez de un tope en pixeles: asi el alto sale del ancho REAL
   de la pantalla y no hay que acertar un numero que valga para 320 y para 430. */
@media (max-width: 767px) {
    .s4b-p-banner__img {
        max-height: none;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
}

/* --- BANDA SIN FOTO -------------------------------------------------
 * Lo que se pinta mientras no hay imagen del cliente. NO es un marcador gris a
 * la espera: es un banner que funciona, con su titular y su llamada a la
 * accion. En cuanto se rellene `img` en datos.tpl, la foto lo sustituye sin
 * tocar nada mas.
 *
 * VA EN OSCURO A PROPOSITO, aunque el resto de la portada sea blanca: un
 * banner blanco sobre fondo blanco no se distingue de un bloque de contenido
 * cualquiera, y este tiene que leerse como lo primero de la pagina.
 *
 * Con foto, la caja del titular va superpuesta y en posicion absoluta; aqui no
 * hay nada debajo que superponer, asi que vuelve al flujo normal. */
.s4b-p-banner--sinfoto {
    background: #1a1a1a;
    /* AQUI HUBO UN `border-top` claro, y ya no hace falta: se puso porque en
     * movil la franja de avisos quedaba pegada al banner y era del mismo negro,
     * asi que los dos se fundian en un bloque. Al subir la franja arriba del
     * todo (y ponerla roja), entre ella y el banner hay cabecera blanca. */
}

.s4b-p-banner--sinfoto .s4b-p-banner__caja {
    position: static;
    padding: 30px 0;
    /* ALTURA POR `min-height` Y CENTRADO, NO POR MAS RELLENO (13/09/2026).
     * Subirla con padding ata la altura al numero de lineas del titular: en
     * cuanto parta en dos, el banner crece de golpe. Con una altura minima y el
     * contenido centrado, el banner mide lo mismo diga lo que diga el texto.
     * Solo en escritorio: en movil 151 px ya es lo que cabe sin empujar el
     * buscador fuera de la pantalla. */
    display: flex;
    align-items: center;
    min-height: 220px;
}

/* El contenedor es el hijo del flex y sin esto se encoge a su contenido, con lo
   que el boton dejaria de irse al extremo derecho. */
.s4b-p-banner--sinfoto .s4b-p-banner__caja > .s4b-contenedor {
    width: 100%;
}

.s4b-p-banner--sinfoto .s4b-contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 28px;
    flex-wrap: wrap;
}

.s4b-p-banner--sinfoto .s4b-p-banner__titular {
    /* Sin foto detras no hay nada que separar del fondo: la sombra sobraria. */
    margin: 0;
    text-shadow: none;
    /* 26ch heredado del banner con foto, donde el titular va sobre la imagen y
     * hay que estrecharlo. Aqui va en una fila con el boton al lado, asi que el
     * flex ya se encarga del ancho: con 26ch partia en dos lineas a 1440 px
     * teniendo sitio de sobra. */
    max-width: 46ch;
    font-size: 28px;
}

.s4b-p-banner--sinfoto .s4b-p-banner__boton {
    /* Invertido: sobre la banda negra, el boton negro desapareceria. */
    background: #fff;
    color: #1a1a1a;
    flex: 0 0 auto;
}

.s4b-p-banner--sinfoto .s4b-p-banner__boton:hover,
.s4b-p-banner--sinfoto .s4b-p-banner__boton:focus {
    background: #e3e3e3;
    color: #1a1a1a;
}

@media (max-width: 767px) {
    /* CUADRADO (1:1) EN MOVIL, peticion del cliente el 13/09/2026. `aspect-ratio`
     * en el BLOQUE, no una altura en pixeles: asi el alto sale del ancho real de
     * la pantalla y no hay que acertar un numero que valga para 320 y para 430.
     * El contenido se centra, que con una caja tan alta es lo unico que se
     * sostiene: pegado arriba o abajo queda perdido.
     * OJO AL EFECTO: con 1:1 el buscador de moto ya NO asoma sin desplazar. Es
     * el precio de la peticion y esta asumido. */
    .s4b-p-banner--sinfoto .s4b-p-banner__caja {
        /* TEXTO Y BOTON ABAJO (13/09/2026, peticion del cliente). Estuvo
         * centrado mientras el banner era una franja; con el cuadrado, abajo es
         * ademas lo coherente con la version CON foto, que ya coloca su caja en
         * `bottom: 9%` — asi el dia que lleguen las imagenes el texto no se
         * mueve de sitio.
         * `flex-end` sobre el eje vertical, no `margin-top: auto` en el hijo:
         * el hijo es `.s4b-contenedor`, que es el mismo de todo el sitio y no
         * conviene darle margenes propios aqui. */
        padding: 22px 0 30px;
        min-height: 0;
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: flex-end;
    }
    .s4b-p-banner--sinfoto .s4b-p-banner__titular { font-size: 21px; max-width: none; }
    .s4b-p-banner--sinfoto .s4b-contenedor { display: block; }
    .s4b-p-banner--sinfoto .s4b-p-banner__boton { margin-top: 14px; }
}

.s4b-p-banner__caja {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9%;
}

.s4b-p-banner__titular {
    margin: 0 0 14px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
    max-width: 18ch;
    text-transform: none;
}

.s4b-p-banner__boton {
    display: inline-block;
    padding: 13px 26px;
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.s4b-p-banner__boton:hover,
.s4b-p-banner__boton:focus {
    background: #000;
    color: #fff;
}

/* --- flechas --- */
.s4b-p-banners__flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 0;
    background: rgba(255, 255, 255, .9);
    color: #1a1a1a;
    cursor: pointer;
}

.s4b-p-banners__flecha:hover { background: #fff; }
.s4b-p-banners__flecha--izq { left: 12px; }
.s4b-p-banners__flecha--der { right: 12px; }

/* --- puntos --- */
.s4b-p-banners__puntos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 7px;
}

.s4b-p-banners__punto {
    width: 26px;
    height: 4px;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
}

.s4b-p-banners__punto[aria-selected="true"] { background: #fff; }

.s4b-p-banners__flecha:focus-visible,
.s4b-p-banners__punto:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .s4b-p-banner__titular { font-size: 21px; }
    .s4b-p-banner__caja { bottom: 7%; }
    /* En móvil las flechas estorban más que ayudan: se desliza con el dedo. */
    .s4b-p-banners__flecha { display: none; }
}

/* ------------------------------------------------------------------ */
/*  Botones a ancho completo en móvil                                   */
/* ------------------------------------------------------------------ */
/* Petición del cliente (11/09/2026) y además es lo correcto: un botón que
 * ocupa el ancho es un objetivo táctil imposible de fallar, y en una columna
 * estrecha un botón corto y centrado se lee como un adorno, no como la acción.
 *
 * NO entra el botón del buscador: es la lupa de un campo en línea. A ancho
 * completo partiría el formulario en dos filas.
 *
 * Se lista bloque a bloque en vez de usar un `.s4b-portada button`: así no se
 * arrastran los controles del carrusel, los desplegables del selector de moto
 * ni lo que traigan los módulos. */
@media (max-width: 767px) {
    .s4b-p-banner__boton {
        display: block;
        width: 100%;
        text-align: center;
        /* El texto va centrado en el botón, no pegado a la izquierda. */
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Si el sistema pide menos animación, el carrusel no se desliza — y el JS
   tampoco lo avanza solo. */
@media (prefers-reduced-motion: reduce) {
    .s4b-p-banners__pista { transition: none; }
}

/* ------------------------------------------------------------------ */
/*  Bloques y rejilla de fichas                                        */
/* ------------------------------------------------------------------ */
.s4b-p-bloque {
    /* SIN LINEA DIVISORIA (peticion del cliente, 13/09/2026): fuera el
     * `border-bottom`. **Los 34 px de arriba y abajo son ahora lo UNICO que
     * separa un bloque del siguiente** — 68 px entre dos. No bajarlos. */
    padding: 34px 0;
    /* FONDO BLANCO EXPLÍCITO. Sin él la sección es transparente y se ve el body,
     * que es #f4f3f1 — prácticamente el mismo gris que el bloque del buscador
     * (#f5f5f5). El resultado era una plancha gris continua en la que no se
     * distinguía dónde acaba el buscador y empieza el contenido. */
    background: #fff;
}

.s4b-p-bloque__titulo {
    margin: 0 0 18px;
    font-size: 20px;
    /* El tema pinta los h2 en peso 400. Un título de sección sin peso no hace
     * de título: no separa un bloque del siguiente. */
    font-weight: 600;
    /* Igual que en el h1 del buscador: el tema pone `capitalize` en los
     * titulares y en castellano eso escribe «Escapes Por Tipo De Moto». */
    text-transform: none;
}

.s4b-p-rejilla {
    display: grid;
    /* `minmax(0, 1fr)` y NO `1fr` pelado: un 1fr lleva un minimo `auto`
       implicito, asi que un nombre largo ensancha la columna y desborda.
       Solo se nota en ventanas estrechas, que es lo que lo hace traicionero. */
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.s4b-p-rejilla--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* SEIS COLUMNAS (15/09/2026): los tipos de moto pasaron de cinco a seis al
   añadir «Custom y Clásicas», que faltaba desde la reorganizacion del 13/09.
   ES UN MODIFICADOR NUEVO Y NO SE TOCA `--5`: esa clase la usa tambien
   `tipos-pieza.tpl`, que hoy no se incluye en la portada pero sigue en disco
   y volveria con cinco columnas para nueve fichas.
   SEIS SOLO A PARTIR DE 1200 px: a 992 cada ficha se quedaria en ~145 px de
   ancho, o sea una foto 16:9 de 82 px de alto. Entre 576 y 1199 van TRES, que
   con seis fichas cuadran en dos filas exactas. */
.s4b-p-rejilla--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.s4b-p-ficha {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 14px;
    /* SIN BORDE (14/09/2026, peticion del cliente). La portada se queda sin
       ninguna caja con borde; lo que delimita cada ficha es su foto. */
    background: #fff;
    color: #1a1a1a;
    text-decoration: none;
    height: 100%;   /* todas las fichas de una fila, igual de altas */
}

/* Sin borde no hay `border-color` que oscurecer. Se deja solo el color del
   texto, que es lo unico que queda para indicar que la ficha se pulsa. */
.s4b-p-ficha:hover,
.s4b-p-ficha:focus {
    color: #1a1a1a;
}

.s4b-p-ficha:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

/* --- VARIANTE CON FOTO (14/09/2026) -----------------------------------
 * Los cinco tipos de escape llevan foto 16:9 encima del texto.
 *
 * LA FOTO LLEGA A LOS BORDES, asi que el relleno se quita del ENLACE y se
 * devuelve al cuerpo del texto. Con la foto dentro del relleno quedaba un marco
 * blanco de 14 px que no pinta nada.
 *
 * `aspect-ratio` en la CAJA y no una altura en pixeles: el alto sale del ancho
 * real de la columna, que cambia de 5 a 3 y a 2 fichas por fila segun la
 * pantalla. Con una altura fija habria que acertar tres numeros.
 */
.s4b-p-ficha--foto {
    padding: 0;
    gap: 0;
}

.s4b-p-ficha__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    /* GRIS `#f4f4f4`, el mismo de las tarjetas de producto y del mega-menu.
       Sin borde, un fondo blanco no delimitaria nada y la ficha se fundiria con
       la pagina. La foto va sobre blanco, asi que **necesita `multiply`**: ver
       la regla de la <img> justo debajo, las dos van juntas.
       (El 14/09/2026 estuvo en blanco un rato y se volvio al gris.) */
    background: #f4f4f4;
}

.s4b-p-ficha__media img {
    display: block;
    width: 100%;
    height: 100%;
    /* `cover` recorta por los lados en vez de deformar: el motivo va CENTRADO
       en la foto. */
    object-fit: cover;
    /* LA FOTO VIENE SOBRE BLANCO Y LA CAJA ES GRIS. Sin `multiply` se ve un
       RECTANGULO BLANCO dentro del gris, y como la ficha ya no tiene borde la
       tarjeta se funde con la pagina. Mismo tratamiento que las tarjetas de
       producto y las fichas del mega-menu. */
    mix-blend-mode: multiply;
    transition: transform .35s ease;
}

/* ZOOM SUAVE AL PASAR EL RATON (14/09/2026, peticion del cliente), el mismo 4%
   que las fichas de categoria. Lo recorta el `overflow: hidden` de `__media`. */
.s4b-p-ficha:hover .s4b-p-ficha__media img,
.s4b-p-ficha:focus-visible .s4b-p-ficha__media img {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .s4b-p-ficha__media img,
    .s4b-p-ficha:hover .s4b-p-ficha__media img { transition: none; transform: none; }
}

/* EL CUERPO ES COLUMNA SIEMPRE, TENGA FOTO O NO, y esto no es opcional: al
   envolver el nombre y el recuento en este <span> se perdio el apilado.
   Antes eran los dos hijos directos del enlace, que es `flex-direction: column`;
   al meterlos dentro de un span EN LINEA pasaron a compartir renglon.
   Se vio midiendo: nombre y recuento con el mismo `top`.
   Leccion: añadir un envoltorio a un contenedor flex saca a los hijos del flex. */
.s4b-p-ficha__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* El relleno que pierde el enlace con foto lo recupera aqui el texto. En la
   ficha SIN foto el relleno lo sigue poniendo el enlace. */
.s4b-p-ficha--foto .s4b-p-ficha__cuerpo {
    padding: 12px 14px;
}

/* Variante con icono: el icono manda arriba y el texto debajo. */
.s4b-p-ficha__icono {
    display: block;
    margin-bottom: 8px;
    color: #1a1a1a;
}

/* EN NEGRITA (14/09/2026, peticion del cliente): al quitar el borde, el titulo
   es lo que separa visualmente una ficha de la siguiente. */
.s4b-p-ficha__nombre { font-size: 14px; line-height: 1.3; font-weight: 700; }
.s4b-p-ficha__n      { font-size: 12px; color: #888; }

@media (max-width: 1199px) {
    .s4b-p-rejilla--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .s4b-p-rejilla--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .s4b-p-rejilla--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s4b-p-rejilla--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s4b-p-bloque     { padding: 24px 0; }

    /* SCOOTER A ANCHO COMPLETO EN MOVIL (14/09/2026, peticion del cliente).
     *
     * Es la primera del bloque y la que mas productos tiene (1.499 de 3.444),
     * asi que ocupa la fila entera y las otras cuatro se quedan en dos columnas
     * — que cuadran exactamente en dos filas, sin ningun hueco suelto.
     *
     * `1 / -1` Y NO `span 2`: `-1` es la ultima linea de la rejilla, asi que si
     * algun dia el numero de columnas cambia, esto sigue valiendo sin tocarlo.
     *
     * VA EN EL `<li>`, NO EN `.s4b-p-ficha`: el elemento de rejilla es el `li`;
     * la ficha es el `<a>` de dentro y ahi `grid-column` no hace nada.
     *
     * SOLO POR DEBAJO DE 576 px. Entre 576 y 991 la rejilla tiene TRES
     * columnas: alli la primera ocuparia la fila entera, las tres siguientes
     * llenarian la segunda y la quinta se quedaria sola en una tercera fila con
     * dos huecos al lado. Se ve peor que ahora. */
    .s4b-p-rejilla--5 > li:first-child { grid-column: 1 / -1; }

    /* LOS TIPOS DE MOTO, LAS SEIS IGUALES EN DOS COLUMNAS (15/09/2026, peticion
     * del cliente: «pon los tipos de escapes en mobile otra vez en 2 columnas
     * todos»).
     *
     * ESTO DESHACE EL «SCOOTER EN GRANDE» DEL 14/09, y es a proposito: aquello
     * se pidio con CINCO fichas, donde una grande + 4 en dos columnas cuadraba
     * exacto. Con seis ya no cuadraba y hubo que agrandar tambien la ultima
     * —dos fichas grandes, decision mia—. El cliente lo ve y prefiere las seis
     * iguales: 3 filas de 2, sin ningun hueco y sin ninguna destacada.
     *
     * POR ESO AQUI NO HAY NINGUN `grid-column`: la rejilla de dos columnas de
     * arriba ya hace todo el trabajo. Para volver a destacar la primera basta
     * con `.s4b-p-rejilla--6 > li:first-child { grid-column: 1 / -1 }` **y**
     * hacer lo mismo con `:last-child`, o la sexta se queda sola con un hueco
     * al lado.
     *
     * La regla de `--5` de aqui arriba se queda: es de `tipos-pieza.tpl`, que
     * hoy no se incluye en la portada, y alli son nueve fichas. */
}

/* ------------------------------------------------------------------ */
/*  Barra de garantías — cierre de la portada                          */
/* ------------------------------------------------------------------ */
.s4b-p-garantias {
    /* Era una banda negra (#232323) con texto blanco. En blanco hay que
     * INVERTIR TAMBIEN LOS CUATRO COLORES DE DENTRO (icono, titulo, texto y
     * enlace, mas el outline de foco): cambiar solo el fondo deja texto blanco
     * sobre blanco y el bloque desaparece sin dar ningun error. */
    background: #fff;
    color: #1a1a1a;
    /* SIN LINEA DIVISORIA (peticion del cliente, 13/09/2026): fuera el
     * `border-top`. Es el ultimo bloque, asi que lo que lo separa del anterior
     * son estos 40 px contra los 34 del bloque de arriba. */
    padding: 40px 0;
}

.s4b-p-garantias__lista {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.s4b-p-garantia__icono {
    display: block;
    margin: 0 auto 12px;
    color: #1a1a1a;
}

.s4b-p-garantia {
    text-align: center;
}

.s4b-p-garantia__titulo {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.s4b-p-garantia__texto {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    /* Gris medio, no negro: el texto secundario a maximo contraste compite con
       el titular. Sobre blanco, #666 da 5,7:1 — por encima del 4,5 que pide la
       WCAG. El valor anterior (#bdbdbd) estaba calculado para el fondo negro y
       sobre blanco se queda en 1,9:1, ilegible. */
    color: #666;
}

/* SIN SUBRAYADO Y EN NEGRITA (23/09/2026, peticion del cliente). La negrita
   es lo que ahora dice «esto es un enlace» en reposo, y el rojo al señalar
   —igual que los nombres de producto y los iconos de la cabecera— lo confirma.
   No quitar ninguno de los dos. */
.s4b-p-garantia__enlace {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
}

.s4b-p-garantia__enlace:hover,
.s4b-p-garantia__enlace:focus {
    color: #ff0123;
    text-decoration: none;
}

.s4b-p-garantia__enlace:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

@media (max-width: 991px) {
    .s4b-p-garantias__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .s4b-p-garantias       { padding: 28px 0; }
    .s4b-p-garantias__lista { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* La rejilla de tipo de pieza son 9 fichas desde la reorganizacion del
   13/09/2026 (eran 10, y se cayo «Materiales y componentes»): 5 y 4 en
   escritorio, con un hueco al final de la segunda fila. Comparte `--5` con el
   bloque de tipo de moto a proposito, para que las dos filas queden alineadas
   en la misma cuadricula; por eso NO se pasa a 3 columnas para cuadrar 9. */

/* --- cabeza de bloque con enlace a la derecha (como la referencia) --- */
.s4b-p-bloque__cabeza {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.s4b-p-bloque__todas {
    font-size: 13px;
    color: #1a1a1a;
    text-decoration: underline;
    margin-bottom: 18px;   /* alinea con el margen inferior del titular */
}

/* --- marcas ---
 * CARRUSEL EN MOVIL, REJILLA EN ESCRITORIO (14/09/2026, peticion del cliente).
 * El marcado es SIEMPRE el del carrusel; aqui se deshace por encima de 992 px.
 *
 * POR QUE ASI Y NO AL REVES (rejilla de base y carrusel en movil): el carrusel
 * necesita una envoltura y dos botones en el HTML, y el HTML no cambia con el
 * ancho. Poniendo el carrusel de base, deshacerlo en escritorio son seis
 * declaraciones; al reves habria que duplicar el bloque entero.
 *
 * NO HACE FALTA APAGAR EL JS EN ESCRITORIO: `repintar()` esconde las flechas y
 * `repintarBarra()` esconde la barra en cuanto `scrollWidth <= clientWidth`, y
 * en rejilla no hay desbordamiento. Comprobado leyendo `portada.js` antes de
 * montarlo, no despues. */
@media (min-width: 992px) {
    .s4b-p-carrusel--marcas .s4b-p-carrusel__pista {
        display: grid;
        /* `auto-fit` y no un numero fijo: son siete, y con un `repeat(4,...)` la
           segunda fila quedaria con tres huecos desiguales.
           OJO AL NUMERO DE MARCAS: el 22/09/2026 se probo con DIEZ y este mismo
           `auto-fit` **cabia 8, dejando una segunda fila de 2 con 6 huecos**
           (medido a 1440). Entonces hizo falta `repeat(5, minmax(0, 1fr))`.
           Se volvio a siete, asi que vale el auto-fit — pero si se vuelven a
           añadir marcas, hay que medirlo otra vez. */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        /* `visible` y no `auto`: con `auto` la rejilla seguiria pudiendo
           desplazarse y el teclado la trataria como region desplazable. */
        overflow-x: visible;
        padding-bottom: 0;
    }
}

/* CUANTAS FICHAS CABEN LO DECIDE EL TEXTO, NO EL LOGOTIPO.
 * El carrusel general usa 2,4 a <=991 y 1,6 a <=575. Con 1,6 un logotipo
 * saldria descomunal; pero con 2,4 la ficha se queda en 134 px y
 * «COMPRAR TURBO KIT» mide 167, **asi que el texto partia en dos lineas**. Y no
 * es solo estetica: las cajas de logo se estiran para compensar y los logos
 * dejan de estar alineados entre si.
 * Con 2,2 fichas y el texto a 11 px cabe en una linea y sigue asomando la
 * tercera, que es lo que dice que hay mas. Medido en pantalla, no calculado. */
@media (max-width: 575px) {
    .s4b-p-carrusel--marcas .s4b-p-carrusel__item {
        flex-basis: calc((100% - 2 * 12px) / 2.2);
    }

    .s4b-p-carrusel--marcas .s4b-p-marca__cta {
        font-size: 11px;
        letter-spacing: .02em;
    }
}

/* EL ENLACE ENVUELVE LA CAJA DEL LOGO **Y** UN TEXTO «Comprar X» (13/09/2026,
 * lo pidio el cliente por SEO, siguiendo a xlmoto).
 * Antes el `<a>` contenia SOLO la imagen, asi que el unico texto de ancla que
 * veia Google era el `alt`. Un enlace con texto visible es una señal de enlace
 * interno bastante mas fuerte, y de paso la zona pulsable deja de ser solo el
 * recuadro. */
.s4b-p-marca {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #1a1a1a;
    text-decoration: none;
    height: 100%;
}

/* La caja es un HIJO, no el enlace. `flex: 1 1 auto` para que en una fila con
   dos alturas de texto las cajas sigan alineadas abajo. */
.s4b-p-marca__caja {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    /* SIN BORDE (14/09/2026, peticion del cliente). Los logos flotan sobre el
       blanco de la portada, como en la referencia.
       **El `min-height` y el relleno SE QUEDAN** aunque ya no haya caja que
       dibujar: son lo que mantiene los siete logos a la misma altura y
       centrados entre si. Quitandolos, cada uno se alinearia segun su propio
       alto y la fila saldria escalonada.
       **Y el `:hover` que oscurecia el borde desaparece con el**: lo que indica
       ahora que se puede pulsar es el texto «Comprar X», que pasa a rojo, y el
       propio logo, que recupera su color. */
    min-height: 92px;
    padding: 14px;
    background: #fff;
}

.s4b-p-marca:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

/* El texto de ancla. Subrayado porque ES el enlace: sin el, un texto suelto
   bajo una caja no se lee como pulsable. */
.s4b-p-marca__cta {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.s4b-p-marca:hover .s4b-p-marca__cta { color: var(--hovercolor); }

/* Respaldo para una marca sin logotipo: el nombre dentro de la caja. Hoy las
   siete tienen logo, pero esto es lo que salva el bloque al añadir una marca
   nueva antes de que llegue su logo. */
.s4b-p-marca__nombre {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
}

.s4b-p-marca__logo {
    max-width: 100%;
    height: auto;
    /* Los logos vienen con fondos distintos; el filtro los iguala en gris y al
       pasar el raton recuperan su color. */
    filter: grayscale(1);
    opacity: .8;
    transition: filter .2s ease, opacity .2s ease;
}

.s4b-p-marca:hover .s4b-p-marca__logo {
    filter: none;
    opacity: 1;
}

/* --- destacados: 4 productos --- */
.s4b-p-rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* La miniatura del tema trae su propio margen para el listado; aqui la rejilla
   ya pone el hueco y se anula para que no descuadre. */
.s4b-p-productos .product-miniature { margin: 0; }

/* EL :hover DE LA FICHA DE DESTACADOS YA NO SE AJUSTA AQUI. Se arreglo el
   14/09/2026 quitandole el borde rojo y el salto; ese mismo dia la tarjeta paso
   a ir SIN BORDE en toda la web (`sin-radios.css`), asi que el problema
   desaparecio por construccion y esta regla sobraba. */

/* EL BOTON DE DESEOS YA NO ESTA AQUI: se movio a `sin-radios.css` el
   14/09/2026 para que valga en TODA la web (categoria, marca, busqueda...),
   no solo en la portada. */


@media (max-width: 991px) { .s4b-p-rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .s4b-p-rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ */
/*  Fila de tres banners secundarios                                    */
/* ------------------------------------------------------------------ */
.s4b-p-tiles { padding: 18px 0 0; }

.s4b-p-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.s4b-p-tile {
    position: relative;
    display: block;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    height: 100%;
}

.s4b-p-tile__img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .35s ease;
}

.s4b-p-tile:hover .s4b-p-tile__img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
    .s4b-p-tile__img,
    .s4b-p-tile:hover .s4b-p-tile__img { transition: none; transform: none; }
}

.s4b-p-tile__caja {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 20px;
    /* Degradado y no un color plano: el texto se lee sobre cualquier foto sin
       oscurecer la imagen entera. Las fotos las pone el cliente y no sabemos
       como seran. */
    background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
}

.s4b-p-tile__titular {
    display: block;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.15;
    /* `margin: 0 0 4px` COMPLETO, no solo `margin-bottom`: desde el 13/09/2026
     * esto es un <h2> y el navegador le pone margen ARRIBA por defecto, que
     * antes, siendo un <span>, no existia. Con `margin-bottom` a secas el
     * titular se separaba del borde inferior de la tarjeta.
     * `text-transform: none` por lo mismo: el tema capitaliza los encabezados y
     * en castellano eso escribe mal («Escapes Homologados»). */
    margin: 0 0 4px;
    text-transform: none;
    /* BLANCO EXPLICITO, y es una REGRESION QUE ME COMI AL CAMBIAR LA ETIQUETA:
     * siendo un <span> heredaba el blanco de la tarjeta, que va sobre foto
     * oscura. Al pasar a <h2>, el tema le da su propio color a los encabezados
     * (#253237) y la herencia deja de valer: el titular quedo azul oscuro sobre
     * foto oscura, casi ilegible.
     * ES EL MISMO PATRON QUE `color: inherit`: cambiar una etiqueta por otra
     * puede cambiar el color aunque no se toque ninguna regla de color. Al
     * convertir un texto en encabezado, MIRARLO en pantalla. */
    color: #fff;
}

.s4b-p-tile__texto {
    display: block;
    font-size: 13px;
    color: #e6e6e6;
    margin-bottom: 12px;
}

/* Es un <span>, no un <a>: la ficha entera ya es el enlace y un <a> dentro de
   otro <a> es HTML invalido. Se le da aspecto de boton. */
.s4b-p-tile__boton {
    display: inline-block;
    padding: 9px 18px;
    background: #fff;
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 600;
}

.s4b-p-tile:hover .s4b-p-tile__boton { background: #f0f0f0; }

.s4b-p-tile:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/*  Categorías populares                                               */
/* ------------------------------------------------------------------ */
.s4b-p-pop {
    display: block;
    color: #1a1a1a;
    text-decoration: none;
}

.s4b-p-pop__foto {
    display: block;
    overflow: hidden;
    background: #fff;
}

.s4b-p-pop__foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .35s ease;
}

.s4b-p-pop:hover .s4b-p-pop__foto img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
    .s4b-p-pop__foto img,
    .s4b-p-pop:hover .s4b-p-pop__foto img { transition: none; transform: none; }
}

.s4b-p-pop__pie {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 2px 0;
    border-bottom: 2px solid #1a1a1a;
    padding-bottom: 10px;
}

.s4b-p-pop__nombre {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.s4b-p-pop__n { font-size: 12px; color: #888; }

/* ------------------------------------------------------------------ */
/*  Categorias principales (carrusel)                                   */
/* ------------------------------------------------------------------ */
/* Sustituye a «Categorias populares». Comparte el carrusel con Destacados y
 * solo cambia cuantas fichas caben: son etiquetas cortas, no productos, asi
 * que entran mas por pantalla. */
.s4b-p-carrusel--cat .s4b-p-carrusel__item {
    flex-basis: calc((100% - 5 * 12px) / 5.4);
}

.s4b-p-cat {
    display: block;
    color: #1a1a1a;
    text-decoration: none;
}

.s4b-p-cat__media {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* CUADRADO SIEMPRE, haya foto o icono. Sin esto, las fichas con icono
     * quedarian mas bajas que las que ya tengan foto y la fila saldria
     * escalonada segun que categorias tengan imagen. */
    aspect-ratio: 1 / 1;
    /* GRIS `#f4f4f4`. Sin borde, un fondo blanco no delimita nada.
       Va SIEMPRE con el `multiply` de la <img> de abajo: estas fotos vienen
       compuestas sobre blanco y sin la mezcla se ve un rectangulo blanco dentro
       del gris. **Cambiar una de las dos sin la otra rompe el bloque.** */
    background: #f4f4f4;
}

.s4b-p-cat__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Igual que en las fichas de tipo de moto: foto sobre blanco, caja gris. */
    mix-blend-mode: multiply;
    transition: transform .35s ease;
}

/* EL TAMAÑO DEL ICONO SE MANDA DESDE AQUI, no desde los atributos `width` y
 * `height` del <svg>. En una ficha de 247 px el icono de 44 que traia el
 * marcado se perdia en medio del cuadro. Los atributos se quedan como respaldo
 * por si la hoja no llega a cargar. */
.s4b-p-cat__icono {
    /* EN PORCENTAJE, NO EN PIXELES: la ficha mide 247 px en escritorio y 134 en
     * movil, asi que un tamaño fijo se pierde en una pantalla o desborda en la
     * otra. Con 30% el icono guarda la misma proporcion en las dos. Los
     * atributos `width`/`height` del <svg> se quedan como respaldo por si la
     * hoja no llega a cargar. */
    width: 30%;
    height: 30%;
    color: #1a1a1a;
}

/* ZOOM SUAVE AL PASAR EL RATON (14/09/2026, peticion del cliente).
 *
 * NO hay borde que oscurecer —se retiro el mismo dia—, asi que el zoom es lo
 * unico que dice que la ficha se pulsa. Es un 4%: lo justo para que se note el
 * movimiento sin que el motivo se salga de encuadre.
 *
 * FUNCIONA PORQUE `.s4b-p-cat__media` LLEVA `overflow: hidden`. Sin eso la foto
 * ampliada se saldria de su cuadro y pisaria a la ficha de al lado.
 *
 * Se anima SOLO `transform`, que el compositor resuelve sin recalcular
 * maquetacion: esta fila tiene nueve fotos y el carrusel se desplaza a la vez. */
.s4b-p-cat:hover .s4b-p-cat__media img,
.s4b-p-cat:focus-visible .s4b-p-cat__media img {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .s4b-p-cat__media img,
    .s4b-p-cat:hover .s4b-p-cat__media img { transition: none; transform: none; }
}

.s4b-p-cat:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

.s4b-p-cat__pie {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 2px;
}

.s4b-p-cat__nombre {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.s4b-p-cat__n { font-size: 12px; color: #888; }

/* ------------------------------------------------------------------ */
/*  Marca destacada                                                     */
/* ------------------------------------------------------------------ */
.s4b-p-marcadest { padding: 34px 0; background: #fff; }

.s4b-p-marcadest__caja {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    /* AQUI HUBO UN `max-height: 440px` Y ERA UN FALLO, no un ajuste.
     *
     * `max-height` en un contenedor de rejilla NO encoge la fila: la fila la
     * dimensiona su contenido (aqui 558 px), asi que el tope solo recortaba LA
     * CAJA mientras los hijos seguian midiendo 558 y **se salian por abajo**.
     * Medido: el panel sobresalia 84 px de la seccion y se montaba encima del
     * titulo del bloque siguiente, «Marcas que trabajamos». Pasaba en
     * escritorio Y en movil.
     *
     * Lo que se buscaba era que la foto no estirara la fila y dejara el panel
     * de texto medio vacio. Eso se consigue sacando la foto del calculo de la
     * altura —va en `position: absolute`, ver abajo—, no tapando la caja.
     * Asi la fila mide lo que pide el TEXTO, que es lo unico que no se puede
     * recortar, y la foto se adapta.
     *
     * `min-height` para que con un texto corto siga leyendose como un bloque
     * destacado y no como una tira. */
    min-height: 320px;
}

/* La foto NO debe participar en el calculo de la altura de la fila: si lo hace,
 * su proporcion 1200x800 manda y el panel de texto queda con un hueco vacio
 * debajo. Con `absolute` dentro de una celda `relative`, la foto ocupa lo que
 * le den y no estira nada. */
/* SIN FONDO NI MEZCLA, A PROPOSITO (14/09/2026, decision del cliente).
   Se le puso el gris `#f4f4f4` con `multiply` —el mismo tratamiento que las
   fichas de categoria y de tipo de moto, que tambien son fotos sobre blanco— y
   se retiro en el acto: esta va A SANGRE, con su blanco.
   **La diferencia con las otras dos es el tamaño**: aqui la foto ocupa media
   fila y se sostiene sola; alli son cuadros de 134-247 px que sin fondo no se
   distinguen de la pagina. NO unificarlo «por coherencia». */
.s4b-p-marcadest__foto {
    position: relative;
    overflow: hidden;
}

.s4b-p-marcadest__foto img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s4b-p-marcadest__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    /* Blanco como el resto. El borde sustituye al gris que antes delimitaba el
     * panel frente a la foto de al lado. */
    /* SIN BORDE. Lo que delimita el panel es la foto que tiene al lado. */
    background: #fff;
}

.s4b-p-marcadest__ante {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #777;
}

.s4b-p-marcadest__titular {
    /* Ya era `margin: 0 0 12px`, que sigue valiendo ahora que es un <h2>.
       `text-transform: none` SI hace falta: el tema capitaliza los encabezados. */
    text-transform: none;
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
}

.s4b-p-marcadest__texto {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

.s4b-p-marcadest__boton {
    align-self: flex-start;
    padding: 13px 26px;
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.s4b-p-marcadest__boton:hover,
.s4b-p-marcadest__boton:focus { background: #000; color: #fff; }

@media (max-width: 991px) {
    .s4b-p-rejilla--3 { grid-template-columns: minmax(0, 1fr); }
    /* La foto encima y el texto debajo: en una columna estrecha el panel
       lateral quedaria en una tira ilegible. */
    .s4b-p-marcadest__caja {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    /* APILADA, LA FOTO NECESITA ALTURA PROPIA. Arriba se saca del flujo con
     * `absolute` para que no estire la fila; aqui ya no hay fila que estirar y
     * sin una proporcion declarada la celda se quedaria en 0 px y la foto
     * desapareceria. */
    .s4b-p-marcadest__foto {
        aspect-ratio: 3 / 2;

        /* A SANGRE EN MOVIL (14/09/2026, peticion del cliente): la foto llega a
         * los dos bordes de la pantalla. **El texto NO**: sigue con su margen,
         * que es lo que lo hace legible.
         *
         * SE SACA CON MARGEN NEGATIVO DE 15 px, que es EXACTAMENTE el relleno
         * lateral de `.s4b-contenedor`. No es un numero al azar: si algun dia
         * cambia ese relleno, hay que cambiar este.
         *
         * NO SE USA `width: 100vw` + `margin-left: calc(50% - 50vw)`, que es el
         * truco habitual: **`100vw` incluye la barra de desplazamiento**, asi que
         * mete desbordamiento horizontal en la pagina y eso descuadra el resto
         * del diseño. Ya se descarto por lo mismo al sacar el panel del
         * mega-menu a todo el ancho. */
        margin-left: -15px;
        margin-right: -15px;
    }
    .s4b-p-marcadest__panel { padding: 28px; }
    .s4b-p-marcadest__titular { font-size: 21px; }
}

@media (max-width: 767px) {
    .s4b-p-marcadest__boton {
        display: block;
        width: 100%;
        text-align: center;
        align-self: stretch;
    }
}

/* ------------------------------------------------------------------ */
/*  Carrusel horizontal (productos o categorías)                        */
/* ------------------------------------------------------------------ */
/* El carrusel lo hace el NAVEGADOR: `overflow-x` + `scroll-snap`. El JS solo
 * añade las flechas. Asi la fila funciona con el dedo, con la rueda y con el
 * teclado aunque el JavaScript no llegue a ejecutarse. */
.s4b-p-carrusel {
    position: relative;
}

.s4b-p-carrusel__pista {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0 0 12px;   /* sitio para la barra de desplazamiento */
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;   /* no arrastra la pagina entera al llegar al final */
    /* `proximity` Y NO `mandatory`, y es una decision medida:
     * con `mandatory` el navegador re-ancla la pista CADA VEZ que cambia de
     * tamaño, y las imagenes de producto van en diferido — asi que mientras
     * cargan, la fila se queda pegada y **el primer clic en la flecha se
     * pierde**. Comprobado el 12/09/2026.
     * Con `proximity` el anclaje sigue notandose al soltar el dedo, pero no
     * pelea con el contenido que aun esta creciendo. */
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
}

.s4b-p-carrusel__pista:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 3px;
}

.s4b-p-carrusel__item {
    /* `0 0 auto` con ancho explicito: en un contenedor flex las fichas se
       encogerian para caber todas y no habria nada que desplazar.
       El 5.º asoma a proposito — es lo que le dice al visitante que hay más. */
    flex: 0 0 calc((100% - 4 * 12px) / 4.4);
    min-width: 0;
    scroll-snap-align: start;
}

/* --- barra propia ---------------------------------------------------
 * La barra del navegador SOLO se oculta cuando el JavaScript ha construido la
 * propia (clase `--barra`). Si el JS no se ejecuta, se conserva la nativa: sin
 * ninguna de las dos, nada indicaria que hay mas contenido a la derecha.
 */
.s4b-p-carrusel--barra .s4b-p-carrusel__pista {
    padding-bottom: 0;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* Edge antiguo */
}

.s4b-p-carrusel--barra .s4b-p-carrusel__pista::-webkit-scrollbar {
    display: none;                    /* Chrome, Safari */
}

/* Mientras no hay barra propia, la nativa se deja fina y discreta. */
.s4b-p-carrusel__pista::-webkit-scrollbar { height: 4px; }
.s4b-p-carrusel__pista::-webkit-scrollbar-track { background: #f0f0f0; }
.s4b-p-carrusel__pista::-webkit-scrollbar-thumb { background: #c9c9c9; }
.s4b-p-carrusel__pista { scrollbar-width: thin; scrollbar-color: #c9c9c9 #f0f0f0; }

.s4b-p-carrusel__barra {
    position: relative;
    /* `content-box` ES OBLIGATORIO AQUI. El tema pone `box-sizing: border-box`
     * en todo, y con eso `height: 2px` + `padding: 9px 0` deja la caja de
     * CONTENIDO en 0 px: con `background-clip: content-box` la guia no se pinta
     * y solo se ve el tramo oscuro. Comprobado muestreando los pixeles el
     * 12/09/2026: la barra medía 18 px de alto y era toda relleno. */
    box-sizing: content-box;
    height: 2px;
    margin-top: 18px;
    /* #d5d5d5 y no #e8e8e8: a 2 px de alto, un gris mas claro sobre blanco
       sencillamente no se ve. */
    background: #d5d5d5;
    cursor: pointer;
    /* Zona de agarre mas alta que la linea: 2 px de alto son imposibles de
       pinchar con el raton, y en tactil aun peor. El relleno no se ve. */
    padding: 9px 0;
    background-clip: content-box;
    /* Sin `touch-action: none` el navegador se queda el gesto para desplazar la
       pagina y el arrastre de la barra no llega a ejecutarse. */
    touch-action: none;
}

.s4b-p-carrusel__tramo {
    position: absolute;
    top: 9px;
    left: 0;
    height: 2px;
    background: #1a1a1a;
    /* Sin transicion: la barra sigue al dedo, y una animacion aqui se percibe
       como retraso. El movimiento suave lo pone ya el desplazamiento. */
    will-change: transform;
}

.s4b-p-carrusel__barra:hover { background-color: #b9b9b9; }

@media (prefers-reduced-motion: reduce) {
    .s4b-p-carrusel__tramo { transition: none; }
}

.s4b-p-carrusel__flecha {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #1a1a1a;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.s4b-p-carrusel__flecha:hover { background: #1a1a1a; color: #fff; }

.s4b-p-carrusel__flecha[disabled] {
    opacity: .35;
    cursor: default;
    box-shadow: none;
}

.s4b-p-carrusel__flecha[disabled]:hover { background: #fff; color: #1a1a1a; }

.s4b-p-carrusel__flecha--izq { left: -14px; }
.s4b-p-carrusel__flecha--der { right: -14px; }

.s4b-p-carrusel__flecha:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .s4b-p-carrusel__pista { scroll-behavior: auto; }
}

@media (max-width: 991px) {
    .s4b-p-carrusel__item { flex-basis: calc((100% - 2 * 12px) / 2.4); }
    /* En pantalla tactil las flechas estorban: se desliza con el dedo. */
    .s4b-p-carrusel__flecha { display: none; }
}

@media (max-width: 575px) {
    .s4b-p-carrusel__item { flex-basis: calc((100% - 12px) / 1.6); }
}

/* Las fichas de categoria son mas estrechas que las de producto, asi que en
   pantallas pequeñas caben mas que las 2,4 / 1,6 del carrusel general. */
@media (max-width: 991px) {
    .s4b-p-carrusel--cat .s4b-p-carrusel__item { flex-basis: calc((100% - 3 * 12px) / 3.4); }
}

@media (max-width: 575px) {
    .s4b-p-carrusel--cat .s4b-p-carrusel__item { flex-basis: calc((100% - 2 * 12px) / 2.4); }
}

/* ------------------------------------------------------------------ */
/*  El texto de las fichas de la portada, en negro (13/09/2026)         */
/* ------------------------------------------------------------------ */
/* Las fichas de la portada —categorias, tipo de moto, marcas, populares— eran
 * enlaces con `color: inherit`, y lo que heredaban NO era negro: era el color de
 * enlace del tema, un **morado `rgb(82,21,65)`**. Se ve casi negro de reojo y
 * canta al lado de un titulo de verdad.
 *
 * `inherit` cambiado por el negro explicito en las seis reglas donde estaba. Es
 * la leccion: en un enlace, `color: inherit` NO significa «el color del texto
 * normal», significa «el que venga de arriba», y de arriba viene el del tema.
 *
 * Se deja `:hover` a `--hovercolor` (rojo) donde ya lo tenia: eso es
 * deliberado. */


/* ------------------------------------------------------------------ */
/*  Las dos tarjetas grandes (14/09/2026)                              */
/*  Referencia: el bloque «revista / añade tu moto» de xlmoto.         */
/* ------------------------------------------------------------------ */

/* El titular de la seccion NO SE VE, pero existe. La referencia no pone titulo
   a este bloque y no hay uno que aporte algo: inventar «Antes de comprar» en
   grande seria ruido. Pero la seccion necesita un nombre accesible y un h2 que
   no rompa el esquema de encabezados de la portada (un h1 y ocho h2).
   Se oculta EN LO VISUAL, nunca con `display: none`, que lo sacaria tambien del
   arbol de accesibilidad y dejaria la seccion sin nombre. */
.s4b-p-tarjetas__oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.s4b-p-tarjetas__lista {
    display: grid;
    /* `auto-fit` con minimo: **con una sola tarjeta ocupa el ancho entero** en
       vez de dejar media fila vacia. Hoy es el caso real, porque la del blog no
       se pinta hasta que haya articulos. */
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.s4b-p-tarjeta {
    display: flex;
    flex-direction: column;
}

.s4b-p-tarjeta__media {
    /* La proporcion se declara AQUI y no depende de que haya imagen: asi el
       hueco es el mismo con foto y sin ella, y la fila no se descuadra segun
       que tarjeta la tenga. */
    aspect-ratio: 1200 / 680;
    overflow: hidden;
    /* Sin foto queda un panel oscuro. Es la misma decision que el banner de la
       portada: un hueco blanco sobre fondo blanco no se lee como un bloque. */
    background: #1a1a1a;
    margin-bottom: 18px;
}

.s4b-p-tarjeta__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s4b-p-tarjeta__cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Misma escala que el bloque de asesoramiento: no se inventa un tercer estilo
   de titular para la misma pagina. */
.s4b-p-tarjeta__ante {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #777;
}

.s4b-p-tarjeta__titular {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    /* El tema capitaliza los encabezados y en castellano eso escribe mal. */
    text-transform: none;
    color: #1a1a1a;
}

.s4b-p-tarjeta__texto {
    margin: 0 0 22px;
    /* Tope de lectura: a dos columnas de 1.440 px una linea se iria a ~90
       letras. Lo comodo son 60-80. */
    max-width: 56ch;
    font-size: 15px;
    line-height: 1.6;
    color: #555;
}

.s4b-p-tarjeta__boton {
    /* `margin-top: auto` empuja el boton al pie: con dos tarjetas de texto
       desigual, los botones siguen alineados entre si. */
    margin-top: auto;
    align-self: flex-start;
    padding: 13px 26px;
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.s4b-p-tarjeta__boton:hover,
.s4b-p-tarjeta__boton:focus { background: #000; color: #fff; }

.s4b-p-tarjeta__boton:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 3px;
}

/* UNA SOLA TARJETA: a dos columnas, no a lo ancho.
 * A ancho completo su panel de imagen medía **791 px de alto** —mas que la
 * ventana— y el bloque se leia como un muro negro. Asi queda como el bloque de
 * asesoramiento: imagen al lado del texto.
 * Es el caso REAL de hoy, porque la tarjeta del blog no se pinta hasta que haya
 * articulos; en cuanto lo haya, esta regla deja de aplicarse sola. */
.s4b-p-tarjetas__lista--una .s4b-p-tarjeta {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 32px;
    align-items: center;
}

.s4b-p-tarjetas__lista--una .s4b-p-tarjeta__media { margin-bottom: 0; }

/* El cuerpo deja de estirarse: con `flex: 1 1 auto` y una celda alta, el boton
   se iba al fondo y quedaba despegado del texto. */
.s4b-p-tarjetas__lista--una .s4b-p-tarjeta__cuerpo { flex: 0 0 auto; }
.s4b-p-tarjetas__lista--una .s4b-p-tarjeta__boton { margin-top: 0; }

@media (max-width: 991px) {
    /* Por debajo de 992 el minimo de 420 px ya no cabe y `auto-fit` colapsa
       solo, pero se declara explicito para no depender de ese calculo. */
    .s4b-p-tarjetas__lista { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .s4b-p-tarjeta__titular { font-size: 21px; }

    /* Apilada tambien la de una sola: en una columna estrecha, media imagen y
       medio texto no caben uno al lado del otro. */
    .s4b-p-tarjetas__lista--una .s4b-p-tarjeta {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .s4b-p-tarjetas__lista--una .s4b-p-tarjeta__media { margin-bottom: 0; }
}

@media (max-width: 767px) {
    .s4b-p-tarjeta__boton {
        display: block;
        width: 100%;
        text-align: center;
        align-self: stretch;
    }
}

/* ------------------------------------------------------------------ */
/*  BANNERS: TRES A LA VEZ EN ESCRITORIO, CARRUSEL EN MOVIL            */
/*  (14/09/2026, peticion del cliente)                                 */
/*                                                                     */
/*  Sustituye al banner unico apaisado con carrusel propio de          */
/*  `transform`. Ahora se apoya en el carrusel reutilizable de la       */
/*  portada, igual que categorias y marcas: mismo patron, un solo JS.   */
/* ------------------------------------------------------------------ */
.s4b-p-banners {
    padding: 0 0 6px;
}

/* **3:4 (VERTICALES) desde el 14/09/2026**, peticion del cliente. Antes eran
   cuadrados (1:1), y antes de eso un solo banner apaisado.
   LA PROPORCION SE DECLARA EN EL BANNER, no en el item del carrusel: asi vale
   igual con foto y sin ella, y los tres miden lo mismo aunque uno tenga el
   titular en dos lineas.
   **ES EL UNICO SITIO donde hay que tocarla**: las otras dos reglas con
   `aspect-ratio: 1/1` que quedan en este fichero son del diseño del banner UNICO
   —el de `--sinfoto`— y aqui estan anuladas (`aspect-ratio: auto` mas abajo).
   Si se cambia otra vez, hay que cambiar tambien los atributos `width`/`height`
   del `<img>` en `banners.tpl` y la medida que se le pide al cliente en
   `datos.tpl` y en el LEEME, o vuelve el salto de maquetacion al cargar. */
.s4b-p-carrusel--banners .s4b-p-banner {
    position: relative;
    display: flex;
    /* ABAJO, no centrado: es donde estaba el texto del banner de movil y donde
       lo coloca la version con foto, asi que el dia que lleguen las imagenes el
       texto no cambia de sitio. */
    align-items: flex-end;
    /* UN POCO MAS ALTOS (19/09/2026, peticion del cliente: «dale un poco mas de
       tamaño al banner»). De 3/4 a 2/3.
       El ANCHO no se puede tocar: en escritorio son tres columnas iguales y en
       movil 1,15 tarjetas por pantalla, asi que el unico modo de agrandarlos es
       la proporcion. Medido a 1440: cada uno pasa de 454x606 a **454x681**
       (+75 px); a 390, de 290x386 a 290x435.
       CONTRAPARTIDA, la misma que ya se anoto al pasar de cuadrado a 3/4: todo
       lo que hay debajo baja otros 75 px, y el selector de moto queda aun mas
       lejos de asomar en un portatil.
       LAS FOTOS NO SE REGENERAN: son 1080x1440 y `cover` recorta un 5,5% por
       cada lado, que en estas dos no toca el motivo. **A partir de ahora la
       medida que se pide al cliente es 1080x1620.** */
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: #1a1a1a;
    color: #fff;
}

.s4b-p-carrusel--banners .s4b-p-banner__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* `cover` recorta por los lados en vez de deformar: el motivo tiene que ir
       CENTRADO en la imagen. */
    object-fit: cover;
    object-position: center;
    /* Se anulan los topes del banner apaisado anterior. */
    max-height: none;
}

/* EL DEGRADADO YA NO VIVE AQUI (19/09/2026). Ver el bloque `::after` al final
   del fichero: cubre el banner ENTERO en vez de solo la caja del texto. */
.s4b-p-carrusel--banners .s4b-p-banner__caja {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 22px;
    background: none;
    /* ESTOS TRES ANULAN EL BANNER APAISADO ANTERIOR, y sin ellos el bloque sale
     * roto: `.s4b-p-banner--sinfoto .s4b-p-banner__caja` sigue declarando
     * `display: flex; align-items: center; min-height: 220px` unas lineas mas
     * arriba. Con eso, **el titular, el texto y el boton salian EN FILA** en vez
     * de apilados. Se vio en pantalla, no leyendo el CSS: las dos reglas tienen
     * la misma especificidad y solo se pisan las propiedades que se repiten.
     * Aquellas reglas se conservan por si se vuelve al banner unico. */
    display: block;
    align-items: initial;
    min-height: 0;
    /* Y ESTE ES EL TERCERO, que solo se veia en MOVIL: aquel diseño le daba a la
     * CAJA `aspect-ratio: 1/1` por debajo de 768 px. Con la caja convertida en
     * un cuadrado del alto de la tarjeta, el texto se iba ARRIBA del todo — el
     * `align-items: flex-end` del banner no tenia nada que empujar.
     * Comprobando solo en escritorio no aparece. */
    aspect-ratio: auto;
}

.s4b-p-carrusel--banners .s4b-p-banner__titular {
    margin: 0 0 4px;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 700;
    /* El tema capitaliza los encabezados y en castellano eso escribe mal. Hace
       falta aqui porque el primero es un <h1>. */
    text-transform: none;
    color: #fff;
}

.s4b-p-carrusel--banners .s4b-p-banner__texto {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.45;
    /* Blanco roto, no gris: sobre foto un gris medio puede quedarse sin
       contraste segun la imagen que llegue. */
    color: #e8e8e8;
}

/* LOS TRES TEXTOS ARRANCAN A LA MISMA ALTURA (22/09/2026, peticion del
 * cliente). La caja va anclada ABAJO desde el 19/09, asi que el bloque crece
 * hacia arriba: un texto con una linea menos empuja su titular 20 px mas abajo
 * y los tres titulares quedan escalonados.
 *
 * **NO VALE RESERVAR DOS LINEAS, Y ESO SOLO SE VE MIDIENDO A VARIOS ANCHOS:**
 * el numero de lineas cambia con el ancho de la tarjeta, y tambien CUAL es el
 * texto mas largo. Medido sobre el texto real:
 *     tarjeta 454 px (ventana 1440) -> 2 · 2 · 1
 *     tarjeta 341 px (ventana 1100) -> 3 · 2 · 2   <- aqui manda el primero
 *     tarjeta 300 px (ventana  992) -> 3 · 3 · 2
 * O sea que el peor caso en escritorio son TRES lineas. Reservandolas, los
 * tres quedan alineados en todo el rango.
 *
 * Contrapartida asumida: a 1440 sobra una linea de hueco entre el texto y el
 * boton. Como es igual en los tres, se lee como aire y no como descuadre.
 *
 * **SI SE CAMBIA UN TEXTO, HAY QUE VOLVER A MEDIR ESTE NUMERO.** Un texto que
 * llegue a 4 lineas vuelve a descolgar su banner.
 *
 * `lh` es la unidad de altura de linea: se ajusta sola si cambia el
 * `line-height`. El valor en px va delante como respaldo (14 x 1,45 x 3).
 *
 * SOLO EN ESCRITORIO: por debajo de 992 es un carrusel y se ve una tarjeta
 * cada vez, asi que alinear no aporta y solo añadiria alto. */
@media (min-width: 992px) {
    .s4b-p-carrusel--banners .s4b-p-banner__texto {
        min-height: 61px;
        min-height: 3lh;
    }
}

.s4b-p-carrusel--banners .s4b-p-banner__boton {
    display: inline-block;
    padding: 11px 22px;
    background: #fff;
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

/* ROJO AL SEÑALAR (29/09/2026, peticion del cliente; antes pasaba a negro).
   `#d9001d` y no el `#ff0123` de la marca: blanco sobre este da 5,29:1 y
   sobre el de marca 3,98:1, por debajo del minimo de la WCAG. Es el mismo
   rojo de los botones de compra y de la franja de la cabecera. */
.s4b-p-carrusel--banners .s4b-p-banner__boton:hover,
.s4b-p-carrusel--banners .s4b-p-banner__boton:focus-visible {
    background: #d9001d;
    color: #fff;
}

/* --- ESCRITORIO: los tres a la vez, sin carrusel --- */
@media (min-width: 992px) {
    .s4b-p-carrusel--banners .s4b-p-carrusel__pista {
        display: grid;
        /* TRES FIJAS, no `auto-fit`: el cliente pidio ver tres a la vez. Con
           `auto-fit` el numero cambiaria segun el ancho de la ventana. */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        /* `visible` y no `auto`: con `auto` la rejilla seguiria siendo una
           region desplazable para el teclado. */
        overflow-x: visible;
        padding-bottom: 0;
    }

    .s4b-p-carrusel--banners .s4b-p-banner__titular { font-size: 26px; }
    .s4b-p-carrusel--banners .s4b-p-banner__caja    { padding: 28px; }
}

/* --- MOVIL: carrusel, una tarjeta y un asomo de la siguiente --- */
@media (max-width: 991px) {
    /* MAS ANCHOS (19/09/2026, peticion del cliente: «dale un poco mas de
       anchura a los banners»). De 1,15 tarjetas por pantalla a 1,08.
       Medido a 390: **316 → 336 px**, y el asomo de la siguiente baja de 47 a
       27 px.
       NO SE BAJA A 1: ese trozo de la siguiente **es lo unico que dice que hay
       mas banners**. Con una exacta por pantalla, el carrusel parece una foto
       fija y nadie desliza. 27 px siguen viendose; por debajo de ~20 ya no. */
    .s4b-p-carrusel--banners .s4b-p-carrusel__item {
        flex-basis: calc((100% - 12px) / 1.08);
    }
}

/* ==========================================================================
   EL DEGRADADO DE LOS BANNERS, SOLO DONDE HAY FOTO (18/09/2026, lo vio el
   cliente: «el degradado de los banner esta mal»).

   La regla de `.s4b-p-carrusel--banners .s4b-p-banner__caja` lo pone en los
   TRES, y su comentario dice «sin foto no molesta: el fondo ya es oscuro».
   **Es falso.** La caja del texto solo ocupa los 167-217 px de abajo de un
   banner de 606, asi que sobre el negro solido del banner SIN foto el
   degradado dibuja un rectangulo mas oscuro **con un borde horizontal visible
   a media altura**. Solo se aprecia mirando los tres juntos: aislado, cada uno
   parece correcto.

   Donde SI hace falta es sobre la foto, que es para lo que se puso.
   Vuelta atras: borrar este bloque.
   ========================================================================== */
.s4b-p-carrusel--banners .s4b-p-banner--sinfoto .s4b-p-banner__caja {
    background: none;
}

/* ==========================================================================
   SEGUNDA PASADA DEL DEGRADADO (19/09/2026, «corrige el degradado»).

   EL PRIMER ARREGLO —quitarlo de los banners SIN foto— era correcto pero no
   era todo. Lo que quedaba mal es DONDE estaba: el degradado colgaba de
   `.s4b-p-banner__caja`, que **arranca al 47% del alto** (medido: caja de
   216 px en un banner de 473), asi que su borde superior cae a media foto.
   Sobre una imagen clara ahi, ese arranque se lee como una costura.

   MEDIDO ANTES DE TOCAR: muestreando la luminancia fila a fila del banner
   publicado **no aparece un salto duro** en y=224 — el degradado en si estaba
   bien construido (`to top`, de .72 a transparente). O sea que el defecto no
   es un error de codigo: es que **un degradado que empieza a media altura solo
   puede quedar bien si la foto coopera**, y aqui las fotos las manda el
   cliente y no se sabe como seran.

   SOLUCION: se mueve a un `::after` sobre el BANNER ENTERO, con tres paradas.
   Al cubrir del 0 al 100% no hay borde posible, y el texto se lee sobre
   cualquier foto sin depender de que su parte baja sea oscura.

   SOLO DONDE HAY FOTO (`:not(--sinfoto)`): sobre el negro solido volveria a
   dibujar el rectangulo que se quito esta misma mañana.

   EL APILADO IMPORTA Y ES FRAGIL: la `<img>` es `position: absolute` sin
   `z-index`, este `::after` va despues en el orden de pintado y por eso queda
   ENCIMA de la foto; y la caja del texto lleva `z-index: 1`, que la deja por
   encima de los dos. **Si alguien le pone `z-index` a la imagen, el degradado
   desaparece debajo de ella** y el texto se queda sin fondo.

   `pointer-events: none` para que no se coma el clic del boton.

   Vuelta atras: borrar este bloque y devolver el `background: linear-gradient(
   to top, rgba(0,0,0,.72), rgba(0,0,0,0))` a `.s4b-p-banner__caja`.
   ========================================================================== */
.s4b-p-carrusel--banners .s4b-p-banner:not(.s4b-p-banner--sinfoto)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to top,
        rgba(0, 0, 0, .80) 0%,
        rgba(0, 0, 0, .55) 28%,
        rgba(0, 0, 0, .18) 58%,
        rgba(0, 0, 0, 0)  100%);
}

/* ==========================================================================
   LOS CARRUSELES, A SANGRE EN MOVIL (18/09/2026, peticion del cliente: «que
   esta seccion y todos los slider sean a ancho completo sin padding en
   mobile»).

   Son los TRES de la portada —banners, categorias y marcas—, asi que la regla
   va en la pista generica y no en cada modificador.

   **SE SACA CON MARGEN NEGATIVO DE 15 px, QUE ES EXACTAMENTE EL RELLENO DE
   `.s4b-contenedor`** (`cabecera.css:23`). Si ese relleno cambia algun dia,
   hay que cambiar este numero o los carruseles dejaran de cuadrar con el borde.

   **NO SE USA `width: 100vw` + `margin-left: calc(50% - 50vw)`**, que es el
   truco habitual: `100vw` INCLUYE la barra de desplazamiento y mete desborde
   horizontal en la pagina. Ya se descarto por lo mismo en la foto de
   asesoramiento y en el panel del mega-menu.

   **NO SE COMPENSA CON `padding-left`.** Lo normal seria reponer los 15 px
   dentro de la pista para que la PRIMERA tarjeta siguiera alineada con los
   titulos; el cliente pide expresamente lo contrario: a ras del borde.

   **La barra de progreso y las flechas NO se mueven**: viven fuera de la
   pista, asi que siguen alineadas con el titulo de su seccion, que es lo que
   las hace legibles como control de esa seccion.

   Solo por debajo de 992 px. En escritorio `--banners` es una rejilla y
   `--marcas` tambien, asi que ahi no hay nada que sacar.
   Vuelta atras: borrar este bloque.
   ========================================================================== */
@media (max-width: 991px) {
    .s4b-p-carrusel__pista {
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ==========================================================================
   EL CARRUSEL DE DESTACADOS RECUPERA SU MARGEN IZQUIERDO (19/09/2026, lo vio
   el cliente: «en este slider que es de productos, dale un poco de margen a la
   izquierda, para que no salga la info tan pegada»).

   MATIZA LA SANGRE GENERAL DE ESTA MISMA MAÑANA, y con motivo: en las tarjetas
   de PRODUCTO el texto va pegado al borde de su foto —el relleno horizontal de
   `.product_desc` se quito el 13/09 justamente para alinearlo con el recuadro
   gris—, asi que a sangre la marca, el nombre y el precio **tocan el borde de
   la pantalla**. En categorias, banners y marcas eso no pasa: ahi lo que llega
   al borde es una foto, y queda bien.

   SOLO SE DEVUELVE EL LADO IZQUIERDO. Por la derecha sigue a sangre, que es lo
   que hace que la tarjeta siguiente se corte contra el borde y se entienda que
   hay mas.

   SE ACOTA CON `.s4b-p-productos`, que **ya estaba en la pista** de
   `destacados.tpl`. Es el unico de los cuatro carruseles sin modificador
   propio en el contenedor, asi que sin esa clase habria hecho falta `:has()` o
   tocar la plantilla.

   Gana por especificidad (dos clases contra una), no por orden.
   Vuelta atras: borrar este bloque.
   ========================================================================== */
@media (max-width: 991px) {
    .s4b-p-carrusel__pista.s4b-p-productos {
        margin-left: 0;
    }
}

/* ==========================================================================
   LOS TRES BANNERS: TEXTO Y BOTON PEGADOS ABAJO, Y BOTON A TODO EL ANCHO
   (19/09/2026, peticion del cliente).

   EL HUECO DE ABAJO ERA UN `bottom: 9%` de `.s4b-p-banner__caja`, no un
   relleno. Medido: 9% de un banner de 681 px son **61 px**, mas los 28 del
   relleno de la caja = 89 px entre el pie del boton y el pie del banner. Por
   eso buscarlo en los `padding` no llevaba a ningun sitio.

   **SE ANULA CON `bottom: 0`, NO BORRANDO LA REGLA DE ARRIBA**: esa la
   comparten el banner unico y otras variantes que se conservan por si se
   vuelve atras. Aqui se acota al carrusel de tres.

   EL PORCENTAJE ERA UNA DECISION VIVA: al pasar los banners a 3:4 el 9% dejo
   de ser «un respiro» para ser 61 px. **Un porcentaje sobre una altura que
   cambia se descontrola solo**; por eso se sustituye por 0 y el aire lo pone
   el relleno de la caja, que es fijo.

   EL BOTON A ANCHO COMPLETO obliga a `display: block`: era `inline-block` y
   con eso `width: 100%` se lo come el flujo en linea. Y `text-align: center`,
   que al dejar de ajustarse al texto ya no se centra solo.

   Vuelta atras: borrar este bloque.
   ========================================================================== */
.s4b-p-carrusel--banners .s4b-p-banner__caja {
    bottom: 0;
}

.s4b-p-carrusel--banners .s4b-p-banner__boton {
    display: block;
    width: 100%;
    text-align: center;
}