/* ============================================================
   REZONIC SOUND — Rental Products v2.0
   Prefijo clases: rzs-
   Paleta: negro + blanco
   Sin font-family forzada
   Todo con !important
   ============================================================ */

/* ── WRAP ── */
#rzs-rental-wrap,
.rzs-wrap {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 72px 32px !important;
    box-sizing: border-box !important;
    background: #0d0d0d !important;
    position: relative !important;
}

/* Textura de puntos de fondo */
#rzs-rental-wrap::before,
.rzs-wrap::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px) !important;
    background-size: 30px 30px !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* ── HEADER ── */
.rzs-header {
    text-align: center !important;
    margin-bottom: 48px !important;
    position: relative !important;
    z-index: 1 !important;
}

.rzs-eyebrow {
    display: inline-block !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.42em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.28) !important;
    margin-bottom: 16px !important;
}

.rzs-title {
    font-size: clamp(26px, 3.5vw, 44px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    color: #fff !important;
    line-height: 1.05 !important;
    margin: 0 0 12px !important;
}

.rzs-subtitle {
    font-size: 13px !important;
    color: rgba(255,255,255,0.3) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.75 !important;
    max-width: 380px !important;
    margin: 0 auto 28px !important;
    font-weight: 400 !important;
}

/* Ecualizador decorativo header */
.rzs-eq {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 3px !important;
    height: 18px !important;
}

.rzs-eq span {
    display: block !important;
    width: 2px !important;
    background: rgba(255,255,255,0.18) !important;
    border-radius: 1px 1px 0 0 !important;
    animation: rzs-eq 1.6s ease-in-out infinite alternate !important;
}

.rzs-eq span:nth-child(1)  { height: 6px !important;  animation-delay: 0s !important; }
.rzs-eq span:nth-child(2)  { height: 13px !important; animation-delay: 0.12s !important; }
.rzs-eq span:nth-child(3)  { height: 18px !important; animation-delay: 0.06s !important; }
.rzs-eq span:nth-child(4)  { height: 9px !important;  animation-delay: 0.2s !important; }
.rzs-eq span:nth-child(5)  { height: 15px !important; animation-delay: 0.14s !important; }
.rzs-eq span:nth-child(6)  { height: 18px !important; animation-delay: 0.08s !important; }
.rzs-eq span:nth-child(7)  { height: 11px !important; animation-delay: 0.25s !important; }
.rzs-eq span:nth-child(8)  { height: 16px !important; animation-delay: 0.1s !important; }
.rzs-eq span:nth-child(9)  { height: 7px !important;  animation-delay: 0.3s !important; }
.rzs-eq span:nth-child(10) { height: 14px !important; animation-delay: 0.05s !important; }
.rzs-eq span:nth-child(11) { height: 10px !important; animation-delay: 0.22s !important; }
.rzs-eq span:nth-child(12) { height: 5px !important;  animation-delay: 0.17s !important; }

@keyframes rzs-eq {
    0%   { transform: scaleY(0.3); opacity: 0.3; }
    100% { transform: scaleY(1);   opacity: 1; }
}

/* ── FILTROS ── */
.rzs-filters {
    display: flex !important;
    gap: 6px !important;
    justify-content: center !important;
    margin-bottom: 36px !important;
    flex-wrap: wrap !important;
    position: relative !important;
    z-index: 1 !important;
}

.rzs-fbtn {
    padding: 7px 18px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.38) !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: color 0.2s, background 0.2s, border-color 0.2s !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

.rzs-fbtn:hover {
    color: #fff !important;
    border-color: rgba(255,255,255,0.3) !important;
}

.rzs-fbtn.rzs-active {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}

/* ── GRID ── */
.rzs-grid {
    display: grid !important;
    gap: 12px !important;
    position: relative !important;
    z-index: 1 !important;
}

.rzs-cols-1 { grid-template-columns: 1fr !important; }
.rzs-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.rzs-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.rzs-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

@media (max-width: 900px) {
    .rzs-cols-3,
    .rzs-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
    .rzs-cols-2,
    .rzs-cols-3,
    .rzs-cols-4 { grid-template-columns: 1fr !important; }
    #rzs-rental-wrap, .rzs-wrap { padding: 48px 16px !important; }
}

/* ── CARD ── */
.rzs-card {
    opacity: 0 !important;
    transform: translateY(18px) !important;
}

.rzs-card.rzs-revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
}

.rzs-card.rzs-hidden {
    display: none !important;
}

.rzs-card-inner {
    background: #151515 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    transition: border-color 0.3s, transform 0.3s !important;
    cursor: default !important;
}

/* Línea superior al hover */
.rzs-card-inner::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 1px !important;
    background: #fff !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: transform 0.4s cubic-bezier(0.77,0,0.18,1) !important;
    z-index: 10 !important;
}

