/* ════════════════════════════════════════════════════
   CF PRE-FOOTER — MARQUEE TIENDAS
   Ruta: prefooter/assets/css/cf-pf-marquee.css
════════════════════════════════════════════════════ */

/* Rompe el contenedor normal para ocupar todo el ancho de pantalla —
   la usan tanto el wrapper de toda la sección (.hb-pf-marquee-section,
   para que el fondo opcional llegue de borde a borde) como la tira de
   logos (.hb-pf-marquee-wrap). El título va contenido, ver
   .cf-ancho-maximo abajo. Definición propia, independiente del tema
   activo. */
.full-width {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
    position: relative;
}

/* Contenedor del título, con el mismo ancho real que usa el theme
   (--theme-container-width / --theme-normal-container-max-width son
   las variables que Blocksy usa para su propio .ct-container) — así
   el título/subtítulo del marquee queda alineado con el resto del
   sitio en vez de pegado al borde de la pantalla. 1200px queda solo
   como fallback para un theme sin esas variables. */
.cf-ancho-maximo {
    width: var(--theme-container-width, 100%);
    max-width: var(--theme-normal-container-max-width, 1200px);
    margin-left: auto;
    margin-right: auto;
}

/* El bloque de título (subtítulo/título/texto + alineación) vive en
   assets/css/cf-pf-title.css, compartido por las 5 secciones con
   título — ver cf_pf_enqueue_assets() en cf-prefooter.php. */

/* Espacio arriba del título — necesario para que el fondo opcional
   (ver cf_pf_get_section_bg_style() en cf-prefooter.php) tenga aire
   antes del título, en vez de pegarlo justo al borde superior de la
   sección. Padding horizontal en mobile: .cf-ancho-maximo no trae
   padding propio, así que sin esto el título tocaría el borde de la
   pantalla en celulares. */
/* --hb-pf-marquee-section-padding-v: "Espacio vertical (arriba y
   abajo)" del admin (ver cf_pf_padding_admin_field() en
   cf-prefooter.php), default 20px. Se suma al padding propio de
   .hb-pf-marquee-wrap de abajo (60px, necesario para el espacio de la
   tira de logos en sí) — este es el "aire" extra de la sección
   completa, no reemplaza al del track. */
.hb-pf-marquee-section {
    padding-top: var(--hb-pf-marquee-section-padding-v, 20px);
    padding-bottom: var(--hb-pf-marquee-section-padding-v, 20px);
}

@media (max-width: 768px) {
    .hb-pf-marquee-section { padding-left: 16px; padding-right: 16px; }
}

.hb-pf-marquee-wrap {
    padding: 60px 0;
    overflow: hidden;
    position: relative;
}

/* Fade lateral izquierdo y derecho */
.hb-pf-marquee-wrap::before,
.hb-pf-marquee-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

/* --hb-pf-marquee-fade-color: antes venía fijo en blanco acá — se
   notaba como un recuadro si el fondo real no era blanco puro. Ahora
   sale de "Color de difuminado en los bordes" (marquee_fade_color, ver
   cf_pf_marquee_render() en cf-prefooter-marquee.php), que por
   defecto ya es "automático" (el color de fondo de la sección si es
   sólido, blanco si no hay nada configurado). */
.hb-pf-marquee-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--hb-pf-marquee-fade-color, #ffffff) 0%, transparent 100%);
}

.hb-pf-marquee-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--hb-pf-marquee-fade-color, #ffffff) 0%, transparent 100%);
}

/* ── TRACK ── */
.hb-pf-marquee-track {
    display: flex;
    gap: var(--hb-pf-marquee-gap, 60px);
    width: max-content;
    animation: hb-pf-scroll var(--hb-pf-marquee-speed, 30s) linear infinite;
    will-change: transform;
}

.hb-pf-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes hb-pf-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── ITEMS ──
   El espaciado ya no es padding en cada item: lo da el gap del track
   (configurable), así el hueco entre logos es exacto y no se duplica
   entre item y item. */
.hb-pf-store-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--hb-pf-marquee-img-h, 70px);
    text-decoration: none;
    transition: opacity .2s;
    flex-shrink: 0;
}

.hb-pf-store-item:hover { opacity: .65; }

.hb-pf-store-item img {
    height: var(--hb-pf-marquee-img-h, 70px);
    max-width: var(--hb-pf-marquee-img-w, 210px);
    object-fit: contain;
    transition: filter .25s;
    border-radius: 6px;
}

.hb-pf-store-item:hover img {
    filter: grayscale(0%);
}

/* Nombre textual (fallback sin logo) */
.hb-pf-store-name {
    font-size: .9rem;
    font-weight: 700;
    color: #0d2d6e;
    white-space: nowrap;
    letter-spacing: .01em;
}

/* ── RESPONSIVE ──
   min() en vez de un valor fijo: respeta el alto/gap configurado en el
   admin si ya es chico, pero limita el máximo en pantallas pequeñas. */
@media (max-width: 480px) {
    .hb-pf-marquee-track { gap: min(var(--hb-pf-marquee-gap, 60px), 30px); }
    .hb-pf-store-item,
    .hb-pf-store-item img { height: min(var(--hb-pf-marquee-img-h, 70px), 50px); }
}