/* Store4Bike · Pie propio.
 *
 * Mismas reglas que la cabecera: contenido topado a 1.440 px, fondo a todo el
 * ancho, esquinas rectas (sin-radios.css manda en todo el sitio).
 *
 * `.s4b-contenedor` la define cabecera.css, que se carga siempre. No se
 * redefine aqui para que las dos piezas no se peleen por el mismo ancho.
 */

.s4b-pie {
    background: #f5f5f5;
    color: #333;
    border-top: 1px solid #e3e3e3;
    font-size: 14px;
}

/* ------------------------------------------------------------------ */
/*  Cuerpo: marca + tres columnas                                      */
/* ------------------------------------------------------------------ */
.s4b-pie__cuerpo {
    padding: 36px 0 28px;
}

.s4b-pie__rejilla {
    display: grid;
    /* `minmax(0, …)` en todas: un `1fr` pelado deja que el contenido ensanche
       la columna y desborde el contenedor. Ya mordio en la cabecera. */
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.s4b-pie__logo {
    height: auto;
    width: auto;
    max-height: 24px;
    max-width: 100%;
    display: block;
    margin-bottom: 16px;
}

.s4b-pie__fiscal {
    font-style: normal;
    font-size: 13px;
    line-height: 1.6;
    color: #666;
    margin: 0 0 16px;
}

.s4b-pie__contacto {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.9;
}

.s4b-pie__contacto a {
    color: inherit;
    text-decoration: none;
}

.s4b-pie__contacto a:hover,
.s4b-pie__contacto a:focus {
    text-decoration: underline;
}

.s4b-pie__horario {
    color: #666;
    font-size: 13px;
}

/* --- columnas de enlaces --- */
.s4b-pie__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 0 12px;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 600;
    color: inherit;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12px;
    cursor: default;   /* en escritorio no se pliega */
}

/* El "+" solo tiene sentido cuando el titulo pliega, o sea en movil. */
.s4b-pie__mas {
    display: none;
    font-size: 20px;
    line-height: 1;
}

.s4b-pie__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 2;
}

.s4b-pie__lista a {
    color: inherit;
    text-decoration: none;
}

