/*
* brand-carousel.css
* Ubicación: assets/brand-carousel.css
* Carrusel infinito de marcas — Compatible con Horizon (Shopify)
*
* Usa los tokens CSS de Horizon:
* --color-background, --color-foreground,
* --color-border, --font-body-family
* El color_scheme aplica automáticamente mediante la clase .color-{scheme}
*/
/* ─────────────────────────────────────────────────────────
SECCIÓN WRAPPER
───────────────────────────────────────────────────────── */
.brand-carousel-section {
/* Tokens internos (sobrescritos por inline style desde Liquid) */
--bc-gap: 60px;
--bc-img-height: 60px;
--bc-duration: 30s;
--bc-track-w: 9999px; /* JS sobreescribe con el valor real */
--bc-pt: 36px;
--bc-pb: 36px;
padding-top: var(--bc-pt);
padding-bottom: var(--bc-pb);
overflow: hidden;
width: 100%;
box-sizing: border-box;
/* Horizon hereda background y color del color_scheme */
background-color: rgb(var(--color-background));
color: rgb(var(--color-foreground));
}
/* Bordes opcionales usando token de Horizon */
.brand-carousel-section--divider {
border-top: 1px solid rgba(var(--color-foreground), 0.08);
border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
}
/* ─────────────────────────────────────────────────────────
TÍTULO OPCIONAL
───────────────────────────────────────────────────────── */
.bc-heading {
text-align: center;
font-family: var(--font-body-family, inherit);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(var(--color-foreground), 0.5);
margin: 0 0 1.5rem;
padding: 0 1.5rem;
}
/* ─────────────────────────────────────────────────────────
CONTENEDOR DE PISTAS
───────────────────────────────────────────────────────── */
.bc-track-wrapper {
display: flex;
width: 100%;
overflow: hidden;
position: relative;
/* Máscara de desvanecimiento en bordes laterales */
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
black 7%,
black 93%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
black 7%,
black 93%,
transparent 100%
);
}
/* ─────────────────────────────────────────────────────────
PISTA (ul)
───────────────────────────────────────────────────────── */
.bc-track {
display: flex;
align-items: center;
flex-shrink: 0;
gap: var(--bc-gap);
list-style: none;
margin: 0;
padding: 0 calc(var(--bc-gap) / 2);
/* Animación — activada/desactivada por JS */
animation: bc-marquee var(--bc-duration) linear infinite;
animation-play-state: paused;
will-change: transform;
}
/* ─────────────────────────────────────────────────────────
PAUSA EN HOVER
───────────────────────────────────────────────────────── */
.bc-pause-hover:hover .bc-track {
animation-play-state: paused !important;
}
/* ─────────────────────────────────────────────────────────
KEYFRAME — desplaza exactamente una copia hacia la izq
───────────────────────────────────────────────────────── */
@keyframes bc-marquee {
0% { transform: translateX(0); }
100% { transform: translateX(calc(var(--bc-track-w) * -1)); }
}
/* ─────────────────────────────────────────────────────────
CADA ITEM (li)
───────────────────────────────────────────────────────── */
.bc-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* ─────────────────────────────────────────────────────────
ENLACE
───────────────────────────────────────────────────────── */
.bc-link {
display: flex;
align-items: center;
text-decoration: none;
transition: opacity 0.25s ease, transform 0.25s ease;
outline-offset: 4px;
border-radius: 2px;
}
.bc-link:focus-visible {
outline: 2px solid rgb(var(--color-foreground));
}
/* ─────────────────────────────────────────────────────────
IMAGEN
───────────────────────────────────────────────────────── */
.bc-img {
height: var(--bc-img-height);
width: auto;
max-width: 180px;
object-fit: contain;
display: block;
/* Grayscale por defecto (desactivable desde settings) */
filter: grayscale(100%);
opacity: 0.55;
transition: filter 0.35s ease, opacity 0.35s ease, transform 0.25s ease;
}
/* Hover: color completo */
.bc-item:hover .bc-img,
.bc-link:hover .bc-img,
.bc-link:focus-visible .bc-img {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.04);
}
/* Cuando grayscale está desactivado desde settings */
.bc-no-grayscale .bc-img {
filter: grayscale(0%);
opacity: 0.85;
}
.bc-no-grayscale .bc-item:hover .bc-img {
opacity: 1;
transform: scale(1.04);
}
/* ─────────────────────────────────────────────────────────
PLACEHOLDER DE SHOPIFY
───────────────────────────────────────────────────────── */
.bc-img-placeholder {
display: flex;
align-items: center;
}
.bc-img--placeholder {
height: var(--bc-img-height) !important;
width: auto;
opacity: 0.18;
}
/* ─────────────────────────────────────────────────────────
ACCESIBILIDAD: prefers-reduced-motion
───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.bc-track {
animation-duration: 180s !important;
}
}
/* ─────────────────────────────────────────────────────────
RESPONSIVE
───────────────────────────────────────────────────────── */
@media screen and (max-width: 749px) {
.bc-track-wrapper {
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
black 5%,
black 95%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
black 5%,
black 95%,
transparent 100%
);
}
.bc-img {
max-width: 120px;
}
}
Envíos gratis en compras a partir de $1,799
Muestras gratis en todos tus pedidos
Productos 100% originales
Pagos seguros
Envíos gratis en compras a partir de $1,799
Muestras gratis en todos tus pedidos
Productos 100% originales
Pagos seguros