.rzs-card-inner:hover {
    border-color: rgba(255,255,255,0.2) !important;
    transform: translateY(-3px) !important;
}

.rzs-card-inner:hover::after {
    transform: scaleX(1) !important;
}

/* ── IMAGEN ── */
.rzs-img-wrap {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    background: #1e1e1e !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

/* Imágenes subidas por el usuario */
.rzs-card-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    mix-blend-mode: lighten !important;
    transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94) !important;
    display: block !important;
}

.rzs-card-inner:hover .rzs-card-img {
    transform: scale(1.04) !important;
}

/* SVG de demo / placeholder */
.rzs-img-placeholder {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rzs-demo-svg {
    width: 75% !important;
    height: 75% !important;
    transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}

.rzs-card-inner:hover .rzs-demo-svg {
    transform: scale(1.04) !important;
}

/* ── BADGE ── */
.rzs-badge {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 7px !important;
    font-weight: 800 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    padding: 5px 10px !important;
    z-index: 5 !important;
    line-height: 1 !important;
}

/* ── OVERLAY ── */
.rzs-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    opacity: 0 !important;
    transition: opacity 0.3s !important;
    z-index: 4 !important;
}

.rzs-card-inner:hover .rzs-overlay {
    opacity: 1 !important;
}

.rzs-overlay-txt {
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
}

.rzs-overlay-eq {
    display: flex !important;
    align-items: flex-end !important;
    gap: 3px !important;
    height: 16px !important;
}

.rzs-overlay-eq span {
    display: block !important;
    width: 2px !important;
    background: rgba(255,255,255,0.5) !important;
    border-radius: 1px 1px 0 0 !important;
    animation: rzs-eq 1.2s ease-in-out infinite alternate !important;
}

.rzs-overlay-eq span:nth-child(1) { height: 6px !important;  animation-delay: 0s !important; }
.rzs-overlay-eq span:nth-child(2) { height: 14px !important; animation-delay: 0.1s !important; }
.rzs-overlay-eq span:nth-child(3) { height: 9px !important;  animation-delay: 0.2s !important; }
.rzs-overlay-eq span:nth-child(4) { height: 16px !important; animation-delay: 0.05s !important; }
.rzs-overlay-eq span:nth-child(5) { height: 7px !important;  animation-delay: 0.15s !important; }
.rzs-overlay-eq span:nth-child(6) { height: 12px !important; animation-delay: 0.25s !important; }
.rzs-overlay-eq span:nth-child(7) { height: 6px !important;  animation-delay: 0.18s !important; }

/* ── BODY ── */
.rzs-body {
    padding: 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    background: #151515 !important;
}

.rzs-num {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: rgba(255,255,255,0.1) !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.rzs-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
}

.rzs-desc {
    font-size: 11px !important;
    color: rgba(255,255,255,0.3) !important;
    line-height: 1.65 !important;
    flex: 1 !important;
    margin: 0 !important;
}

/* ── FOOTER / CTA ── */
.rzs-footer {
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

.rzs-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.32) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color 0.2s !important;
}

.rzs-cta svg {
    width: 11px !important;
    height: 11px !important;
    stroke: currentColor !important;
    fill: none !important;
    transition: transform 0.2s !important;
    flex-shrink: 0 !important;
}

.rzs-cta:hover { color: #fff !important; }
.rzs-cta:hover svg { transform: translateX(3px) !important; }

/* ── SIN PRODUCTOS ── */
.rzs-no-products {
    text-align: center !important;
    color: rgba(255,255,255,0.2) !important;
    font-size: 13px !important;
    padding: 64px !important;
    background: #0d0d0d !important;
}

/* ── VER MÁS ── */
.rzs-card-hidden {
    display: none !important;
}

.rzs-card-hidden.rzs-revealed {
    display: block !important;
    animation: rzs-fadein 0.45s ease both !important;
}

@keyframes rzs-fadein {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rzs-loadmore-wrap {
    display: flex !important;
    justify-content: center !important;
    margin-top: 40px !important;
    position: relative !important;
    z-index: 1 !important;
}

.rzs-loadmore-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 36px !important;
    background: transparent !important;
    color: rgba(255,255,255,0.55) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    font-family: inherit !important;
    outline: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transition: color 0.25s, border-color 0.25s, background 0.25s !important;
}

.rzs-loadmore-btn svg {
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
    fill: none !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s !important;
    display: block !important;
}

.rzs-loadmore-btn:hover {
    color: #fff !important;
    border-color: rgba(255,255,255,0.5) !important;
    background: rgba(255,255,255,0.04) !important;
}

.rzs-loadmore-btn:hover svg {
    transform: translateY(3px) !important;
}

.rzs-loadmore-btn.rzs-all-loaded {
    display: none !important;
}