/* ═══════════════════════════════════════════════════════════════════════════
   Sitio Store Slider Pro — Frontend CSS v3.0
   Diseño visual completo: gradientes, sombras, imágenes sobresalidas,
   bordes redondeados, tipografía de impacto
═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset y variables base ───────────────────────────────────────────────── */
.ssp-wrap {
    --ssp-bg:        #111827;
    --ssp-accent:    #f9c200;
    --ssp-accent2:   #e00000;
    --ssp-radius:    18px;
    --ssp-radius-sm: 10px;
    --ssp-shadow:    0 20px 60px rgba(0,0,0,0.4);
    --ssp-shadow-sm: 0 8px 24px rgba(0,0,0,0.2);
    --ssp-ease:      cubic-bezier(0.25,0.46,0.45,0.94);
    font-family: 'Poppins','Montserrat',sans-serif;
    width: 100%;
    overflow: visible;
    box-sizing: border-box;
    position: relative;
}
.ssp-slider-wrap { width:100%; }
.ssp-wrap *,.ssp-wrap *::before,.ssp-wrap *::after { box-sizing:border-box; margin:0; padding:0; }
.ssp-wrap a { text-decoration:none; color:inherit; }
.ssp-wrap img { max-width:100%; display:block; }

/* ── Título de sección ────────────────────────────────────────────────────── */
.ssp-section-title {
    font-size: clamp(15px,2.2vw,20px);
    font-weight: 800;
    padding: 0 4px 12px;
    color: #f8fafc;
    display: flex; align-items: center; gap: 8px;
    letter-spacing: -0.3px;
}
.ssp-section-title::before {
    content:'';
    display:inline-block;
    width:4px; height:20px;
    background: var(--ssp-accent);
    border-radius:4px;
}
.ssp-section-title.ssp-dark { color:#1e293b; }
.ssp-section-title.ssp-dark::before { background: var(--ssp-accent2); }

/* ── Precios ──────────────────────────────────────────────────────────────── */
.ssp-price-main    { font-size:clamp(22px,3.5vw,34px); font-weight:900; color:var(--ssp-accent); line-height:1; font-family:'Barlow Condensed','Oswald',sans-serif; }
.ssp-price-before  { font-size:12px; color:rgba(255,255,255,0.45); text-decoration:line-through; margin-bottom:2px; }
.ssp-price-main-sm { font-size:clamp(16px,2.2vw,20px); font-weight:800; color:var(--ssp-accent2); font-family:'Barlow Condensed','Oswald',sans-serif; }
.ssp-price-before-sm { font-size:11px; color:#94a3b8; text-decoration:line-through; }

/* ── Badges flotantes ─────────────────────────────────────────────────────── */
.ssp-badge-disc,.ssp-badge-pct {
    position:absolute; top:10px; left:10px; z-index:20;
    background: var(--ssp-accent2); color:#fff;
    font-size:11px; font-weight:800;
    padding:4px 10px; border-radius:20px;
    box-shadow:0 4px 12px rgba(224,0,0,0.4);
    letter-spacing:0.3px;
}
.ssp-badge-disc-sm {
    position:absolute; top:7px; right:7px; z-index:20;
    background: var(--ssp-accent2); color:#fff;
    font-size:10px; font-weight:800;
    padding:3px 8px; border-radius:20px;
    box-shadow:0 3px 8px rgba(224,0,0,0.35);
}
.ssp-badge-red { background:var(--ssp-accent2); color:#fff; box-shadow:0 4px 12px rgba(224,0,0,0.4); }
.ssp-badge-ship {
    position:absolute; top:10px; right:10px; z-index:20;
    background:linear-gradient(135deg,#059669,#10b981); color:#fff;
    font-size:10px; font-weight:700;
    padding:3px 9px; border-radius:20px;
    box-shadow:0 3px 10px rgba(5,150,105,0.4);
}
.ssp-badge-ship-top {
    position:absolute; top:8px; left:8px; z-index:20;
    background:linear-gradient(135deg,#059669,#10b981); color:#fff;
    font-size:10px; font-weight:700;
    padding:3px 9px; border-radius:20px;
}
.ssp-badge-stock {
    position:absolute; top:8px; right:8px; z-index:20;
    background:rgba(100,116,139,0.8); color:#fff;
    font-size:10px; padding:2px 8px; border-radius:20px;
    backdrop-filter:blur(4px);
}
.ssp-badge-star {
    display:inline-flex; align-items:center; gap:5px;
    background:linear-gradient(135deg,#c0392b,#e74c3c); color:#fff;
    font-size:12px; font-weight:800;
    padding:5px 14px; border-radius:6px;
    margin-bottom:8px;
    box-shadow:0 4px 12px rgba(192,57,43,0.45);
}
.ssp-badge-promo {
    position:absolute; top:12px; right:12px; z-index:20;
    background:rgba(255,255,255,0.12); color:#fff;
    border:1px solid rgba(255,255,255,0.25);
    font-size:10px; font-weight:700; letter-spacing:1px;
    padding:4px 10px; border-radius:20px;
    backdrop-filter:blur(8px);
    text-transform:uppercase;
}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.ssp-btn-cta {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--ssp-accent); color:#111;
    font-size:13px; font-weight:800;
    padding:10px 22px; border-radius:30px;
    margin-top:12px;
    transition:all 0.25s var(--ssp-ease);
    box-shadow:0 6px 20px rgba(249,194,0,0.35);
    letter-spacing:0.2px;
}
.ssp-btn-cta:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 10px 28px rgba(249,194,0,0.5); }
.ssp-btn-add {
    display:inline-flex; align-items:center; gap:5px;
    background:var(--ssp-accent2); color:#fff;
    font-size:11px; font-weight:700;
    padding:7px 16px; border-radius:20px;
    margin-top:8px;
    transition:all 0.25s var(--ssp-ease);
    box-shadow:0 4px 12px rgba(224,0,0,0.3);
}
.ssp-btn-add:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(224,0,0,0.45); }

/* ── Hover escala con overflow visible ────────────────────────────────────── */
.ssp-hover-scale {
    transition:transform 0.4s var(--ssp-ease);
    transform-origin:center bottom;
    will-change:transform;
}
.ssp-hover-scale:hover { transform:scale(1.07) translateY(-4px); }


/* ═══════════════════════════════════════════════════════════════════════════
   PLANTILLA 1 — MOSAICO 2 COLUMNAS
   Fondo oscuro con gradiente, imagen centrada sobresalida
═══════════════════════════════════════════════════════════════════════════ */
.ssp-grid2 {
    padding: 6px;
    background: var(--ssp-bg);
    border-radius: var(--ssp-radius);
}
.ssp-g2-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:600px){ .ssp-g2-grid{grid-template-columns:1fr;} }

.ssp-g2-card {
    position:relative;
    background: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
    border-radius: var(--ssp-radius);
    border: 1px solid rgba(255,255,255,0.09);
    overflow: visible;            /* imagen puede sobresalir */
    display: flex; flex-direction:column;
    padding: 16px 16px 20px;
    transition: transform 0.3s var(--ssp-ease), box-shadow 0.3s;
    min-height: 320px;
}
.ssp-g2-card:hover { transform:translateY(-5px); box-shadow: var(--ssp-shadow); }

/* Imagen sobresalida (flota encima) */
.ssp-g2-img-wrap {
    flex:1;
    display:flex; align-items:flex-end; justify-content:center;
    min-height:200px;
    overflow:visible;
    margin-bottom:-30px;  /* imagen sale del card */
    position:relative; z-index:5;
}
.ssp-g2-img {
    max-height:220px; width:auto; max-width:90%;
    filter:drop-shadow(0 24px 40px rgba(0,0,0,0.5));
    transition:transform 0.4s var(--ssp-ease);
    transform-origin:center bottom;
}
.ssp-g2-card:hover .ssp-g2-img { transform:scale(1.06) translateY(-6px); }

.ssp-g2-body {
    padding-top: 38px;   /* espacio para imagen sobresalida */
    position:relative; z-index:1;
}
.ssp-g2-name { font-size:13px; font-weight:700; color:#e2e8f0; margin-bottom:6px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Acento de color en esquina */
.ssp-g2-card::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:3px;
    background: linear-gradient(90deg, var(--ssp-accent), transparent);
    border-radius: var(--ssp-radius) var(--ssp-radius) 0 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PLANTILLA 2 — MOSAICO 3 COLUMNAS
   Cards con gradiente de color, imagen flotante, efecto brillante
═══════════════════════════════════════════════════════════════════════════ */
.ssp-grid3 { padding:6px; background:var(--ssp-bg); border-radius:var(--ssp-radius); }
.ssp-g3-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:700px){ .ssp-g3-grid{grid-template-columns:1fr;} }
@media(min-width:481px) and (max-width:700px){ .ssp-g3-grid{grid-template-columns:repeat(2,1fr);} }

.ssp-g3-card {
    position:relative;
    border-radius:var(--ssp-radius);
    overflow:hidden;
    display:flex; flex-direction:column;
    min-height:300px;
    transition:transform 0.3s var(--ssp-ease), box-shadow 0.3s;
    cursor:pointer;
}
.ssp-g3-card:hover { transform:translateY(-5px) scale(1.01); box-shadow:var(--ssp-shadow); }

/* Fondo con degradado + patrón sutil */
.ssp-g3-card::after {
    content:'';
    position:absolute; inset:0; z-index:0;
    background: radial-gradient(ellipse at 70% 20%, rgba(255,255,255,0.06) 0%, transparent 60%);
    pointer-events:none;
}

/* Franja de color superior (acento) */
.ssp-g3-card::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:4px; z-index:10;
    background: linear-gradient(90deg, var(--ssp-accent), var(--ssp-accent2));
}

.ssp-g3-img-wrap {
    flex:1;
    display:flex; align-items:center; justify-content:center;
    padding:20px 20px 10px;
    position:relative; z-index:2;
    overflow:hidden;
}
.ssp-g3-img {
    max-height:170px; width:auto; max-width:85%;
    filter:drop-shadow(0 16px 30px rgba(0,0,0,0.45));
    transition:transform 0.4s var(--ssp-ease);
}
.ssp-g3-card:hover .ssp-g3-img { transform:scale(1.1) translateY(-6px); }

.ssp-g3-body {
    padding:14px 16px 18px;
    position:relative; z-index:2;
    background:linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
}
.ssp-g3-name { font-size:13px; font-weight:700; color:#f1f5f9; margin-bottom:7px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }


/* ═══════════════════════════════════════════════════════════════════════════
   PLANTILLA 3 — MOSAICO 4 COLUMNAS (marketplace blanco)
   Fondo blanco, imagen con sombra, badge rojo, botón rojo
═══════════════════════════════════════════════════════════════════════════ */
.ssp-grid4 { padding:6px; background:var(--ssp-bg,#f1f5f9); border-radius:var(--ssp-radius); }
.ssp-g4-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:900px){ .ssp-g4-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:600px){ .ssp-g4-grid{grid-template-columns:repeat(2,1fr);} }

.ssp-g4-card {
    position:relative;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    display:flex; flex-direction:column;
    border:1px solid #e8edf2;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
    transition:transform 0.25s var(--ssp-ease), box-shadow 0.25s;
    height:100%;  /* igual altura en todos los cards del grid */
}
.ssp-g4-card:hover { transform:translateY(-4px); box-shadow:0 14px 36px rgba(0,0,0,0.13); }

.ssp-g4-img-wrap {
    height:175px;
    display:flex; align-items:center; justify-content:center;
    padding:14px; background:#f8fafc;
    overflow:hidden;
}
.ssp-g4-img {
    max-height:148px; width:auto; max-width:100%;
    transition:transform 0.35s var(--ssp-ease);
}
.ssp-g4-card:hover .ssp-g4-img { transform:scale(1.09); }

.ssp-g4-body { padding:10px 13px 14px; display:flex; flex-direction:column; flex:1; }
.ssp-g4-name { font-size:12px; color:#334155; line-height:1.4; margin-bottom:5px; font-weight:500; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.ssp-g4-card .ssp-price-main-sm { color:#e00000; margin:3px 0; }
.ssp-g4-card .ssp-badge-pct { top:8px; left:8px; font-size:10px; padding:3px 8px; }


/* ═══════════════════════════════════════════════════════════════════════════
   PLANTILLA 4 — MOSAICO DESTACADO 1+3
   Producto principal grande con imagen muy sobresalida, 3 secundarios en fila
═══════════════════════════════════════════════════════════════════════════ */
.ssp-grid-featured { padding:6px; background:var(--ssp-bg); border-radius:var(--ssp-radius); }
.ssp-gf-layout { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:640px){ .ssp-gf-layout{grid-template-columns:1fr;} }

.ssp-gf-main {
    position:relative;
    border-radius:var(--ssp-radius);
    overflow:visible;
    display:flex; flex-direction:column;
    padding:22px 20px 24px;
    min-height:360px;
    transition:transform 0.3s var(--ssp-ease), box-shadow 0.3s;
    /* Fondo con gradiente rico */
    background:linear-gradient(145deg, #1a2744 0%, #0f1629 100%);
    border:1px solid rgba(255,255,255,0.08);
}
.ssp-gf-main:hover { transform:translateY(-4px); box-shadow:var(--ssp-shadow); }

/* Círculo decorativo de fondo */
.ssp-gf-main::after {
    content:'';
    position:absolute; top:-40px; right:-40px;
    width:220px; height:220px;
    background:radial-gradient(circle, rgba(249,194,0,0.12) 0%, transparent 70%);
    pointer-events:none; border-radius:50%;
}

.ssp-gf-main-img-wrap {
    flex:1;
    display:flex; align-items:flex-end; justify-content:center;
    min-height:210px;
    overflow:visible; position:relative; z-index:5;
    margin-bottom:-20px;
}
.ssp-gf-main-img {
    max-height:240px; width:auto;
    filter:drop-shadow(0 28px 50px rgba(0,0,0,0.6));
    transition:transform 0.4s var(--ssp-ease);
}
.ssp-gf-main:hover .ssp-gf-main-img { transform:scale(1.05) translateY(-8px); }

.ssp-gf-main-info { padding-top:28px; position:relative; z-index:2; }
.ssp-gf-main-name { font-size:15px; font-weight:800; color:#f1f5f9; margin-bottom:8px; line-height:1.35; }

.ssp-gf-grid { display:flex; flex-direction:column; gap:10px; }

.ssp-gf-card {
    position:relative;
    background:linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.08);
    overflow:hidden;
    display:flex; align-items:center; gap:12px;
    padding:12px 14px;
    transition:all 0.25s var(--ssp-ease);
    flex:1;
}
.ssp-gf-card:hover { background:rgba(255,255,255,0.1); transform:translateX(4px); border-color:rgba(249,194,0,0.3); }
.ssp-gf-img {
    width:72px; height:72px; object-fit:contain; flex-shrink:0;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,0.4));
    transition:transform 0.3s var(--ssp-ease);
}
.ssp-gf-card:hover .ssp-gf-img { transform:scale(1.08); }
.ssp-gf-card-body { flex:1; overflow:hidden; }
.ssp-gf-card-name { font-size:12px; color:#cbd5e1; line-height:1.35; margin-bottom:5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }


/* ═══════════════════════════════════════════════════════════════════════════
   PLANTILLA 5 — BANNER HERO
   Full-width, imagen de fondo, overlay gradiente, texto encima
═══════════════════════════════════════════════════════════════════════════ */
.ssp-banner-hero { border-radius:var(--ssp-radius); overflow:hidden; }
.ssp-hero-slide { position:relative; overflow:hidden; }
.ssp-hero-overlay { position:absolute; inset:0; z-index:1; }
.ssp-hero-content {
    position:absolute; inset:0; z-index:2;
    display:flex; flex-direction:column; justify-content:center;
    padding:40px 60px; max-width:58%;
}
@media(max-width:768px){ .ssp-hero-content{max-width:100%; padding:24px;} }

.ssp-hero-badge {
    display:inline-flex; align-items:center;
    background:var(--ssp-accent); color:#111;
    font-size:12px; font-weight:800;
    padding:6px 16px; border-radius:30px;
    margin-bottom:14px; align-self:flex-start;
    box-shadow:0 6px 18px rgba(249,194,0,0.4);
    text-transform:uppercase; letter-spacing:0.5px;
}
.ssp-hero-name {
    font-size:clamp(24px,4.5vw,48px); font-weight:900; color:#fff;
    margin-bottom:8px; line-height:1.1;
    font-family:'Barlow Condensed','Oswald',sans-serif;
    text-shadow:0 2px 20px rgba(0,0,0,0.5);
}
.ssp-hero-sub  { font-size:16px; color:rgba(255,255,255,0.8); margin-bottom:10px; }
.ssp-hero-before { font-size:14px; color:rgba(255,255,255,0.55); text-decoration:line-through; margin-bottom:4px; }
.ssp-hero-price {
    font-size:clamp(32px,6vw,60px); font-weight:900; color:var(--ssp-accent);
    margin-bottom:18px; line-height:1;
    font-family:'Barlow Condensed','Oswald',sans-serif;
    text-shadow:0 4px 20px rgba(249,194,0,0.3);
}
.ssp-btn-hero {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--ssp-accent); color:#111;
    font-size:15px; font-weight:800;
    padding:13px 30px; border-radius:35px;
    align-self:flex-start;
    transition:all 0.3s var(--ssp-ease);
    box-shadow:0 8px 24px rgba(249,194,0,0.4);
}
.ssp-btn-hero:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 14px 36px rgba(249,194,0,0.55); }
.ssp-hero-swiper .swiper-button-next,
.ssp-hero-swiper .swiper-button-prev { color:var(--ssp-accent); background:rgba(0,0,0,0.45); width:42px; height:42px; border-radius:50%; backdrop-filter:blur(4px); }
.ssp-hero-swiper .swiper-button-next::after,
.ssp-hero-swiper .swiper-button-prev::after { font-size:14px; font-weight:900; }


/* ═══════════════════════════════════════════════════════════════════════════
   PLANTILLA 6 — BANNER SPLIT  (imagen sobresalida izquierda + texto derecha)
   PLANTILLA 7 — BANNER TICKER  (igual + ticker inferior)
═══════════════════════════════════════════════════════════════════════════ */
.ssp-banner-split,
.ssp-banner-ticker { border-radius:var(--ssp-radius); overflow:hidden; }

.ssp-split-slide,
.ssp-ticker-slide {
    display:flex; align-items:stretch;
    min-height:400px;
    background:var(--ssp-bg);
    position:relative;
    overflow:visible;
}

/* Línea de acento izquierda */
.ssp-split-slide::before,
.ssp-ticker-slide::before {
    content:'';
    position:absolute; left:0; top:15%; bottom:15%;
    width:3px; background:var(--ssp-accent);
    border-radius:0 3px 3px 0;
    box-shadow:0 0 16px rgba(249,194,0,0.5);
}

/* Lado imagen — FONDO con gradiente de la misma paleta del banner */
.ssp-split-img-side {
    flex:0 0 48%;
    display:flex; align-items:flex-end; justify-content:center;
    padding:0 10px;
    overflow:visible;
    position:relative;
    min-height:400px;
}

/* Círculo de brillo detrás de la imagen */
.ssp-split-img-side::after {
    content:'';
    position:absolute; bottom:20%; left:50%;
    transform:translateX(-50%);
    width:200px; height:200px;
    background:radial-gradient(circle, rgba(249,194,0,0.15) 0%, transparent 70%);
    border-radius:50%;
    pointer-events:none;
}

.ssp-split-img {
    max-height:440px;
    width:auto; max-width:100%;
    object-fit:contain;
    filter:drop-shadow(0 30px 50px rgba(0,0,0,0.55));
    margin-bottom:-10px;
    position:relative; z-index:5;
    transition:transform 0.5s var(--ssp-ease);
    transform-origin:center bottom;
}
.ssp-split-slide:hover .ssp-split-img,
.ssp-ticker-slide:hover .ssp-split-img { transform:scale(1.04) translateY(-10px); }

/* Lado texto */
.ssp-split-text-side {
    flex:1;
    padding:32px 36px 32px 20px;
    display:flex; flex-direction:column; justify-content:center;
    position:relative; z-index:2;
}
@media(max-width:768px){
    .ssp-split-slide,.ssp-ticker-slide{flex-direction:column; min-height:auto;}
    .ssp-split-img-side{flex:none;width:100%; min-height:220px; padding-bottom:0;}
    .ssp-split-text-side{padding:16px 20px 24px;}
}

.ssp-split-badge {
    display:inline-flex; align-items:center; gap:5px;
    color:var(--ssp-accent);
    font-size:10px; font-weight:800; letter-spacing:2px;
    text-transform:uppercase; margin-bottom:10px;
}
.ssp-split-badge::before { content:'◆'; font-size:7px; }

.ssp-split-name {
    font-size:clamp(18px,2.8vw,26px); font-weight:800; color:#f8fafc;
    margin-bottom:12px; line-height:1.2;
    font-family:'Barlow Condensed','Oswald',sans-serif;
}
.ssp-split-prefix { font-size:13px; color:rgba(255,255,255,0.5); margin-bottom:4px; }

.ssp-split-star {
    display:inline-flex; align-items:center; gap:6px;
    background:linear-gradient(135deg,#c0392b,#e74c3c); color:#fff;
    font-size:12px; font-weight:800;
    padding:5px 14px; border-radius:6px;
    margin-bottom:10px; align-self:flex-start;
    box-shadow:0 5px 15px rgba(192,57,43,0.4);
}
.ssp-split-price {
    font-size:clamp(38px,6vw,62px); font-weight:900; color:#fff;
    font-family:'Barlow Condensed','Oswald',sans-serif; line-height:1;
    margin-bottom:6px;
    text-shadow:0 2px 20px rgba(0,0,0,0.3);
}
.ssp-split-sub { font-size:11px; color:rgba(255,255,255,0.4); margin-bottom:16px; }

.ssp-btn-split {
    display:inline-flex; align-items:center; gap:7px;
    background:var(--ssp-accent); color:#111;
    font-size:14px; font-weight:800;
    padding:12px 28px; border-radius:30px;
    align-self:flex-start;
    transition:all 0.3s var(--ssp-ease);
    box-shadow:0 6px 20px rgba(249,194,0,0.4);
}
.ssp-btn-split::after { content:'→'; }
.ssp-btn-split:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(249,194,0,0.55); }

/* Swiper botones en split */
.ssp-banner-split .swiper-button-next,
.ssp-banner-split .swiper-button-prev,
.ssp-banner-ticker .swiper-button-next,
.ssp-banner-ticker .swiper-button-prev {
    color:var(--ssp-accent); background:rgba(0,0,0,0.4);
    width:38px; height:38px; border-radius:50%;
}
.ssp-banner-split .swiper-button-next::after,
.ssp-banner-split .swiper-button-prev::after,
.ssp-banner-ticker .swiper-button-next::after,
.ssp-banner-ticker .swiper-button-prev::after { font-size:13px; font-weight:900; }

/* Ticker bar */
.ssp-ticker-bar {
    overflow:hidden; white-space:nowrap;
    padding:11px 0;
}
.ssp-ticker-track {
    display:inline-flex; gap:64px;
    animation:ssp-ticker 22s linear infinite;
}
.ssp-ticker-track span { font-size:13px; font-weight:700; letter-spacing:0.5px; }
@keyframes ssp-ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }


/* ═══════════════════════════════════════════════════════════════════════════
   PLANTILLA 8 — HYBRID SHOWCASE  (banner + slider de tarjetas)
═══════════════════════════════════════════════════════════════════════════ */
.ssp-hybrid-showcase { padding:6px; background:var(--ssp-bg); border-radius:var(--ssp-radius); }
.ssp-hs-layout { display:grid; grid-template-columns:280px 1fr; gap:12px; min-height:360px; }
@media(max-width:768px){ .ssp-hs-layout{grid-template-columns:1fr;} }

.ssp-hs-banner {
    border-radius:14px;
    padding:22px 16px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; overflow:hidden; position:relative;
    /* Gradiente de color con profundidad */
    background:linear-gradient(160deg, #1a3a6e 0%, #0d1f3c 60%, #0a1628 100%);
    border:1px solid rgba(59,130,246,0.2);
}
/* Efecto de luz en esquina */
.ssp-hs-banner::before {
    content:'';
    position:absolute; top:-60px; right:-60px;
    width:220px; height:220px;
    background:radial-gradient(circle, rgba(59,130,246,0.25) 0%, transparent 65%);
    border-radius:50%; pointer-events:none;
}

.ssp-hs-badge {
    background:linear-gradient(135deg,#1d4ed8,#3b82f6); color:#fff;
    font-size:10px; font-weight:800; letter-spacing:1.5px;
    text-transform:uppercase; padding:5px 14px; border-radius:20px;
    margin-bottom:10px; box-shadow:0 4px 14px rgba(29,78,216,0.4);
}
.ssp-hs-disc-text { font-size:clamp(28px,4vw,38px); font-weight:900; color:#fff; line-height:1; margin-bottom:4px; }
.ssp-hs-disc-text strong { color:var(--ssp-accent); font-size:1.5em; }
.ssp-hs-title { font-size:14px; font-weight:700; color:#bfdbfe; margin-bottom:6px; line-height:1.4; }
.ssp-hs-sub   { font-size:11px; color:rgba(191,219,254,0.6); margin-bottom:12px; }
.ssp-hs-main-img {
    max-height:150px; width:auto; margin:8px auto;
    filter:drop-shadow(0 14px 28px rgba(0,0,0,0.55));
    transition:transform 0.4s var(--ssp-ease);
}
.ssp-hs-banner:hover .ssp-hs-main-img { transform:scale(1.06) translateY(-6px); }

.ssp-btn-showcase {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--ssp-accent); color:#111;
    font-size:13px; font-weight:800;
    padding:10px 22px; border-radius:25px;
    margin-top:10px;
    transition:all 0.3s var(--ssp-ease);
    box-shadow:0 6px 18px rgba(249,194,0,0.4);
}
.ssp-btn-showcase:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(249,194,0,0.5); }

/* Cards del carousel derecho */
.ssp-hs-card {
    display:flex; flex-direction:column;
    background:linear-gradient(145deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));
    border-radius:12px; overflow:hidden; position:relative;
    border:1px solid rgba(255,255,255,0.07);
    transition:all 0.3s var(--ssp-ease); height:100%;
}
.ssp-hs-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,0.35); border-color:rgba(249,194,0,0.25); }
.ssp-hs-card-img-wrap { height:140px; display:flex; align-items:center; justify-content:center; padding:10px; background:rgba(255,255,255,0.03); overflow:hidden; }
.ssp-hs-card-img { max-height:120px; width:auto; max-width:100%; transition:transform 0.35s var(--ssp-ease); }
.ssp-hs-card:hover .ssp-hs-card-img { transform:scale(1.1) translateY(-4px); }
.ssp-hs-card-body { padding:10px 12px 14px; flex:1; display:flex; flex-direction:column; }
.ssp-hs-card-name { font-size:11px; color:#cbd5e1; line-height:1.4; margin-bottom:5px; flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ssp-hs-carousel .swiper-button-next,
.ssp-hs-carousel .swiper-button-prev { color:var(--ssp-accent); }


/* ═══════════════════════════════════════════════════════════════════════════
   PLANTILLA 9 — HYBRID CAROUSEL  (carrusel de tarjetas marketplace)
═══════════════════════════════════════════════════════════════════════════ */
.ssp-hybrid-carousel { padding:6px; background:var(--ssp-bg); border-radius:var(--ssp-radius); }

.ssp-hc-card {
    display:flex; flex-direction:column;
    background:#fff;
    border-radius:14px; overflow:hidden; position:relative;
    box-shadow:0 2px 10px rgba(0,0,0,0.07);
    border:1px solid #e8edf2;
    transition:all 0.28s var(--ssp-ease); height:100%;
}
.ssp-hc-card:hover { box-shadow:0 14px 38px rgba(0,0,0,0.14); transform:translateY(-5px); }
.ssp-hc-card:hover::after {
    content:'';
    position:absolute; inset:0; border-radius:14px;
    border:2px solid var(--ssp-accent2);
    pointer-events:none;
}

.ssp-hc-img-wrap { height:175px; display:flex; align-items:center; justify-content:center; padding:12px; background:#f8fafc; overflow:hidden; position:relative; }
.ssp-hc-img { max-height:152px; width:auto; max-width:100%; transition:transform 0.38s var(--ssp-ease); }
.ssp-hc-card:hover .ssp-hc-img { transform:scale(1.09) translateY(-4px); }

.ssp-hc-body { padding:10px 13px 14px; flex:1; display:flex; flex-direction:column; }
.ssp-hc-name { font-size:12px; color:#334155; font-weight:500; line-height:1.4; margin-bottom:4px; flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ssp-hc-vendor { font-size:10px; color:#94a3b8; margin-bottom:6px; }
.ssp-hc-card .ssp-price-main-sm { color:#e00000; }
.ssp-hc-card .ssp-price-before-sm { color:#94a3b8; }

/* Swiper del carousel */
.ssp-hc-swiper .swiper-button-next,
.ssp-hc-swiper .swiper-button-prev {
    color:#111; background:#fff;
    width:36px; height:36px; border-radius:50%;
    box-shadow:0 4px 14px rgba(0,0,0,0.15);
    top:40%;
}
.ssp-hc-swiper .swiper-button-next::after,
.ssp-hc-swiper .swiper-button-prev::after { font-size:12px; font-weight:900; }
.ssp-hc-swiper .swiper-pagination-bullet { background:#cbd5e1; }
.ssp-hc-swiper .swiper-pagination-bullet-active { background:var(--ssp-accent2); }


/* ═══════════════════════════════════════════════════════════════════════════
   PLANTILLA 10 — HYBRID COMBO  (banner + grilla + slider)
   El más completo — tres filas integradas
═══════════════════════════════════════════════════════════════════════════ */
.ssp-hybrid-combo { padding:6px; background:var(--ssp-bg); border-radius:var(--ssp-radius); }

.ssp-combo-top { display:grid; grid-template-columns:250px 1fr; gap:12px; margin-bottom:12px; }
@media(max-width:768px){ .ssp-combo-top{grid-template-columns:1fr;} }

/* Banner izquierda del combo */
.ssp-combo-banner {
    position:relative; border-radius:14px; overflow:visible;
    padding:18px 16px 14px;
    display:flex; flex-direction:column; align-items:center; justify-content:space-between;
    min-height:280px;
    background:linear-gradient(155deg,#1e3a5f 0%,#0f2240 60%,#081629 100%);
    border:1px solid rgba(255,255,255,0.08);
    transition:box-shadow 0.3s;
}
.ssp-combo-banner:hover { box-shadow:var(--ssp-shadow); }
.ssp-combo-banner::after {
    content:'';
    position:absolute; top:-30px; right:-30px;
    width:160px; height:160px;
    background:radial-gradient(circle,rgba(249,194,0,0.12) 0%,transparent 70%);
    border-radius:50%; pointer-events:none;
}

.ssp-combo-badge {
    background:var(--ssp-accent); color:#111;
    font-size:10px; font-weight:800; letter-spacing:0.8px;
    text-transform:uppercase; padding:4px 12px; border-radius:20px;
    margin-bottom:8px; align-self:flex-start;
    box-shadow:0 4px 12px rgba(249,194,0,0.4);
}
.ssp-combo-banner-img {
    max-height:130px; width:auto;
    filter:drop-shadow(0 14px 28px rgba(0,0,0,0.55));
    margin:6px auto;
    transition:transform 0.4s var(--ssp-ease);
    position:relative; z-index:5;
}
.ssp-combo-banner:hover .ssp-combo-banner-img { transform:scale(1.07) translateY(-6px); }
.ssp-combo-banner-info { text-align:center; }
.ssp-combo-title { font-size:14px; font-weight:800; color:#f1f5f9; margin-bottom:3px; line-height:1.3; }
.ssp-combo-sub { font-size:11px; color:rgba(241,245,249,0.55); margin-bottom:6px; }
.ssp-combo-disc { font-size:22px; font-weight:900; color:var(--ssp-accent); margin-bottom:10px; font-family:'Barlow Condensed',sans-serif; }
.ssp-btn-combo {
    display:inline-flex; align-items:center; gap:5px;
    background:var(--ssp-accent); color:#111;
    font-size:12px; font-weight:800;
    padding:9px 20px; border-radius:25px;
    transition:all 0.3s var(--ssp-ease);
    box-shadow:0 5px 16px rgba(249,194,0,0.4);
}
.ssp-btn-combo:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(249,194,0,0.5); }

/* Grilla 3 derecha */
.ssp-combo-grid { display:grid; grid-template-rows:repeat(3,1fr); gap:8px; }
.ssp-combo-card {
    position:relative;
    background:linear-gradient(135deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));
    border-radius:12px; overflow:hidden;
    display:flex; align-items:center; gap:12px; padding:11px 13px;
    border:1px solid rgba(255,255,255,0.07);
    transition:all 0.25s var(--ssp-ease);
}
.ssp-combo-card:hover { background:rgba(255,255,255,0.1); transform:translateX(4px); border-color:rgba(249,194,0,0.3); }
.ssp-combo-card-img-wrap { width:68px; height:64px; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.ssp-combo-card-img { max-height:58px; width:auto; max-width:68px; transition:transform 0.3s var(--ssp-ease); }
.ssp-combo-card:hover .ssp-combo-card-img { transform:scale(1.12); }
.ssp-combo-card-body { flex:1; overflow:hidden; }
.ssp-combo-card-name { font-size:12px; color:#cbd5e1; line-height:1.35; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Slider inferior del combo */
.ssp-combo-bottom { }
.ssp-combo-slide-card { background:#fff; border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,0.07); }


/* ═══════════════════════════════════════════════════════════════════════════
   FLASH SALE BAR
═══════════════════════════════════════════════════════════════════════════ */
.ssp-flash-bar {
    display:flex; align-items:center; gap:12px;
    padding:11px 22px;
    font-family:'Poppins',sans-serif;
    font-size:14px; font-weight:700;
    border-radius:0 0 var(--ssp-radius-sm) var(--ssp-radius-sm);
}
.ssp-flash-icon { font-size:20px; animation:ssp-pulse 0.8s infinite; }
.ssp-flash-msg { flex:1; }
.ssp-flash-countdown {
    font-size:20px; font-weight:900;
    font-family:'Barlow Condensed','Oswald',sans-serif;
    letter-spacing:2px;
    background:rgba(0,0,0,0.25); padding:4px 14px; border-radius:8px;
    min-width:120px; text-align:center;
}
@keyframes ssp-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }


/* ═══════════════════════════════════════════════════════════════════════════
   SWIPER GLOBAL
═══════════════════════════════════════════════════════════════════════════ */
.ssp-wrap .swiper-button-next,
.ssp-wrap .swiper-button-prev {
    color:var(--ssp-accent);
    background:rgba(0,0,0,0.48);
    width:38px; height:38px; border-radius:50%;
    backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,0.1);
}
.ssp-wrap .swiper-button-next::after,
.ssp-wrap .swiper-button-prev::after { font-size:13px; font-weight:900; }
.ssp-wrap .swiper-pagination-bullet { background:rgba(255,255,255,0.4); }
.ssp-wrap .swiper-pagination-bullet-active { background:var(--ssp-accent); }


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE GLOBAL
═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:480px){
    .ssp-g2-grid  { grid-template-columns:1fr; }
    .ssp-g4-grid  { grid-template-columns:repeat(2,1fr); }
    .ssp-gf-layout{ grid-template-columns:1fr; }
    .ssp-combo-top{ grid-template-columns:1fr; }
    .ssp-hs-layout{ grid-template-columns:1fr; }
    .ssp-combo-grid{ grid-template-rows:auto; grid-template-columns:1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CANVAS FRAME (plantillas del editor visual)
═══════════════════════════════════════════════════════════════════════════ */
.ssp-canvas-frame {
    position: relative;
    width: 100%;
    /* Aspect ratio 900:480 = 53.33% */
    padding-bottom: 53.33%;
    overflow: hidden;
    border-radius: 12px;
}
.ssp-canvas-frame > * {
    position: absolute;
    box-sizing: border-box;
}
.ssp-canvas-swiper .swiper-button-next,
.ssp-canvas-swiper .swiper-button-prev {
    color: #f9c200;
    background: rgba(0,0,0,0.5);
    width: 38px; height: 38px; border-radius: 50%;
}
.ssp-canvas-swiper .swiper-button-next::after,
.ssp-canvas-swiper .swiper-button-prev::after { font-size: 13px; font-weight: 900; }