.s4b-pie__lista a:hover,
.s4b-pie__lista a:focus {
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/*  Banda de pago y envio                                              */
/* ------------------------------------------------------------------ */
.s4b-pie__banda {
    border-top: 1px solid #e3e3e3;
    padding: 18px 0;
}

.s4b-pie__banda-caja {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 48px;
    align-items: center;
}

.s4b-pie__grupo {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.s4b-pie__etiqueta {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 11px;
    font-weight: 600;
    color: #777;
}

.s4b-pie__medios {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
}

.s4b-pie__medio {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #dcdcdc;
    font-size: 12px;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/*  Barra inferior                                                     */
/* ------------------------------------------------------------------ */
.s4b-pie__barra {
    border-top: 1px solid #e3e3e3;
    padding: 14px 0;
}

.s4b-pie__barra-caja {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.s4b-pie__derechos {
    margin: 0;
    font-size: 13px;
    color: #666;
}

/* Credito de la agencia: separado por un punto medio en la misma linea; en
   movil, si no cabe, baja entero a la siguiente en vez de partirse. */
.s4b-pie__credito {
    display: inline-block;
}

.s4b-pie__credito::before {
    content: "·";
    margin: 0 8px;
}

/* Color escrito: en un enlace, inherit trae el morado del tema. */
.s4b-pie__credito a {
    color: #1a1a1a;
    font-weight: 600;
    text-decoration: none;
}

.s4b-pie__credito a:hover,
.s4b-pie__credito a:focus-visible {
    color: #d9001d;
}

.s4b-pie__redes {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
}

.s4b-pie__redes a {
    display: inline-flex;
    padding: 8px;
    color: inherit;
}

.s4b-pie__redes a:hover,
.s4b-pie__redes a:focus {
    color: #000;
}

/* ------------------------------------------------------------------ */
/*  Movil: las columnas se pliegan                                     */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .s4b-pie__rejilla {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .s4b-pie__marca {
        margin-bottom: 22px;
    }

    .s4b-pie__col {
        border-top: 1px solid #e3e3e3;
    }

    .s4b-pie__titulo {
        padding: 14px 0;
        cursor: pointer;
    }

    .s4b-pie__mas {
        display: inline;
    }

    .s4b-pie__titulo[aria-expanded="true"] .s4b-pie__mas {
        transform: rotate(45deg);
    }

    /* Sin JS los titulos no son plegables y las listas se quedan VISIBLES,
       que es el comportamiento correcto: mejor todo abierto que todo oculto. */
    .s4b-pie__lista[hidden] {
        display: none;
    }

    .s4b-pie__lista {
        padding-bottom: 12px;
    }

    .s4b-pie__banda-caja {
        gap: 14px 24px;
    }

    .s4b-pie__barra-caja {
        justify-content: center;
        text-align: center;
    }

    /* En movil el credito va en su propia linea: el punto medio quedaria
       colgando al principio de esa linea. */
    .s4b-pie__credito {
        display: block;
    }

    .s4b-pie__credito::before {
        content: none;
    }
}

/* ================================================================== */
/*  PIE NUEVO (08/10/2026), vista previa ?pie=nuevo                    */
/*  Todo acotado a .s4b-pie--nuevo: el pie de siempre no se entera.    */
/*  Colores ESCRITOS en cada enlace: en un enlace, `inherit` trae el   */
/*  morado del tema.                                                   */
/* ================================================================== */
.s4b-pie--nuevo {
    background: #111;
    color: #bdbdbd;
    border-top: 0;
    /* El nombre gigante se sale por los lados a proposito; que no meta
       desborde horizontal en la pagina. */
    overflow: hidden;
}

.s4b-pn__arriba {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 40px;
    padding: 48px 0 40px;
}

/* --- contacto --- */
.s4b-pn__redes {
    display: flex;
    gap: 10px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

/* Sin borde (peticion del cliente, 08/10/2026). La caja de 40 px se queda
   como zona de pulsacion, pero el icono va pegado a la IZQUIERDA: centrado,
   quedaria 10 px por dentro del texto de debajo. Al señalar, rojo, como los
   iconos de la cabecera. */
.s4b-pn__redes a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 40px;
    height: 40px;
    color: #f2f2f2;
}

.s4b-pn__redes a:hover,
.s4b-pn__redes a:focus-visible {
    color: #d9001d;
}

/* Iconos a color: llevan su propio color de marca, asi que al señalar se
   les baja la opacidad en vez de cambiarles el color. */
/* margin: 0 no es decorativo: el tema les pone 6 px a las imagenes y el
   icono quedaba 6 px a la derecha del texto de debajo (medido). */
.s4b-pn__redes img {
    display: block;
    width: 28px;
    height: 28px;
    margin: 0;
}

.s4b-pn__redes a:hover img,
.s4b-pn__redes a:focus-visible img {
    opacity: .75;
}

.s4b-pn__datos {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 2;
}

.s4b-pn__datos a {
    color: #f2f2f2;
    text-decoration: none;
}

.s4b-pn__datos a:hover,
.s4b-pn__datos a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.s4b-pn__direccion {
    margin: 14px 0 0;
    font-style: normal;
    font-size: 13px;
    line-height: 1.6;
    color: #8a8a8a;
}

.s4b-pn__horario {
    color: #8a8a8a;
    font-size: 13px;
}

/* --- columnas --- */
.s4b-pn__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.s4b-pie--nuevo .s4b-pie__titulo {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding-bottom: 14px;
}

.s4b-pie--nuevo .s4b-pie__lista {
    line-height: 2.1;
}

.s4b-pie--nuevo .s4b-pie__lista a {
    color: #bdbdbd;
}

.s4b-pie--nuevo .s4b-pie__lista a:hover,
.s4b-pie--nuevo .s4b-pie__lista a:focus-visible {
    color: #fff;
    text-decoration: none;
}

/* --- linea con el boton --- */
.s4b-pn__linea {
    display: flex;
    align-items: center;
}

.s4b-pn__raya {
    flex: 1 1 auto;
    height: 1px;
    background: #3a3a3a;
}

.s4b-pn__boton {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 22px;
    background: #fff;
    color: #111;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.s4b-pn__boton:hover,
.s4b-pn__boton:focus-visible {
    background: #d9001d;
    color: #fff;
    text-decoration: none;
}

/* --- lema y derechos --- */
.s4b-pn__abajo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px 40px;
    flex-wrap: wrap;
    padding: 24px 0 8px;
}

.s4b-pn__lema {
    margin: 0;
    max-width: 380px;
    font-size: 13px;
    line-height: 1.6;
    color: #8a8a8a;
}

.s4b-pie--nuevo .s4b-pie__derechos {
    color: #8a8a8a;
    text-align: right;
}

.s4b-pie--nuevo .s4b-pie__credito a {
    color: #f2f2f2;
}

.s4b-pie--nuevo .s4b-pie__credito a:hover,
.s4b-pie--nuevo .s4b-pie__credito a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

/* --- el nombre gigante, cortado por abajo ---
   El tamaño va en vw para que la palabra llene el ancho a cualquier
   pantalla. La caja mide MENOS que la letra (height en em) y recorta: es lo
   que deja las letras cortadas por el pie, como en la referencia. */
.s4b-pn__marca {
    /* 19.4vw: medido, la palabra ocupa casi exactamente el ancho de la
       ventana (7..1418 de 1425 a 1440). Mas grande se sale por los lados. */
    font-size: 19.4vw;
    height: .8em;
    line-height: 1;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

.s4b-pn__marca span {
    display: inline-block;
    font-weight: 700;
    letter-spacing: -.055em;
    color: #5a5a5a;
    transform: translateY(-.04em);
}

.s4b-pn__marca b {
    font-weight: 700;
    color: #d9001d;
}

/* --- movil: todo en columna, enlaces plegables (pie.js) --- */
@media (max-width: 767px) {
    .s4b-pn__arriba {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 36px 0 28px;
    }

    .s4b-pn__cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .s4b-pie--nuevo .s4b-pie__col {
        border-top: 1px solid #2a2a2a;
    }

    .s4b-pie--nuevo .s4b-pie__col:last-child {
        border-bottom: 1px solid #2a2a2a;
    }

    .s4b-pie--nuevo .s4b-pie__titulo {
        padding: 14px 0;
    }

    .s4b-pn__abajo {
        flex-direction: column;
    }

    .s4b-pie--nuevo .s4b-pie__derechos {
        text-align: left;
    }
}