/* CARRO DE COMPRAS (MODAL-SIDEBAR) */
.cart-modal {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    display: flex;
    justify-content: flex-end;
}

.cart-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.cart-content {
    width: 400px;
    max-width: 90%;
    background: #161820;
    height: 100%;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s;
}

.cart-modal.active .cart-content {
    transform: translateX(0);
}

.cart-header {
    padding: 20px;
    background: #1f2230;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #2a3350;
}

.cart-header h3 {
    margin: 0;
    color: #fff;
    font-size: 1.2rem;
}

.close-cart {
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.cart-footer {
    padding: 20px;
    background: #1f2230;
    border-top: 1px solid #2a3350;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

.btn-checkout {
    width: 100%;
    padding: 15px;
    background: #00c46a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
}

.btn-checkout:hover {
    background: #009e55;
}

/* MODAL PAGO (CENTER) */
.payment-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2001;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
}

.payment-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.pay-content {
    background: #1f2230;
    padding: 30px;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    position: relative;
    border: 1px solid #2a3350;
    color: #fff;
}

.close-pay {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    cursor: pointer;
}

.qr-box {
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    margin: 20px auto;
    color: #000;
}

.qr-box img {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.pay-steps {
    text-align: left;
    background: #161820;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #ccc;
}

.btn-confirm-pay {
    width: 100%;
    padding: 12px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
}

.btn-confirm-pay:hover {
    background: #0056b3;
}

/* ============================================================
   CHECKOUT MODAL (Pedir nombre y celular)
============================================================ */
.checkout-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(6px);
}

.checkout-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.checkout-content {
    background: linear-gradient(145deg, #1a1d2e, #1f2340);
    border: 1px solid #2a3350;
    border-radius: 20px;
    padding: 32px 28px;
    width: 90%;
    max-width: 460px;
    position: relative;
    box-shadow: 0 0 50px rgba(0, 196, 106, 0.2);
    transform: scale(0.92);
    transition: transform 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
}

.checkout-modal.active .checkout-content {
    transform: scale(1);
}

.close-checkout {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    color: #888;
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.close-checkout:hover {
    color: #fff;
}

.checkout-header {
    text-align: center;
    margin-bottom: 22px;
}

.checkout-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #00c46a, #009e55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 24px;
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 196, 106, 0.4);
}

.checkout-header h2 {
    color: #fff;
    font-size: 1.4rem;
    margin: 0 0 6px;
}

.checkout-header p {
    color: #888;
    font-size: 0.9rem;
    margin: 0;
}

/* Resumen de items del carrito */
.checkout-summary {
    background: #141625;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 14px;
    max-height: 160px;
    overflow-y: auto;
}

.checkout-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #2a3350;
}

.checkout-item:last-child {
    border-bottom: none;
}

.checkout-item img {
    width: 44px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    background: #222;
}

.checkout-item-info {
    flex: 1;
}

.checkout-item-info strong {
    display: block;
    color: #fff;
    font-size: 0.9rem;
}

.checkout-item-info small {
    color: #888;
    font-size: 0.78rem;
}

.checkout-item-price {
    color: #21ffe2;
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
}

.checkout-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ccc;
    font-size: 1rem;
    margin-bottom: 20px;
    padding: 12px 14px;
    background: #141625;
    border-radius: 10px;
    border: 1px solid #2a3350;
}

.checkout-total-val {
    color: #00c46a;
    font-size: 1.3rem;
    font-weight: 800;
}

/* Formulario */
.checkout-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.checkout-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checkout-field label {
    color: #aaa;
    font-size: 0.85rem;
    font-weight: 600;
}

.checkout-field label i {
    margin-right: 6px;
    color: #00c46a;
}

.checkout-field input {
    background: #141625;
    border: 1px solid #2a3350;
    border-radius: 10px;
    padding: 12px 16px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.checkout-field input:focus {
    border-color: #00c46a;
    box-shadow: 0 0 0 3px rgba(0, 196, 106, 0.15);
}

.btn-send-whatsapp {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #00c46a, #009e55);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0, 196, 106, 0.35);
    margin-top: 4px;
}

.btn-send-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 196, 106, 0.5);
    background: linear-gradient(135deg, #00d976, #00b360);
}

.btn-send-whatsapp i {
    font-size: 1.2rem;
}

/* ============================================================
   BADGES ESPECIALES DE OFERTAS
============================================================ */
/* Badge único por card — mínimo y limpio */
.oferta-badge {
    position: absolute;
    top: 10px; left: 10px;
    background: rgba(10,8,20,.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.15);
    color: #e8e0ff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 5px;
    z-index: 10;
    letter-spacing: .3px;
}
.oferta-badge--pct {
    color: #f87171;
    border-color: rgba(248,113,113,.3);
}
.oferta-badge--star {
    color: #fbbf24;
    border-color: rgba(251,191,36,.3);
}
.tag-featured { display: none; }
.tag-limited  { display: none; }

.oferta-destacada {
    border: 2px solid rgba(139,92,246,.7) !important;
    box-shadow: 0 0 22px rgba(139,92,246,.28) !important;
}

/* ============================================================
   CART — BADGE + SHAKE + ITEMS + TOAST
============================================================ */
.icon-box { position: relative; }

.cart-header-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    background: #ff4d4d;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    border-radius: 10px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border: 2px solid #08090b;
    line-height: 1;
    animation: badge-pop 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes badge-pop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

@keyframes cart-shake {
    0%   { transform: rotate(0) scale(1); }
    20%  { transform: rotate(-14deg) scale(1.25); }
    40%  { transform: rotate(14deg) scale(1.25); }
    60%  { transform: rotate(-8deg) scale(1.1); }
    80%  { transform: rotate(6deg); }
    100% { transform: rotate(0) scale(1); }
}

.cart-icon-shake { animation: cart-shake 0.55s ease; }

/* Cart items */
.cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #2a3350;
    animation: fadeSlideIn 0.25s ease;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.cart-item:last-child { border-bottom: none; }

.ci-img img {
    width: 52px;
    height: 66px;
    object-fit: cover;
    border-radius: 8px;
    background: #222;
}

.ci-info { flex: 1; min-width: 0; }
.ci-info h4 { color: #fff; font-size: 0.9rem; margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-ver  { color: #888; font-size: 0.75rem; margin: 0 0 4px; }
.ci-price { color: #00c46a; font-weight: 700; font-size: 0.95rem; margin: 0; }

.ci-remove {
    background: none;
    border: none;
    color: #ff4d4d66;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
}
.ci-remove:hover { color: #ff4d4d; background: rgba(255,77,77,0.12); }

/* Cart add toast */
.cart-toast {
    position: fixed;
    bottom: 88px;
    right: 20px;
    background: linear-gradient(135deg, #1f2340, #1a1d2e);
    border: 1px solid #00c46a44;
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9998;
    transform: translateY(130px);
    opacity: 0;
    transition: all 0.38s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 8px 32px rgba(0,196,106,0.2);
    max-width: 300px;
    pointer-events: none;
}
.cart-toast.show { transform: translateY(0); opacity: 1; }
.cart-toast-img { width: 42px; height: 54px; object-fit: cover; border-radius: 7px; }
.cart-toast-info strong { display: block; color: #fff; font-size: 0.88rem; margin-bottom: 3px; }

/* ============================================================
   GAMERCOIN AWARENESS SECTION (index.html)
============================================================ */
.gamercoin-awareness {
    background: linear-gradient(135deg, #0d0f15 0%, #0b0c10 60%, #111422 100%);
    border-top: 1px solid #1e2030;
    border-bottom: 1px solid #1e2030;
    padding: 56px 40px;
    margin: 0;
}
.gc-aw-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 36px;
    justify-content: center;
    text-align: left;
}
.gc-aw-icon-wrap {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #0b0c10;
    flex-shrink: 0;
    box-shadow: 0 0 24px rgba(255,215,0,0.4);
}
.gc-aw-title {
    font-size: 1.6rem; font-weight: 800; color: #fff; margin: 0 0 6px;
    font-family: 'Poppins', sans-serif;
}
.gc-aw-title span { color: #ffd700; }
.gc-aw-sub { font-size: .95rem; color: #8892a4; margin: 0; }

/* Ways grid */
.gc-ways-grid {
    display: flex; flex-wrap: wrap; gap: 16px;
    justify-content: center; margin-bottom: 36px;
}
.gc-way-card {
    background: #0f1018; border: 1px solid #1e2030;
    border-radius: 14px; padding: 22px 20px; width: 148px;
    text-align: center; transition: transform .2s, border-color .2s;
}
.gc-way-card:hover { transform: translateY(-4px); border-color: #ffd700; }
.gc-way-icon { font-size: 1.7rem; margin-bottom: 8px; }
.gc-way-coins { font-size: 1.4rem; font-weight: 800; color: #ffd700; font-family: 'Poppins', sans-serif; }
.gc-way-label { font-size: .78rem; color: #8892a4; margin-top: 4px; }

/* Ranks row */
.gc-ranks-row {
    display: flex; align-items: center; gap: 10px;
    justify-content: center; flex-wrap: wrap; margin-bottom: 36px;
}
.gc-rank-pill {
    background: #0f1018; border: 1.5px solid var(--rank-color);
    border-radius: 40px; padding: 10px 20px;
    display: flex; align-items: center; gap: 8px;
    color: var(--rank-color); transition: background .2s;
}
.gc-rank-pill:hover { background: rgba(255,255,255,0.04); }
.gc-rank-pill i { font-size: 1rem; }
.gc-rank-name { font-weight: 700; font-size: .9rem; color: #fff; }
.gc-rank-range { font-size: .74rem; color: var(--rank-color); margin-left: 2px; }
.gc-rank-arrow { color: #2e3245; font-size: 1rem; }

/* CTA */
.gc-aw-cta-row { text-align: center; }
.gc-aw-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #0b0c10; font-weight: 700; font-size: .95rem;
    padding: 13px 32px; border-radius: 40px; text-decoration: none;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 0 20px rgba(255,215,0,0.3);
}
.gc-aw-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 28px rgba(255,215,0,0.5); }
.gc-aw-cta-note { font-size: .82rem; color: #566070; margin-top: 12px; }

/* ═══════════════════════════════════════════════
   CLÁSICOS — carrusel slideshow
═══════════════════════════════════════════════ */
.classics-section {
    padding: 0;
    background: #08020c;
    position: relative;
}
.classics-section::before { display: none; }

/* Header overlay — flotante en la parte superior del banner */
.classics-head {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 12;
    text-align: center;
    padding: 28px 40px 80px;
    background: linear-gradient(180deg, rgba(4,2,14,.95) 0%, rgba(4,2,14,.7) 45%, transparent 100%);
    pointer-events: none;
    margin-bottom: 0;
}
.classics-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(168,85,247,.18);
    border: 1px solid rgba(168,85,247,.4);
    color: #c084fc;
    padding: 4px 14px; border-radius: 30px;
    font-size: .68rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 10px;
}
.classics-head h3 {
    font-size: 1.9rem; font-weight: 900; color: #fff;
    margin: 0 0 6px;
    text-shadow: 0 0 30px rgba(168,85,247,.3);
    letter-spacing: -.5px;
}
.classics-head p { color: rgba(200,180,220,.65); font-size: .85rem; margin: 0 0 12px; }
.classics-catalog-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: #a855f7; font-size: .82rem; font-weight: 600; text-decoration: none;
    border: 1px solid rgba(168,85,247,.35);
    padding: 6px 16px; border-radius: 20px;
    transition: all .2s;
    pointer-events: auto;
}
.classics-catalog-link:hover { background: rgba(168,85,247,.14); border-color: rgba(168,85,247,.65); color: #c084fc; }

/* ── Carrusel container ── */
.classics-banner {
    position: relative;
    width: 100%;
    /* 8/3 = 2.67:1 — más alto que antes, la imagen llena más espacio */
    aspect-ratio: 8 / 3;
    max-height: 600px;
    min-height: 260px;
    overflow: hidden;
    background: #08020c;
}

/* Cada slide = imagen completa como hero banner */
.classic-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .7s ease;
    pointer-events: none;
}
.classic-slide.active {
    opacity: 1;
    pointer-events: auto;
}

/* Capa de fondo difuminado — misma imagen estirada en cover con blur fuerte */
.classic-slide-blur {
    position: absolute; inset: -15px; /* -15px evita bordes blancos del blur */
    background-size: cover;
    background-position: center center;
    filter: blur(28px) brightness(0.3) saturate(0.6);
    z-index: 0;
}

/* Imagen real encima — contain para verla completa sin recorte */
.classic-slide-bg {
    position: absolute; inset: 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    z-index: 1;
}

/* Gradiente izquierda para leer texto + oscurece abajo */
.classic-slide-bg::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(4,2,14,.85) 0%, rgba(4,2,14,.48) 32%, rgba(4,2,14,.05) 58%, transparent 100%),
        linear-gradient(180deg, transparent 45%, rgba(4,2,14,.65) 100%);
}

/* Info flotante — esquina inferior izquierda */
.classic-slide-inner {
    position: absolute;
    bottom: 52px; left: 0;
    z-index: 6;
    display: flex; flex-direction: column;
    padding: 0 52px;
    max-width: 520px;
}
.classic-slide-badges {
    display: flex; gap: 7px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.classic-slide-badge-cl {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(168,85,247,.8);
    color: #fff; font-size: 9px; font-weight: 800;
    padding: 3px 10px; border-radius: 5px; letter-spacing: 1px; text-transform: uppercase;
    backdrop-filter: blur(4px);
}
.classic-slide-badge-ps {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(0,48,135,.9);
    color: #fff; font-size: 9px; font-weight: 800;
    padding: 3px 10px; border-radius: 5px;
    backdrop-filter: blur(4px);
}
.classic-slide-title {
    font-size: 2rem; font-weight: 900; color: #fff;
    margin: 0 0 8px; line-height: 1.15;
    text-shadow: 0 2px 16px rgba(0,0,0,.8);
}
.classic-slide-platforms {
    display: flex; gap: 6px; margin-bottom: 10px;
}
.classic-slide-platforms span {
    background: rgba(168,85,247,.2); border: 1px solid rgba(168,85,247,.45);
    color: #c084fc; font-size: 10px; font-weight: 700;
    padding: 2px 9px; border-radius: 4px;
}
.classic-slide-old {
    font-size: .82rem; color: #9a7aaa;
    text-decoration: line-through; display: block; margin-bottom: 2px;
}
.classic-slide-price {
    font-size: 1.75rem; font-weight: 900; color: #fff; line-height: 1;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
    margin-bottom: 8px;
}
.classic-slide-price small { font-size: .8rem; font-weight: 400; color: #c0a0e0; }
.classic-slide-save {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(168,85,247,.18); border: 1px solid rgba(168,85,247,.4);
    color: #d0a0ff; font-size: .75rem; font-weight: 700;
    padding: 4px 10px; border-radius: 6px; width: fit-content;
    margin-bottom: 6px;
    backdrop-filter: blur(4px);
}
.classic-slide-psplus-note {
    display: flex; align-items: center; gap: 5px;
    font-size: .75rem; color: #80b0e0;
    margin-bottom: 6px;
}
.classic-slide-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff; border: none; border-radius: 10px;
    padding: 12px 24px; font-size: .9rem; font-weight: 700;
    cursor: pointer; margin-top: 6px; width: fit-content;
    box-shadow: 0 4px 20px rgba(168,85,247,.5);
    transition: box-shadow .2s, transform .15s;
}
.classic-slide-btn:hover {
    box-shadow: 0 6px 28px rgba(168,85,247,.7);
    transform: translateY(-2px);
    background: linear-gradient(135deg, #9333ea, #c084fc);
}

/* Flechas de navegación */
.classics-nav-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(4,2,14,.6); border: 1.5px solid rgba(168,85,247,.3);
    color: #c084fc; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10; font-size: .9rem;
    transition: all .2s; backdrop-filter: blur(6px);
}
.classics-nav-arrow:hover {
    background: linear-gradient(135deg,#7c3aed,#a855f7);
    color: #fff; border-color: transparent;
    box-shadow: 0 4px 18px rgba(168,85,247,.55);
    transform: translateY(-50%) scale(1.08);
}
.classics-nav-arrow.left  { left: 18px; }
.classics-nav-arrow.right { right: 18px; }

/* Dots de navegación — dentro del banner, fijados al fondo */
.classics-dots {
    position: absolute;
    bottom: 18px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 8px;
    z-index: 12;
    padding: 0;
}
.classic-dot {
    width: 8px; height: 8px;
    background: rgba(168,85,247,.25);
    border-radius: 50%; cursor: pointer;
    transition: all .25s;
}
.classic-dot.active {
    background: #a855f7;
    width: 24px; border-radius: 4px;
    box-shadow: 0 0 8px rgba(168,85,247,.6);
}

@media (max-width: 720px) {
    .classics-banner { min-height: 180px; }
    .classics-head { padding: 16px 16px 55px; }
    .classics-head h3 { font-size: 1.2rem; }
    .classics-head p { display: none; }
    .classic-slide-inner { padding: 0 18px; bottom: 38px; max-width: 100%; }
    .classic-slide-title { font-size: 1.15rem; }
    .classic-slide-price { font-size: 1.1rem; }
}

/* ═══════════════════════════════════════════════
   FOOTER — rediseño completo
═══════════════════════════════════════════════ */

/* CTA banner top */
.footer-cta-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    padding: 36px 60px;
    background: linear-gradient(135deg, #0a1628 0%, #0d1f3c 50%, #0a1628 100%);
    border-top: 1px solid #0e1e38;
    border-bottom: 1px solid #0e1e38;
}
.footer-cta-text h2 { font-size: 1.7rem; font-weight: 900; color: #fff; margin: 0 0 4px; }
.footer-cta-text p  { color: #5a7a9e; font-size: .9rem; margin: 0; }
.footer-cta-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: #25d366; color: #000;
    padding: 14px 30px; border-radius: 12px;
    font-size: 1rem; font-weight: 800; text-decoration: none;
    transition: all .2s; white-space: nowrap;
    box-shadow: 0 4px 20px rgba(37,211,102,.3);
}
.footer-cta-btn i { font-size: 1.3rem; }
.footer-cta-btn:hover { background: #20c05a; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(37,211,102,.4); }

/* Main grid 3 cols */
.footer-main-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.4fr;
    gap: 50px;
    padding: 54px 60px 48px;
    max-width: 1300px; margin: 0 auto;
}
.footer-col-title {
    font-size: .72rem; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; color: #2a4060;
    margin: 0 0 20px; padding-bottom: 10px;
    border-bottom: 1px solid #0e1828;
}

/* Brand col */
.footer-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-logo { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; }
.footer-brand-name { font-size: 1rem; font-weight: 800; color: #fff; }
.footer-brand-tag  { font-size: .72rem; color: #3a5070; }
.footer-brand-desc { color: #3a5070; font-size: .82rem; line-height: 1.65; margin-bottom: 20px; }
.footer-social-icons { display: flex; gap: 10px; }
.footer-social-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; text-decoration: none;
    transition: all .2s;
}
.footer-social-icon.instagram { background: rgba(225,48,108,.12); color: #e1306c; border: 1px solid rgba(225,48,108,.2); }
.footer-social-icon.instagram:hover { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); color:#fff; border-color:transparent; transform:translateY(-2px); }
.footer-social-icon.whatsapp { background: rgba(37,211,102,.1); color: #25d366; border: 1px solid rgba(37,211,102,.2); }
.footer-social-icon.whatsapp:hover { background: #25d366; color:#000; border-color:transparent; transform:translateY(-2px); }
.footer-social-icon.tiktok { background: rgba(255,255,255,.05); color: #ccc; border: 1px solid rgba(255,255,255,.1); }
.footer-social-icon.tiktok:hover { background: #fff; color:#000; border-color:transparent; transform:translateY(-2px); }

/* Nav links col */
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-links li a {
    display: flex; align-items: center; gap: 10px;
    color: #4a6080; font-size: .85rem; text-decoration: none;
    transition: color .18s, gap .18s;
}
.footer-links li a i { width: 16px; text-align: center; font-size: .8rem; color: #1a3050; }
.footer-links li a:hover { color: #8ab0d8; gap: 14px; }
.footer-links li a:hover i { color: #4da3ff; }

/* Contact col */
.footer-phone-link {
    display: flex; align-items: center; gap: 14px;
    background: rgba(37,211,102,.08); border: 1px solid rgba(37,211,102,.2);
    padding: 14px 18px; border-radius: 12px;
    text-decoration: none; margin-bottom: 18px;
    transition: all .2s;
}
.footer-phone-link:hover { background: rgba(37,211,102,.14); border-color: rgba(37,211,102,.4); }
.footer-phone-link i { font-size: 1.6rem; color: #25d366; }
.footer-phone-link span { display: flex; flex-direction: column; }
.footer-phone-link small { font-size: .65rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #25d366; }
.footer-phone-link span > :last-child { font-size: 1.1rem; font-weight: 800; color: #fff; }
.footer-contact-details { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.footer-detail-row { display: flex; align-items: center; gap: 10px; color: #4a6080; font-size: .82rem; }
.footer-detail-row i { width: 16px; text-align: center; color: #1a3050; font-size: .85rem; }
.footer-pay-col small { font-size: .65rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #2a4060; }
.footer-pay-icons { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.footer-pay-icons span { display: flex; align-items: center; gap: 6px; color: #3a5070; font-size: .8rem; }
.footer-pay-icons i { color: #1a3050; }

/* FAQ (heredado, ajuste de colores) */
.footer-faq { padding: 0 60px 40px; max-width: 1300px; margin: 0 auto; }
.footer-faq h3 { font-size: 1.1rem; font-weight: 800; color: #2a4060; margin: 0 0 20px; }
.footer-faq h3 i { color: #1a3050; margin-right: 8px; }

/* Bottom bar */
.footer-bottom-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 60px;
    border-top: 1px solid #080f1a;
    flex-wrap: wrap; gap: 8px;
}

@media (max-width: 900px) {
    .footer-main-grid { grid-template-columns: 1fr; gap: 32px; padding: 36px 24px; }
    .footer-cta-bar { padding: 28px 24px; flex-direction: column; text-align: center; }
    .footer-faq { padding: 0 20px 32px; }
    .footer-bottom-bar { flex-direction: column; text-align: center; padding: 16px 24px; }
}

/* ── Auth nav buttons (Login / Registrar) ── */
.auth-nav-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px;
}
.auth-nav-btn {
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    color: #a8bcda;
    border: 1px solid #253050;
    background: rgba(20,28,48,.6);
    transition: background .2s, color .2s, border-color .2s;
    white-space: nowrap;
    letter-spacing: .2px;
}
.auth-nav-btn:hover {
    background: rgba(30,42,70,.9);
    color: #fff;
    border-color: #3a5090;
}
.auth-nav-register {
    background: linear-gradient(135deg, #1a56db, #2563eb);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 12px rgba(26,86,219,.35);
}
.auth-nav-register:hover {
    background: linear-gradient(135deg, #1344b0, #1a56db);
    box-shadow: 0 4px 16px rgba(26,86,219,.5);
}

/* ── Badge "Ahorras X COP" ── */
.save-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,196,106,.12);
    border: 1px solid rgba(0,196,106,.3);
    color: #00c46a;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    margin-top: 4px;
}
.save-badge i { font-size: 0.78rem; }

/* Nav coins badge */
.coins-nav-box { position: relative; }
.coins-nav-badge {
    position: absolute; top: -6px; right: -8px;
    background: #ffd700; color: #0b0c10; font-size: .65rem;
    font-weight: 800; border-radius: 20px; padding: 1px 6px;
    min-width: 18px; text-align: center; line-height: 16px;
}
.coins-nav-box i { color: #ffd700; }
.cart-toast-info small  { color: #00c46a; font-size: 0.76rem; }

/* ── Recién Agregados — encabezado rediseñado ── */
.recent-section {
    padding: 70px 40px 60px;
    background: linear-gradient(180deg, rgba(5,8,20,1) 0%, rgba(5,8,20,0) 100%);
    position: relative;
    overflow: hidden;
}
.recent-section::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 600px; height: 180px;
    background: radial-gradient(ellipse, rgba(26,86,219,.14) 0%, transparent 70%);
    pointer-events: none;
}
.recent-head {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}
.recent-new-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(26,86,219,.15);
    border: 1px solid rgba(26,86,219,.35);
    color: #5ab4ff;
    padding: 5px 16px;
    border-radius: 30px;
    font-size: .7rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 14px;
}
.recent-new-badge i { font-size: .65rem; animation: blink-dot 1.6s ease infinite; }
@keyframes blink-dot { 0%,100%{opacity:1} 50%{opacity:.3} }
.recent-head h3 {
    font-size: 2.2rem; font-weight: 900; color: #fff;
    margin: 0 0 10px;
    text-shadow: 0 0 40px rgba(90,180,255,.25);
    letter-spacing: -.5px;
}
.recent-head p { color: #5a6d8e; font-size: .95rem; margin: 0 0 18px; }
.recent-catalog-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: #4da3ff; font-size: .84rem; font-weight: 600; text-decoration: none;
    border: 1px solid rgba(77,163,255,.3);
    padding: 7px 18px; border-radius: 20px;
    transition: all .2s;
}
.recent-catalog-link:hover { background: rgba(26,86,219,.15); border-color: rgba(77,163,255,.6); color: #7ec5ff; }
.recent-carousel-wrap {
    position: relative;
    padding: 0 56px;
}
.recent-viewport { overflow: hidden; width: 100%; }
.recent-track {
    display: flex;
    gap: 16px;
    will-change: transform;
}
.recent-card {
    flex-shrink: 0;
    background: #0f1420;
    border: 1px solid #1a2540;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .2s, transform .25s;
    cursor: pointer;
}
.recent-card:hover { border-color: #8b5cf6; transform: translateY(-4px); box-shadow: 0 8px 24px rgba(139,92,246,.22); }
.recent-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15,15,28,.85);
    border: 1.5px solid rgba(255,255,255,.12);
    color: #c0c8e0;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all .2s;
    font-size: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
    backdrop-filter: blur(6px);
}
.recent-arrow:hover {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 20px rgba(139,92,246,.5);
    transform: translateY(-50%) scale(1.08);
}
.recent-arrow.left  { left: 4px; }
.recent-arrow.right { right: 4px; }

@media (max-width: 900px) {
    .recent-carousel-wrap { padding: 0 46px; }
    .recent-arrow { width: 38px; height: 38px; font-size: .85rem; }
    .recent-arrow.left  { left: 2px; }
    .recent-arrow.right { right: 2px; }
}
@media (max-width: 500px) {
    .recent-carousel-wrap { padding: 0 30px; }
    .recent-arrow { width: 28px; height: 28px; font-size: .72rem; }
    .recent-arrow.left  { left: 0; }
    .recent-arrow.right { right: 0; }
    /* Cards compactas: imagen más corta, texto más pequeño */
    .recent-card img    { height: 110px !important; }
    .recent-card h4     { font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .recent-card button { font-size: 10px !important; padding: 5px !important; }
    .recent-card > div:last-child { padding: 6px 8px 8px !important; }
    .recent-head h3 { font-size: 1.4rem; }
}

/* Offer countdown badge en card — mejorado */
.card-countdown {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(90deg, rgba(255,40,40,.15), rgba(249,203,40,.08));
    border: 1px solid rgba(255,80,80,.3);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 6px 0 2px;
    font-size: 0.77rem;
    color: #ff9090;
    font-weight: 700;
    font-family: monospace;
    letter-spacing: .3px;
}
.card-countdown i { color: #ff4444; font-size: 0.8rem; flex-shrink: 0; }

/* ═══════════════════════════════════════════════
   FOOTER / CONTACTO REDISEÑADO
═══════════════════════════════════════════════ */
.site-footer {
    background: #070810;
    border-top: 1px solid #0e1428;
    padding: 0;
    margin-top: 0;
}

/* ── Contacto hero ── */
.footer-contact-hero {
    background: linear-gradient(135deg, #080d1a 0%, #0b1222 50%, #0a0d1a 100%);
    padding: 60px 40px 50px;
    text-align: center;
    border-bottom: 1px solid #0e1428;
    position: relative;
    overflow: hidden;
}
.footer-contact-hero::before {
    content: '';
    position: absolute;
    top: -60px; left: 50%; transform: translateX(-50%);
    width: 500px; height: 200px;
    background: radial-gradient(ellipse, rgba(26,86,219,.18) 0%, transparent 70%);
    pointer-events: none;
}
.footer-contact-hero h2 {
    font-size: 1.9rem; font-weight: 800; color: #fff;
    margin: 0 0 8px;
    background: linear-gradient(90deg, #5ab4ff, #fff, #5ab4ff);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.footer-contact-hero p { color: #6a7d9e; font-size: .95rem; margin: 0 0 36px; }

/* ── Social cards ── */
.footer-socials {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.social-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 28px;
    border-radius: 16px;
    text-decoration: none;
    transition: all .22s;
    min-width: 200px;
}
.social-card-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.social-card-info { text-align: left; }
.social-card-label { font-size: .7rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; opacity: .65; }
.social-card-handle { font-size: .95rem; font-weight: 700; color: #fff; margin-top: 1px; }

/* Instagram */
.social-card.instagram {
    background: linear-gradient(135deg, rgba(225,48,108,.12), rgba(252,175,69,.08));
    border: 1px solid rgba(225,48,108,.25);
    color: #e1306c;
}
.social-card.instagram .social-card-icon { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color:#fff; }
.social-card.instagram .social-card-label { color: #e1306c; }
.social-card.instagram:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(225,48,108,.25); border-color: rgba(225,48,108,.5); }

/* TikTok */
.social-card.tiktok {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
}
.social-card.tiktok .social-card-icon { background: #000; color: #fff; position:relative; }
.social-card.tiktok .social-card-label { color: #aaa; }
.social-card.tiktok .social-card-handle { color: #fff; }
.social-card.tiktok:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }

/* WhatsApp */
.social-card.whatsapp {
    background: linear-gradient(135deg, rgba(37,211,102,.12), rgba(37,211,102,.05));
    border: 1px solid rgba(37,211,102,.25);
    color: #25d366;
}
.social-card.whatsapp .social-card-icon { background: #25d366; color: #fff; }
.social-card.whatsapp .social-card-label { color: #25d366; }
.social-card.whatsapp:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(37,211,102,.22); border-color: rgba(37,211,102,.5); }

/* ── Soporte rápido ── */
.footer-support {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 36px 40px;
    background: rgba(26,86,219,.06);
    border-bottom: 1px solid #0e1428;
    flex-wrap: wrap;
}
.footer-support-text h3 { font-size: 1.2rem; font-weight: 800; color: #fff; margin: 0 0 4px; }
.footer-support-text p { color: #6a7d9e; font-size: .88rem; margin: 0; }
.footer-support-badge {
    display: flex; align-items: center; gap: 8px;
    background: rgba(37,211,102,.12);
    border: 1px solid rgba(37,211,102,.3);
    color: #25d366;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: .82rem; font-weight: 700;
}
.btn-whatsapp-support {
    display: flex; align-items: center; gap: 10px;
    background: #25d366;
    color: #000;
    padding: 13px 28px;
    border-radius: 12px;
    font-size: .95rem; font-weight: 800;
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
}
.btn-whatsapp-support i { font-size: 1.2rem; }
.btn-whatsapp-support:hover { background: #20c05a; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,211,102,.3); }

/* ── FAQ ── */
.footer-faq {
    padding: 48px 40px;
    max-width: 860px;
    margin: 0 auto;
    border-bottom: 1px solid #0e1428;
}
.footer-faq h3 { font-size: 1.3rem; font-weight: 800; color: #e8f0ff; margin: 0 0 28px; text-align: center; }
.faq-item {
    border: 1px solid #111c30;
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color .2s;
}
.faq-item:hover { border-color: #1a3060; }
.faq-q {
    width: 100%; background: #0a0e1a; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    color: #c8d8f0; font-size: .9rem; font-weight: 600; text-align: left;
    gap: 12px;
    transition: background .2s;
}
.faq-q:hover { background: #0d1224; }
.faq-q i.faq-icon { color: #1a56db; font-size: .85rem; flex-shrink: 0; }
.faq-q i.faq-arrow { color: #3a5080; font-size: .75rem; transition: transform .3s; flex-shrink: 0; }
.faq-item.open .faq-q { background: #0d1224; color: #5ab4ff; }
.faq-item.open .faq-q i.faq-arrow { transform: rotate(180deg); }
.faq-a {
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease, padding .35s;
    background: #080c18;
    color: #7a92b8; font-size: .86rem; line-height: 1.7;
    padding: 0 20px;
}
.faq-item.open .faq-a { max-height: 300px; padding: 14px 20px 18px; }

/* ── Bottom bar ── */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 40px;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-pay-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.footer-pay-item {
    display: flex; align-items: center; gap: 6px;
    color: #445566; font-size: .8rem; font-weight: 600;
}
.footer-pay-item i { font-size: .9rem; }
.footer-copy { color: #2a3a55; font-size: .78rem; margin: 0; }

@media (max-width: 700px) {
    .footer-contact-hero { padding: 40px 20px 36px; }
    .footer-contact-hero h2 { font-size: 1.4rem; }
    .social-card { min-width: 160px; padding: 14px 20px; }
    .footer-support { flex-direction: column; text-align: center; padding: 28px 20px; }
    .footer-faq { padding: 36px 16px; }
    .footer-bottom { flex-direction: column; align-items: center; padding: 20px 16px; text-align: center; }
}

/* ═══════════════════════════════════════════════
   SETUP & ACCESORIOS — layout split (como Populares)
═══════════════════════════════════════════════ */
.acc-split-section {
    margin: 80px auto;
    padding: 50px 40px;
    max-width: 1300px;
    display: flex;
    gap: 44px;
    align-items: flex-start;
}

/* ── Izquierda: slideshow ── */
.acc-split-left { width: 30%; flex-shrink: 0; }

.acc-img-slideshow {
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    height: 490px;
    box-shadow: 0 0 28px rgba(0,0,0,.6);
    transition: transform .35s, box-shadow .35s;
    background: #0a0c14;
}
.acc-img-slideshow:hover {
    transform: scale(1.02);
    box-shadow: 0 0 38px rgba(0,180,255,.18);
}
/* Las .divider-slide ya tienen position:absolute; inset:0 desde styles.css */
.acc-img-slideshow .divider-slide {
    background-position: center center;
}

/* Overlay info sobre el slideshow */
.acc-slide-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 28px 22px 22px;
    background: linear-gradient(transparent, rgba(4,6,16,.92) 60%);
    z-index: 3;
}
.acc-slide-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(26,86,219,.25);
    border: 1px solid rgba(26,86,219,.4);
    color: #5ab4ff;
    padding: 3px 12px; border-radius: 20px;
    font-size: .68rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    margin-bottom: 10px;
}
.acc-slide-info h3 {
    color: #fff; font-size: 1.25rem; font-weight: 800;
    margin: 0 0 5px; text-shadow: 0 2px 10px rgba(0,0,0,.6);
    line-height: 1.25;
}
.acc-slide-info p {
    color: #9ab0cc; font-size: .8rem; margin: 0;
    line-height: 1.4;
}

/* Dots dentro del slideshow */
.acc-inner-dots {
    bottom: 10px !important;
    z-index: 4;
}

/* ── Derecha: carrusel de cards ── */
.acc-split-right {
    flex: 1;
    position: relative;
    min-width: 0;
}
.acc-split-right .subtitulo { margin-bottom: 18px; }

.acc-slider {
    overflow: hidden;
    width: 100%;
}
.acc-track {
    display: flex;
    transition: transform .55s cubic-bezier(.4,0,.2,1);
    min-height: 400px;
}
.acc-group {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    gap: 18px;
    align-items: stretch;
}
.acc-group .card {
    flex: 1;
    min-width: 0;
}

/* Flechas */
.acc-arrow {
    position: absolute;
    top: 54%;
    transform: translateY(-50%);
    background: rgba(10,15,30,.92);
    border: 2px solid rgba(26,86,219,.4);
    color: #fff;
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 20;
    transition: all .28s cubic-bezier(.4,0,.2,1);
    font-size: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.acc-arrow:hover {
    background: #1a56db;
    border-color: #fff;
    transform: translateY(-50%) scale(1.14);
    box-shadow: 0 4px 24px rgba(26,86,219,.45);
}
.acc-arrow.left  { left: -23px; }
.acc-arrow.right { right: -23px; }

/* Dots del carrusel derecho */
.acc-dots-row {
    display: flex; justify-content: center; gap: 10px;
    margin-top: 16px;
}
.acc-dot {
    width: 10px; height: 10px;
    background: rgba(255,255,255,.15);
    border-radius: 50%; cursor: pointer;
    transition: all .2s;
}
.acc-dot.active {
    background: #1a56db;
    box-shadow: 0 0 8px rgba(26,86,219,.7);
    width: 24px; border-radius: 5px;
}

@media (max-width: 900px) {
    .acc-split-section { flex-direction: column; padding: 36px 16px; gap: 28px; }
    .acc-split-left { width: 100%; }
    .acc-img-slideshow { height: 220px; }
    /* Flechas dentro del slider, no fuera del viewport */
    .acc-split-right { padding: 0 30px; }
    .acc-arrow.left  { left: 0; }
    .acc-arrow.right { right: 0; }
    /* 2 cards por fila en tablet */
    .acc-group { flex-wrap: wrap; gap: 12px; }
    .acc-group .card { flex: 0 0 calc(50% - 6px); }
    .acc-track { min-height: auto; }
    .accessory-card .card-img-wrap { height: 130px; }
}
@media (max-width: 600px) {
    .acc-split-section { padding: 20px 0 28px; margin: 36px auto; }
    .acc-split-left { display: none; }
    .acc-split-right { padding: 0 40px; } /* espacio para las flechas */
    .acc-track { min-height: auto; }

    /* 1 card por grupo (el JS agrupa de a 1 en ≤600px) */
    .acc-group { flex-wrap: nowrap; }
    .acc-group .card { flex: 0 0 100%; }

    /* Card compacta pero bien proporcionada */
    .accessory-card .card-img-wrap { height: 160px; padding: 14px; }
    .accessory-card .card-body h4 { font-size: 13px; min-height: 0 !important; }
    .accessory-card .card-body .price { font-size: 1rem !important; }
    .accessory-card .buy-btn { font-size: 13px; padding: 9px 12px; }

    /* Flechas pegadas a los bordes del contenedor */
    .acc-arrow.left  { left: 2px; }
    .acc-arrow.right { right: 2px; }
}
@media (max-width: 700px) {
    .recent-section { padding: 50px 16px 40px; }
    .recent-head h3 { font-size: 1.6rem; }
}

/* ════════════════════════════════════════════════
   PS PLUS MEMBERSHIPS SECTION
   ════════════════════════════════════════════════ */
.plus-section {
    padding: 80px 40px 70px;
    background: linear-gradient(180deg, rgba(4,2,18,1) 0%, rgba(8,4,26,1) 100%);
    position: relative;
    overflow: hidden;
}
.plus-section::before {
    content: '';
    position: absolute;
    top: -120px; left: 50%; transform: translateX(-50%);
    width: 700px; height: 400px;
    background: radial-gradient(ellipse at center, rgba(0,64,160,.18) 0%, transparent 70%);
    pointer-events: none;
}
.plus-head {
    text-align: center;
    margin-bottom: 52px;
}
.plus-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(0,100,255,.12);
    border: 1px solid rgba(0,100,255,.25);
    color: #5ab4ff;
    padding: 5px 16px; border-radius: 30px;
    font-size: .7rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 18px;
}
.plus-head h2 {
    font-size: 2.3rem; font-weight: 900; color: #e8f0ff; margin: 0 0 14px;
    text-shadow: 0 0 40px rgba(90,180,255,.2);
}
.plus-head p {
    color: #6a80a0; font-size: .98rem; max-width: 480px; margin: 0 auto;
}

/* Cards grid */
.plus-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

.plus-card {
    background: #0b0d1a;
    border: 1px solid #141c30;
    border-radius: 20px;
    padding: 32px 28px;
    display: flex; flex-direction: column; gap: 0;
    position: relative;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.plus-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.plus-card.featured {
    background: linear-gradient(160deg, #0d1836 0%, #091230 100%);
    border-color: rgba(26,86,219,.5);
    box-shadow: 0 0 40px rgba(26,86,219,.15);
    transform: scale(1.03);
}
.plus-card.featured:hover {
    transform: scale(1.03) translateY(-6px);
    box-shadow: 0 24px 70px rgba(26,86,219,.3);
}

.plus-popular-badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(90deg, #1a56db, #3b82f6);
    color: #fff; font-size: .72rem; font-weight: 800;
    padding: 4px 18px; border-radius: 20px;
    letter-spacing: 1px; text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(26,86,219,.5);
}

.plus-tier-icon {
    font-size: 2.4rem; margin-bottom: 14px;
    display: flex; justify-content: center;
}
.plus-card h3 {
    text-align: center; font-size: 1.3rem; font-weight: 900;
    color: #c8d8f0; margin: 0 0 6px;
    text-transform: uppercase; letter-spacing: 1px;
}
.plus-tier-sub {
    text-align: center; color: #4a5e78; font-size: .82rem; margin-bottom: 22px;
}

.plus-features {
    list-style: none; padding: 0; margin: 0 0 28px;
    display: flex; flex-direction: column; gap: 10px;
    flex: 1;
}
.plus-features li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .88rem; color: #7a90b0; line-height: 1.4;
}
.plus-features li i {
    font-size: .8rem; margin-top: 2px; flex-shrink: 0;
    color: #1a56db;
}
.plus-card.featured .plus-features li { color: #9ab0d0; }
.plus-card.featured .plus-features li i { color: #5ab4ff; }

.plus-divider {
    border: none; border-top: 1px solid #181e30;
    margin: 0 0 22px;
}
.plus-card.featured .plus-divider { border-top-color: rgba(26,86,219,.3); }

.plus-price-label { font-size: .75rem; color: #3a4e68; text-align: center; margin-bottom: 4px; }
.plus-price {
    text-align: center; font-size: 1.6rem; font-weight: 900; color: #e0ecff;
    margin: 0 0 20px; line-height: 1;
}
.plus-price span { font-size: .9rem; font-weight: 500; color: #4a6080; }

.plus-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 20px; border-radius: 12px;
    font-size: .9rem; font-weight: 700;
    text-decoration: none; cursor: pointer;
    transition: all .25s; border: none;
}
.plus-btn-essential {
    background: rgba(74,163,255,.08);
    border: 1px solid rgba(74,163,255,.25);
    color: #5ab4ff;
}
.plus-btn-essential:hover {
    background: rgba(74,163,255,.18);
    border-color: #5ab4ff;
    transform: translateY(-1px);
}
.plus-btn-extra {
    background: linear-gradient(90deg, #1a56db, #2563eb);
    color: #fff;
    box-shadow: 0 6px 24px rgba(26,86,219,.4);
}
.plus-btn-extra:hover {
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    box-shadow: 0 8px 32px rgba(26,86,219,.6);
    transform: translateY(-2px);
}
.plus-btn-premium {
    background: rgba(168,85,247,.1);
    border: 1px solid rgba(168,85,247,.3);
    color: #c084fc;
}
.plus-btn-premium:hover {
    background: rgba(168,85,247,.2);
    border-color: #a855f7;
    transform: translateY(-1px);
}

.plus-disclaimer {
    text-align: center; color: #2a3a52; font-size: .78rem;
    max-width: 500px; margin: 32px auto 0; line-height: 1.5;
}

@media (max-width: 900px) {
    .plus-cards { grid-template-columns: 1fr; max-width: 420px; }
    .plus-card.featured { transform: scale(1); }
    .plus-card.featured:hover { transform: translateY(-6px); }
    .plus-section { padding: 60px 20px 50px; }
    .plus-head h2 { font-size: 1.8rem; }
}

/* ════════════════════════════════════════════════
   MINIMAL FOOTER
   ════════════════════════════════════════════════ */
.site-footer-minimal {
    background: #04060e;
    border-top: 1px solid #0e1420;
    padding: 28px 40px 20px;
}
.footer-min-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
    max-width: 1300px; margin: 0 auto;
    padding-bottom: 20px;
    border-bottom: 1px solid #0e1420;
}
.footer-min-brand {
    display: flex; align-items: center; gap: 12px;
}
.footer-min-social {
    display: flex; gap: 10px;
}
.footer-min-links {
    display: flex; gap: 20px; flex-wrap: wrap;
}
.footer-min-links a {
    color: #3a5070; font-size: .82rem; text-decoration: none; display: flex; align-items: center; gap: 6px;
    transition: color .2s;
}
.footer-min-links a:hover { color: #5ab4ff; }

.footer-min-bottom {
    max-width: 1300px; margin: 0 auto;
    padding-top: 16px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
@media (max-width: 600px) {
    .site-footer-minimal { padding: 20px 16px 14px; }
    .footer-min-inner { justify-content: center; text-align: center; flex-direction: column; align-items: center; }
}

/* ════════════════════════════════════════════════
   CONTACTO PAGE
   ════════════════════════════════════════════════ */
.contacto-hero {
    text-align: center;
    padding: 80px 20px 60px;
    background: linear-gradient(180deg, rgba(4,6,18,1) 0%, rgba(6,10,24,1) 100%);
    position: relative;
    overflow: hidden;
}
.contacto-hero-glow {
    position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
    width: 600px; height: 350px;
    background: radial-gradient(ellipse, rgba(0,80,200,.2) 0%, transparent 70%);
    pointer-events: none;
}
.contacto-hero-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(26,86,219,.1);
    border: 1px solid rgba(26,86,219,.25);
    color: #5ab4ff;
    padding: 5px 16px; border-radius: 30px;
    font-size: .7rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 20px;
}
.contacto-hero h1 {
    font-size: 3rem; font-weight: 900; color: #e8f0ff;
    margin: 0 0 14px;
    text-shadow: 0 0 50px rgba(90,180,255,.25);
}
.contacto-hero p {
    color: #5a7090; font-size: 1rem; max-width: 440px; margin: 0 auto;
}

/* Social cards */
.contacto-socials-wrap {
    display: flex; flex-direction: column; gap: 16px;
    max-width: 760px; margin: 0 auto;
    padding: 0 24px 52px;
}
.contacto-social-card {
    display: flex; align-items: center; gap: 22px;
    padding: 22px 28px;
    border-radius: 18px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    position: relative; overflow: hidden;
}
.contacto-social-card:hover {
    transform: translateX(5px);
}
.contacto-social-card.whatsapp {
    background: rgba(37,211,102,.06);
    border-color: rgba(37,211,102,.2);
}
.contacto-social-card.whatsapp:hover {
    background: rgba(37,211,102,.12);
    border-color: rgba(37,211,102,.45);
    box-shadow: 0 8px 30px rgba(37,211,102,.15);
}
.contacto-social-card.instagram {
    background: rgba(225,48,108,.06);
    border-color: rgba(225,48,108,.2);
}
.contacto-social-card.instagram:hover {
    background: rgba(225,48,108,.12);
    border-color: rgba(225,48,108,.45);
    box-shadow: 0 8px 30px rgba(225,48,108,.15);
}
.contacto-social-card.tiktok {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.12);
}
.contacto-social-card.tiktok:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.25);
    box-shadow: 0 8px 30px rgba(0,0,0,.3);
}

.cs-icon {
    font-size: 2.2rem; flex-shrink: 0; width: 52px;
    display: flex; align-items: center; justify-content: center;
}
.contacto-social-card.whatsapp .cs-icon { color: #25d366; }
.contacto-social-card.instagram .cs-icon { color: #e1306c; }
.contacto-social-card.tiktok .cs-icon { color: #e8e8e8; }

.cs-info { flex: 1; }
.cs-platform { font-size: .75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #445566; margin-bottom: 3px; }
.cs-handle { font-size: 1.15rem; font-weight: 800; color: #d8e8f8; margin-bottom: 4px; }
.cs-desc { font-size: .82rem; color: #4a6080; }
.cs-arrow { font-size: .9rem; color: #2a3a55; flex-shrink: 0; transition: transform .2s; }
.contacto-social-card:hover .cs-arrow { transform: translateX(4px); color: #5ab4ff; }

/* Info grid */
.contacto-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 900px; margin: 0 auto;
    padding: 0 24px 52px;
}
.contacto-info-card {
    background: #080c18;
    border: 1px solid #101828;
    border-radius: 14px;
    padding: 22px 18px;
    text-align: center;
    transition: border-color .2s, transform .2s;
}
.contacto-info-card:hover {
    border-color: #1e2a40;
    transform: translateY(-3px);
}
.ci-icon { font-size: 1.5rem; margin-bottom: 10px; }
.ci-label { font-size: .72rem; color: #334455; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.ci-value { font-size: .88rem; color: #8090a8; line-height: 1.4; }

/* CTA box */
.contacto-cta-box {
    display: flex; align-items: center; justify-content: space-between; gap: 28px;
    flex-wrap: wrap;
    max-width: 900px; margin: 0 auto 52px;
    padding: 32px 36px;
    background: linear-gradient(135deg, rgba(10,22,40,.9), rgba(6,14,28,.9));
    border: 1px solid rgba(26,86,219,.25);
    border-radius: 20px;
    box-shadow: 0 0 40px rgba(26,86,219,.08);
}
.contacto-cta-box h2 { font-size: 1.3rem; color: #d0e0f8; font-weight: 800; margin: 0 0 6px; }
.contacto-cta-box p { color: #4a6080; font-size: .9rem; margin: 0; }

@media (max-width: 860px) {
    .contacto-info-grid { grid-template-columns: repeat(2, 1fr); }
    .contacto-cta-box { flex-direction: column; text-align: center; }
    .contacto-hero h1 { font-size: 2.2rem; }
}
@media (max-width: 560px) {
    .contacto-info-grid { grid-template-columns: 1fr; max-width: 360px; }
    .contacto-socials-wrap { padding: 0 14px 40px; }
    .contacto-social-card { padding: 16px 18px; gap: 14px; }
    .cs-handle { font-size: 1rem; }
}

/* ────────────────────────────────────────────────
   PS PLUS — card inner structure helpers
   (matches the markup in index.html)
   ──────────────────────────────────────────────── */
.plus-card-header {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #141c30;
}
.plus-card.featured .plus-card-header { border-bottom-color: rgba(26,86,219,.25); }

.plus-card-header.essential .plus-tier-icon { color: #5ab4ff; }
.plus-card-header.extra    .plus-tier-icon { color: #3b82f6; }
.plus-card-header.premium  .plus-tier-icon { color: #c084fc; }

.plus-tier-name {
    font-size: 1.3rem; font-weight: 900; color: #c8d8f0;
    text-transform: uppercase; letter-spacing: 1px;
    margin: 8px 0 4px;
}

.plus-card-body { display: flex; flex-direction: column; gap: 0; }

.plus-price-wrap {
    text-align: center; margin-bottom: 22px;
    display: flex; align-items: baseline; justify-content: center; gap: 6px;
}
.plus-price { font-size: 1.6rem; font-weight: 900; color: #e0ecff; }
.plus-period { font-size: .82rem; color: #3a4e68; }

.plus-features .muted { color: #283848 !important; }
.plus-features .muted i { color: #283848 !important; }

/* Btn variants for index.html markup */
.plus-btn.essential-btn {
    background: rgba(74,163,255,.08);
    border: 1px solid rgba(74,163,255,.25);
    color: #5ab4ff;
}
.plus-btn.essential-btn:hover {
    background: rgba(74,163,255,.18); border-color: #5ab4ff; transform: translateY(-1px);
}
.plus-btn.extra-btn {
    background: linear-gradient(90deg, #1a56db, #2563eb);
    color: #fff; box-shadow: 0 6px 24px rgba(26,86,219,.4);
}
.plus-btn.extra-btn:hover {
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    box-shadow: 0 8px 32px rgba(26,86,219,.6); transform: translateY(-2px);
}
.plus-btn.premium-btn {
    background: rgba(168,85,247,.1);
    border: 1px solid rgba(168,85,247,.3);
    color: #c084fc;
}
.plus-btn.premium-btn:hover {
    background: rgba(168,85,247,.2); border-color: #a855f7; transform: translateY(-1px);
}

/* ════════════════════════════════════════════════
   PS PLUS BADGES ON CARDS & DETAILS
   ════════════════════════════════════════════════ */

/* Small badge that overlays the card image (bottom-right of image) */
.psplus-card-badge {
    position: absolute;
    top: 8px; right: 8px;
    background: linear-gradient(135deg, #003087 0%, #0057b8 100%);
    color: #fff;
    font-size: 9px; font-weight: 800;
    padding: 3px 8px; border-radius: 5px;
    display: flex; align-items: center; gap: 4px;
    letter-spacing: .5px;
    box-shadow: 0 2px 8px rgba(0,48,135,.55);
    z-index: 5;
    white-space: nowrap;
}
.psplus-card-badge i { font-size: 9px; }

/* Small note below price on the card */
.psplus-card-note {
    display: flex; align-items: center; gap: 5px;
    background: rgba(0,48,135,.12);
    border: 1px solid rgba(0,80,200,.25);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: .75rem; color: #6a9fdc;
    margin-top: 6px; line-height: 1.3;
}
.psplus-card-note i { color: #4a80bf; font-size: .72rem; flex-shrink: 0; }

/* Detailed notice on the details page */
.psplus-details-notice {
    margin-top: 18px;
    background: linear-gradient(135deg, rgba(0,40,110,.18) 0%, rgba(0,30,80,.1) 100%);
    border: 1px solid rgba(0,80,200,.3);
    border-left: 3px solid #1a56db;
    border-radius: 10px;
    padding: 16px 18px;
}
.psplus-notice-header {
    display: flex; align-items: center; gap: 8px;
    font-size: .85rem; font-weight: 800; color: #5ab4ff;
    margin-bottom: 8px; letter-spacing: .3px;
}
.psplus-notice-header i { font-size: 1rem; }
.psplus-details-notice p {
    font-size: .82rem; color: #6a8aaa; line-height: 1.55; margin: 0 0 12px;
}
.psplus-details-notice p strong { color: #d0e8ff; }
.psplus-notice-link {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,80,200,.15);
    border: 1px solid rgba(0,100,220,.3);
    color: #5ab4ff;
    padding: 7px 14px; border-radius: 8px;
    font-size: .8rem; font-weight: 700;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}
.psplus-notice-link:hover {
    background: rgba(0,80,200,.28);
    border-color: #5ab4ff;
}