/* ═══════════════════════════════════════════════════
   DAT Servicio Técnico Lima — CSS Elementor Compatible
   DATXALE © 2024
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,600;0,700;0,900;1,700&family=Barlow+Condensed:wght@400;600;700;900&family=Exo+2:wght@400;600;700;900&display=swap');

/* ── RESET SCOPED ─────────────────────────────── */
#dsl-page {
  --navy:   #040d1f;
  --blue:   #0c6efd;
  --blue-l: #3d9bff;
  --gold:   #f0a500;
  --gold-l: #ffc337;
  --white:  #f0f4ff;
  --muted:  #7a8cb0;
  --bdr:    rgba(255,255,255,.07);
  --ff:     'Barlow', sans-serif;
  --ffc:    'Barlow Condensed', sans-serif;
  --ffe:    'Exo 2', sans-serif;

  font-family: var(--ff);
  color:       var(--white);
  background:  var(--navy);
  width:       100%;
  /* SIN overflow:hidden — para no romper Elementor */
}

#dsl-page *,
#dsl-page *::before,
#dsl-page *::after {
  box-sizing: border-box !important;
}

/* Elementor a veces pone margin en párrafos — neutralizar dentro del plugin */
#dsl-page p  { margin: 0; padding: 0; }
#dsl-page ul { list-style: none; margin: 0; padding: 0; }
#dsl-page h2,
#dsl-page h3,
#dsl-page h4 { margin: 0; padding: 0; }
#dsl-page a  { text-decoration: none; }
#dsl-page button { cursor: pointer; }

/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
.dsl-hero {
  position:   relative;
  padding:    72px 32px 64px;
  overflow:   hidden;
  text-align: center;
  background: linear-gradient(180deg, #040d1f 0%, #030b1a 100%);
  /* Forzar que ocupe todo el ancho del contenedor Elementor */
  width: 100%;
}

.dsl-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%,  rgba(12,110,253,.20) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 85% 80%, rgba(240,165,0,.10)  0%, transparent 55%);
}

.dsl-orb { position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; }
.dsl-orb-1 { width:380px; height:380px; background:rgba(12,110,253,.13); top:-80px; left:-60px; }
.dsl-orb-2 { width:260px; height:260px; background:rgba(240,165,0,.09); bottom:-40px; right:-20px; }
.dsl-orb-3 { width:180px; height:180px; background:rgba(61,155,255,.08); top:35%; right:8%; }

.dsl-hero-inner {
  position:   relative;
  z-index:    2;
  max-width:  800px;
  margin:     0 auto;
  width:      100%;
}

/* Badge */
.dsl-badge {
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  padding:     5px 18px;
  border:      1px solid rgba(12,110,253,.4);
  border-radius: 50px;
  background:  rgba(12,110,253,.1);
  font-family: var(--ffc);
  font-size:   .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:       var(--blue-l);
  margin-bottom: 24px;
}
.dsl-dot {
  width:8px; height:8px; border-radius:50%;
  background:#22dd88; box-shadow:0 0 8px #22dd88;
  animation: dsl-blink 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes dsl-blink { 0%,100%{opacity:1} 50%{opacity:.5} }

/* Título hero */
.dsl-hero-title {
  font-family:    var(--ffc) !important;
  font-size:      clamp(2.4rem, 6vw, 5rem) !important;
  font-weight:    900 !important;
  line-height:    .95 !important;
  letter-spacing: -.02em !important;
  color:          var(--white) !important;
  margin:         0 0 20px !important;
  text-transform: uppercase !important;
  display:        block !important;
}
.dsl-hero-title em {
  font-style:  normal !important;
  background:  linear-gradient(110deg, #0c6efd 0%, #3d9bff 40%, #f0a500 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Subtítulo hero */
.dsl-hero-sub {
  font-size:   1rem !important;
  font-weight: 300 !important;
  color:       var(--muted) !important;
  max-width:   580px !important;
  margin:      0 auto 32px !important;
  line-height: 1.65 !important;
  display:     block !important;
}

/* Botones hero */
.dsl-hero-actions {
  display:         flex;
  gap:             12px;
  justify-content: center;
  flex-wrap:       wrap;
  margin-bottom:   44px;
}

.dsl-btn-call {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         9px;
  padding:     14px 30px !important;
  background:  linear-gradient(135deg, #0c6efd, #0a58ca) !important;
  color:       #ffffff !important;
  font-family: var(--ffc) !important;
  font-size:   1rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  border-radius:  10px !important;
  border:      none !important;
  text-decoration: none !important;
  transition:  all .25s;
  box-shadow:  0 8px 28px rgba(12,110,253,.35);
  line-height: 1 !important;
  white-space: nowrap;
}
.dsl-btn-call svg { width:18px; height:18px; fill:currentColor; flex-shrink:0; }
.dsl-btn-call:hover { transform:translateY(-3px); box-shadow:0 14px 38px rgba(12,110,253,.45); color:#fff !important; }
.dsl-btn-call:visited { color:#fff !important; }
.dsl-btn-call.large {
  padding: 16px 38px !important;
  font-size: 1.1rem !important;
  animation: dsl-float 3s ease-in-out infinite;
}
@keyframes dsl-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.dsl-btn-ghost {
  display:     inline-flex !important;
  align-items: center !important;
  padding:     14px 28px !important;
  border:      1.5px solid rgba(255,255,255,.2) !important;
  color:       var(--white) !important;
  font-family: var(--ffc) !important;
  font-size:   1rem !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background:  rgba(255,255,255,.04) !important;
  transition:  all .25s;
  text-decoration: none !important;
  line-height: 1 !important;
}
.dsl-btn-ghost:hover { border-color:rgba(255,255,255,.4) !important; background:rgba(255,255,255,.09) !important; transform:translateY(-2px); color:var(--white) !important; }

/* Stats */
.dsl-stats {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             28px;
  flex-wrap:       wrap;
  padding:         22px 28px;
  background:      rgba(255,255,255,.04);
  border:          1px solid var(--bdr);
  border-radius:   14px;
  max-width:       500px;
  margin:          0 auto;
}
.dsl-stat { text-align: center; }
.dsl-stat strong {
  display:     block;
  font-family: var(--ffc) !important;
  font-size:   2rem !important;
  font-weight: 900 !important;
  color:       var(--gold-l) !important;
  line-height: 1 !important;
  margin:      0 !important;
}
.dsl-stat span {
  font-size:      .72rem;
  color:          var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  display:        block;
  margin-top:     3px;
}
.dsl-stat-sep { width:1px; height:40px; background:var(--bdr); flex-shrink:0; }

/* ══════════════════════════════════════════════════
   STRIP DIAGNÓSTICO
══════════════════════════════════════════════════ */
.dsl-strip {
  width:      100%;
  background: linear-gradient(90deg, rgba(12,110,253,.15), rgba(12,110,253,.06), rgba(240,165,0,.08));
  border-top:    1px solid rgba(12,110,253,.2);
  border-bottom: 1px solid rgba(12,110,253,.2);
  padding:    14px 32px;
}
.dsl-strip-inner {
  display:     flex;
  align-items: center;
  gap:         12px;
  max-width:   960px;
  margin:      0 auto;
  width:       100%;
}
.dsl-strip-inner svg    { width:22px; height:22px; stroke:var(--blue-l); stroke-width:2; fill:none; flex-shrink:0; }
.dsl-strip-inner > span { font-family:var(--ffc); font-size:.95rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-l); }
.dsl-strip-pulse { margin-left:auto; width:12px; height:12px; border-radius:50%; background:var(--blue); box-shadow:0 0 10px var(--blue); animation:dsl-blink 1.4s ease-in-out infinite; flex-shrink:0; }

/* ══════════════════════════════════════════════════
   SECCIONES
══════════════════════════════════════════════════ */
.dsl-section {
  padding:   60px 32px;
  width:     100%;
  background: var(--navy);
}
.dsl-section-inner {
  max-width: 940px;
  margin:    0 auto;
  width:     100%;
}
.dsl-sec-head {
  text-align:    center;
  margin-bottom: 40px;
}
.dsl-tag {
  display:       inline-block;
  padding:       4px 16px;
  border-radius: 50px;
  font-family:   var(--ffc);
  font-size:     .75rem;
  font-weight:   600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:         var(--blue-l);
  border:        1px solid rgba(61,155,255,.25);
  background:    rgba(12,110,253,.07);
  margin-bottom: 10px;
  display:       inline-block;
}
.dsl-sec-title {
  font-family:    var(--ffc) !important;
  font-size:      clamp(1.7rem, 4vw, 2.6rem) !important;
  font-weight:    900 !important;
  letter-spacing: -.01em !important;
  color:          var(--white) !important;
  line-height:    1.1 !important;
  margin:         0 !important;
  display:        block !important;
}
.dsl-sec-sub {
  font-size:   .93rem !important;
  color:       var(--muted) !important;
  margin:      8px 0 0 !important;
  display:     block !important;
  line-height: 1.5 !important;
}

/* ══════════════════════════════════════════════════
   ACORDEÓN
══════════════════════════════════════════════════ */
.dsl-accordion { display:flex; flex-direction:column; gap:8px; }

.dsl-acc-item {
  border:        1px solid var(--bdr);
  border-radius: 14px;
  background:    rgba(255,255,255,.025);
  overflow:      hidden;
  transition:    border-color .25s, box-shadow .25s;
}
.dsl-acc-item.open,
.dsl-acc-item:hover {
  border-color: rgba(12,110,253,.4);
  box-shadow:   0 0 20px rgba(12,110,253,.1);
}

.dsl-acc-trigger {
  display:     flex !important;
  align-items: center !important;
  gap:         14px;
  width:       100%;
  padding:     18px 20px;
  background:  transparent !important;
  border:      none !important;
  color:       var(--white);
  text-align:  left;
  font-family: var(--ff);
  transition:  background .2s;
  outline:     none;
}
.dsl-acc-trigger:hover { background:rgba(255,255,255,.03) !important; }

.dsl-acc-ico {
  width:           40px;
  height:          40px;
  border-radius:   10px;
  background:      rgba(12,110,253,.12);
  border:          1px solid rgba(12,110,253,.2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      background .25s;
}
.dsl-acc-item.open .dsl-acc-ico { background:rgba(12,110,253,.25); border-color:rgba(12,110,253,.45); }
.dsl-acc-ico svg { width:20px; height:20px; stroke:var(--blue-l); stroke-width:1.8; fill:none; }

.dsl-acc-lbl {
  flex:        1;
  font-size:   1rem !important;
  font-weight: 600 !important;
  color:       var(--white) !important;
  line-height: 1.3 !important;
  margin:      0 !important;
}

.dsl-acc-arr {
  width:        22px;
  height:       22px;
  flex-shrink:  0;
  stroke:       var(--muted);
  stroke-width: 2;
  fill:         none;
  transition:   transform .3s;
}
.dsl-acc-item.open .dsl-acc-arr { transform:rotate(180deg); }

.dsl-acc-body {
  max-height:  0;
  overflow:    hidden;
  transition:  max-height .4s ease;
  padding:     0 20px 0 74px;
}
.dsl-acc-item.open .dsl-acc-body {
  max-height: 280px;
  padding:    0 20px 22px 74px;
}
.dsl-acc-body p {
  font-size:   .93rem !important;
  color:       var(--muted) !important;
  line-height: 1.7 !important;
  margin:      0 0 12px !important;
}
.dsl-acc-cta {
  font-family:    var(--ffc) !important;
  font-size:      .82rem !important;
  font-weight:    700 !important;
  letter-spacing: .07em !important;
  color:          var(--blue-l) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition:     color .2s;
}
.dsl-acc-cta:hover { color:var(--gold-l) !important; }

/* ══════════════════════════════════════════════════
   CARDS MODALIDADES
══════════════════════════════════════════════════ */
.dsl-cards {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   20px;
}
@media(max-width:640px){ .dsl-cards { grid-template-columns:1fr; } }

.dsl-card {
  position:      relative;
  border-radius: 20px;
  overflow:      hidden;
  border:        1px solid var(--bdr);
  background:    rgba(255,255,255,.03);
  transition:    transform .3s, box-shadow .3s, border-color .3s;
}
.dsl-card:hover { transform:translateY(-5px); }
.dsl-card-blue { border-color:rgba(12,110,253,.25); }
.dsl-card-gold { border-color:rgba(240,165,0,.22); }
.dsl-card-blue:hover { border-color:rgba(12,110,253,.55); box-shadow:0 20px 50px rgba(12,110,253,.15); }
.dsl-card-gold:hover { border-color:rgba(240,165,0,.45); box-shadow:0 20px 50px rgba(240,165,0,.12); }

.dsl-card-glow {
  position:   absolute; top:-60px; left:50%; transform:translateX(-50%);
  width:      260px; height:160px; border-radius:50%; filter:blur(50px); opacity:.55; pointer-events:none; transition:opacity .3s;
}
.dsl-card-blue .dsl-card-glow { background:rgba(12,110,253,.28); }
.dsl-card-gold .dsl-card-glow { background:rgba(240,165,0,.18); }
.dsl-card:hover .dsl-card-glow { opacity:1; }

.dsl-card-top {
  padding:     28px 26px 20px;
  border-bottom: 1px solid var(--bdr);
  position:    relative;
  z-index:     1;
}
.dsl-badge-pill {
  display:       inline-block;
  padding:       3px 14px;
  border-radius: 50px;
  margin-bottom: 12px;
  font-family:   var(--ffc);
  font-size:     .72rem;
  font-weight:   700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dsl-badge-pill.blue { background:rgba(12,110,253,.15); color:#3d9bff; border:1px solid rgba(12,110,253,.3); }
.dsl-badge-pill.gold { background:rgba(240,165,0,.12);  color:#f0a500; border:1px solid rgba(240,165,0,.3); }

.dsl-card-top h4 {
  font-family: var(--ffc) !important;
  font-size:   1.4rem !important;
  font-weight: 900 !important;
  color:       var(--white) !important;
  margin:      0 0 4px !important;
  line-height: 1.15 !important;
}
.dsl-card-top > p {
  font-size:      .8rem !important;
  color:          var(--muted) !important;
  margin:         0 0 14px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.dsl-time { display:flex; align-items:baseline; gap:10px; }
.dsl-time strong {
  font-family: var(--ffc) !important;
  font-size:   2.2rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin:      0 !important;
}
.dsl-card-blue .dsl-time strong { color:#3d9bff !important; }
.dsl-card-gold .dsl-time strong { color:#f0a500 !important; }
.dsl-time span { font-size:.76rem; color:var(--muted); max-width:100px; line-height:1.3; }

.dsl-feat { padding:20px 26px; display:flex; flex-direction:column; gap:10px; position:relative; z-index:1; }
.dsl-feat li { display:flex; align-items:flex-start; gap:10px; font-size:.88rem !important; color:rgba(240,244,255,.78) !important; line-height:1.45 !important; }
.dsl-feat b  { flex-shrink:0; font-size:.85rem; margin-top:1px; font-weight:700 !important; }
.dsl-card-blue .dsl-feat b { color:#3d9bff; }
.dsl-card-gold .dsl-feat b { color:#f0a500; }

.dsl-card-btn {
  display:        block !important;
  margin:         0 26px 26px !important;
  padding:        13px 20px !important;
  border-radius:  10px !important;
  text-align:     center !important;
  font-family:    var(--ffc) !important;
  font-size:      .92rem !important;
  font-weight:    800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition:     all .25s;
  position:       relative;
  z-index:        1;
  border:         none !important;
  cursor:         pointer;
}
.blue-btn { background:linear-gradient(135deg,#0c6efd,#0a58ca) !important; color:#ffffff !important; box-shadow:0 6px 22px rgba(12,110,253,.32); }
.blue-btn:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(12,110,253,.45); color:#fff !important; }
.gold-btn { background:linear-gradient(135deg,#f0a500,#d48800) !important; color:#040d1f !important; box-shadow:0 6px 22px rgba(240,165,0,.25); }
.gold-btn:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(240,165,0,.38); color:#040d1f !important; }

/* ══════════════════════════════════════════════════
   SHOWCASE 3D
══════════════════════════════════════════════════ */
.dsl-electro-bg { background: linear-gradient(180deg, #06101f 0%, var(--navy) 100%); }

/* Tabs */
.dsl-tabs { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:24px; }
.dsl-tab {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         7px;
  padding:     9px 18px;
  border:      2px solid rgba(255,255,255,.09) !important;
  border-radius: 50px !important;
  background:  rgba(255,255,255,.04) !important;
  color:       var(--muted) !important;
  font-family: var(--ffe);
  font-size:   .8rem;
  font-weight: 600;
  transition:  all .25s;
  outline:     none;
  cursor:      pointer;
  line-height: 1;
}
.dsl-tab span:first-child { font-size:.95rem; }
.dsl-tab:hover,
.dsl-tab.active {
  border-color: var(--tc) !important;
  background:   color-mix(in srgb, var(--tc) 14%, transparent) !important;
  color:        var(--tc) !important;
  box-shadow:   0 0 16px color-mix(in srgb, var(--tc) 22%, transparent);
  transform:    translateY(-2px);
}

/* Scene */
.dsl-scene-wrap {
  position:      relative;
  width:         100%;
  border-radius: 18px;
  overflow:      hidden;
  border:        1px solid rgba(255,255,255,.07);
  background:    #050b18;
  margin-bottom: 24px;
  min-height:    480px;
}
#dsl-canvas {
  display:    block !important;
  width:      100% !important;
  height:     480px !important;
  max-width:  100% !important;
  cursor:     grab;
}
.dsl-scene-label {
  position:    absolute;
  top:         18px;
  left:        20px;
  display:     flex;
  align-items: center;
  gap:         9px;
  background:  rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  border:      1px solid rgba(255,255,255,.1);
  border-radius: 50px;
  padding:     6px 16px;
  pointer-events: none;
  font-family: var(--ffe);
  font-size:   .88rem;
  font-weight: 700;
  color:       #fff;
}
#dsl-cat-icon { font-size:1.05rem; }
.dsl-scene-hint {
  position:   absolute;
  bottom:     14px;
  right:      18px;
  font-family: var(--ffe);
  font-size:  .7rem;
  color:      rgba(255,255,255,.28);
  pointer-events: none;
  letter-spacing: .06em;
}

/* Panels */
.dsl-panels { width:100%; }
.dsl-panel  { display:none; }
.dsl-panel.active { display:block; animation:dsl-pin .35s ease; }
@keyframes dsl-pin { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

.dsl-panel-head {
  display:     flex;
  align-items: center;
  gap:         14px;
  padding:     16px 18px;
  background:  rgba(255,255,255,.03);
  border:      1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  margin-bottom: 16px;
}
.dsl-panel-icon { font-size:1.7rem; }
.dsl-panel-head h4 {
  font-family: var(--ffe) !important;
  font-size:   1.05rem !important;
  font-weight: 700 !important;
  color:       var(--tc) !important;
  margin:      0 !important;
  line-height: 1.2 !important;
}
.dsl-panel-head > div > span { font-size:.76rem; color:var(--muted); display:block; margin-top:2px; }

/* Grid productos */
.dsl-prod-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap:                   14px;
}
.dsl-prod-card {
  background:    #0f1126;
  border:        1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  overflow:      hidden;
  transition:    transform .3s, box-shadow .3s, border-color .3s;
  cursor:        default;
}
.dsl-prod-card:hover {
  transform:   translateY(-5px);
  border-color: var(--tc);
  box-shadow:  0 10px 28px rgba(0,0,0,.4), 0 0 16px color-mix(in srgb, var(--tc) 18%, transparent);
}
.dsl-prod-img {
  height:          138px;
  overflow:        hidden;
  background:      rgba(255,255,255,.03);
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.dsl-prod-img img { width:100%; height:100%; object-fit:contain; padding:10px; transition:transform .4s; }
.dsl-prod-card:hover .dsl-prod-img img { transform:scale(1.07); }
.dsl-prod-no-img { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.6rem; opacity:.75; }
.dsl-prod-info { padding:11px 13px 13px; }
.dsl-prod-sku  { font-size:.62rem; color:var(--muted); letter-spacing:.1em; font-family:monospace; margin-bottom:3px; }
.dsl-prod-name {
  font-size:   .83rem !important;
  font-weight: 700 !important;
  color:       var(--white) !important;
  margin:      0 0 5px !important;
  line-height: 1.3 !important;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}
.dsl-prod-stars { margin-bottom:4px; }
.dsl-prod-stars .s-on  { color:#ffd700; font-size:.74rem; }
.dsl-prod-stars .s-off { color:rgba(255,255,255,.2); font-size:.74rem; }
.dsl-prod-price { font-size:.98rem !important; font-weight:800 !important; color:var(--tc) !important; font-family:var(--ffe) !important; margin:5px 0 9px !important; }
.dsl-prod-btns  { display:flex; gap:6px; }
.dsl-prod-btns a,
.dsl-prod-btns button {
  flex:        1;
  padding:     7px 8px !important;
  border-radius: 7px !important;
  font-size:   .72rem !important;
  font-weight: 700 !important;
  font-family: var(--ff) !important;
  text-align:  center;
  transition:  all .2s;
  line-height: 1;
  text-decoration: none !important;
  cursor:      pointer;
}
.dsl-prod-btns a { background:linear-gradient(135deg, var(--tc), var(--tc2)) !important; color:#fff !important; border:none !important; }
.dsl-prod-btns a:hover { filter:brightness(1.2); color:#fff !important; }
.dsl-prod-btns button { background:transparent !important; border:1px solid var(--tc) !important; color:var(--tc) !important; }
.dsl-prod-btns button:hover { background:color-mix(in srgb, var(--tc) 15%, transparent) !important; }

/* ══════════════════════════════════════════════════
   CTA FINAL
══════════════════════════════════════════════════ */
.dsl-cta {
  position:   relative;
  overflow:   hidden;
  padding:    68px 32px;
  text-align: center;
  background: linear-gradient(180deg, #030b1a 0%, var(--navy) 100%);
  border-top: 1px solid var(--bdr);
  width:      100%;
}
.dsl-cta-bg {
  position: absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 80% 100% at 50% 110%, rgba(12,110,253,.2) 0%, transparent 60%);
}
.dsl-cta-rings {
  position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; pointer-events:none;
}
.dsl-cta-rings::before,
.dsl-cta-rings::after {
  content:''; position:absolute; border-radius:50%; border:1.5px solid rgba(12,110,253,.22);
  top:50%; left:50%; transform:translate(-50%,-50%);
  animation:dsl-ring 2.5s ease-out infinite;
}
.dsl-cta-rings::before { width:130px; height:130px; }
.dsl-cta-rings::after  { width:220px; height:220px; animation-delay:.9s; }
@keyframes dsl-ring { 0%{opacity:.7;transform:translate(-50%,-50%) scale(.6)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)} }

.dsl-cta-inner { position:relative; z-index:2; max-width:660px; margin:0 auto; }
.dsl-cta-inner h3 { font-family:var(--ffc) !important; font-size:clamp(1.5rem,4vw,2.2rem) !important; font-weight:900 !important; color:var(--white) !important; margin:0 0 12px !important; line-height:1.15 !important; }
.dsl-cta-inner p  { font-size:.96rem !important; color:var(--muted) !important; line-height:1.65 !important; margin:0 0 32px !important; }

/* ══════════════════════════════════════════════════
   MODAL PRODUCTO
══════════════════════════════════════════════════ */
.dsl-modal {
  position:    fixed;
  inset:       0;
  background:  rgba(0,0,0,.8);
  backdrop-filter: blur(12px);
  z-index:     999999;
  display:     flex;
  align-items: center;
  justify-content: center;
  padding:     16px;
  opacity:     0;
  visibility:  hidden;
  transition:  opacity .3s, visibility .3s;
}
.dsl-modal.open { opacity:1; visibility:visible; }
.dsl-modal-box {
  background:    #0e0e22;
  border:        1px solid rgba(79,195,247,.22);
  border-radius: 20px;
  max-width:     660px;
  width:         100%;
  max-height:    90vh;
  overflow-y:    auto;
  position:      relative;
  box-shadow:    0 0 70px rgba(79,195,247,.12), 0 30px 70px rgba(0,0,0,.6);
  transform:     translateY(18px) scale(.97);
  transition:    transform .3s;
}
.dsl-modal.open .dsl-modal-box { transform:translateY(0) scale(1); }
.dsl-modal-close {
  position:  absolute; top:14px; right:14px;
  background: rgba(255,255,255,.08) !important;
  border:    none !important;
  color:     #fff !important;
  width:     36px; height:36px; border-radius:50%;
  font-size: 1rem; z-index:2; transition:background .2s;
  display:   flex; align-items:center; justify-content:center;
}
.dsl-modal-close:hover { background:rgba(255,255,255,.2) !important; }
.dsl-modal-grid { display:grid; grid-template-columns:1fr 1fr; }
@media(max-width:520px){ .dsl-modal-grid { grid-template-columns:1fr; } }
.dsl-modal-img  { background:rgba(255,255,255,.03); display:flex; align-items:center; justify-content:center; min-height:240px; padding:22px; border-right:1px solid rgba(255,255,255,.06); }
.dsl-modal-img img { max-width:100%; max-height:210px; object-fit:contain; }
.dsl-modal-detail  { padding:26px; }
.dsl-modal-cat     { display:inline-flex; align-items:center; gap:5px; padding:4px 14px; border-radius:50px; font-size:.72rem; font-weight:700; color:#fff; margin-bottom:14px; font-family:var(--ffc); letter-spacing:.07em; text-transform:uppercase; }
.dsl-modal-detail h2 { font-size:1.2rem !important; font-weight:800 !important; color:var(--white) !important; margin:0 0 8px !important; line-height:1.25 !important; }
.dsl-modal-sku   { font-family:monospace; font-size:.74rem; color:var(--muted); margin-bottom:10px; }
.dsl-modal-price { font-size:1.85rem !important; font-weight:900 !important; font-family:var(--ffe) !important; color:#4fc3f7 !important; margin-bottom:18px !important; line-height:1 !important; }
.dsl-modal-btn,
.dsl-modal-btn2  { display:block !important; width:100% !important; padding:12px 18px !important; border-radius:10px !important; text-align:center !important; text-decoration:none !important; font-family:var(--ffc) !important; font-size:.9rem !important; font-weight:800 !important; letter-spacing:.04em !important; transition:all .25s; margin-bottom:9px !important; cursor:pointer; border:none; }
.dsl-modal-btn  { background:linear-gradient(135deg,#4fc3f7,#7c4dff) !important; color:#fff !important; }
.dsl-modal-btn:hover { filter:brightness(1.15); transform:translateY(-2px); color:#fff !important; }
.dsl-modal-btn2 { background:transparent !important; border:2px solid rgba(79,195,247,.3) !important; color:#4fc3f7 !important; }
.dsl-modal-btn2:hover { border-color:#4fc3f7 !important; background:rgba(79,195,247,.09) !important; color:#4fc3f7 !important; }

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media(max-width:768px){
  .dsl-hero    { padding:52px 20px 48px; }
  .dsl-section { padding:48px 20px; }
  .dsl-strip   { padding:12px 20px; }
  .dsl-cta     { padding:52px 20px; }
  .dsl-stats   { gap:14px; padding:16px; }
  .dsl-acc-item.open .dsl-acc-body { padding:0 16px 18px 54px; }
  .dsl-prod-grid { grid-template-columns:repeat(auto-fill, minmax(155px,1fr)); gap:10px; }
}
@media(max-width:480px){
  .dsl-hero-actions { flex-direction:column; align-items:center; }
  .dsl-btn-call, .dsl-btn-ghost { width:100% !important; justify-content:center !important; }
  .dsl-tabs   { gap:6px; }
  .dsl-tab    { padding:7px 12px; font-size:.74rem; }
  .dsl-cards  { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════
   PANEL HEAD — con botón Ver más
══════════════════════════════════════════════════ */
.dsl-panel-head {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       14px 18px;
  background:    rgba(255,255,255,.03);
  border:        1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  margin-bottom: 16px;
  flex-wrap:     wrap;
}
.dsl-panel-icon { font-size: 1.7rem; flex-shrink: 0; }
.dsl-panel-head-text { flex: 1; min-width: 0; }
.dsl-panel-head h4 {
  font-family: var(--ffe) !important;
  font-size:   1.05rem !important;
  font-weight: 700 !important;
  color:       var(--tc) !important;
  margin:      0 !important;
  line-height: 1.2 !important;
}
.dsl-panel-head-text > span { font-size: .76rem; color: var(--muted); display: block; margin-top: 2px; }

/* Botón Ver más */
.dsl-vermas-btn {
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             7px;
  padding:         9px 20px !important;
  background:      transparent !important;
  border:          1.5px solid var(--tc) !important;
  border-radius:   50px !important;
  color:           var(--tc) !important;
  font-family:     var(--ffc) !important;
  font-size:       .8rem !important;
  font-weight:     700 !important;
  letter-spacing:  .06em !important;
  text-transform:  uppercase !important;
  text-decoration: none !important;
  transition:      all .25s;
  white-space:     nowrap;
  flex-shrink:     0;
}
.dsl-vermas-btn svg {
  width: 15px; height: 15px;
  stroke: currentColor; stroke-width: 2; fill: none;
  transition: transform .25s;
}
.dsl-vermas-btn:hover {
  background: color-mix(in srgb, var(--tc) 15%, transparent) !important;
  color: var(--tc) !important;
  transform: translateX(3px);
}
.dsl-vermas-btn:hover svg { transform: translateX(4px); }

.dsl-no-prods {
  color: var(--muted); text-align: center; padding: 40px 20px;
  font-style: italic; font-size: .9rem !important;
}

/* ══════════════════════════════════════════════════
   GALERÍA DE IMÁGENES DE PRODUCTOS
══════════════════════════════════════════════════ */
.dsl-gallery-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:                   14px;
}

/* Cada item: link con imagen + overlay */
.dsl-gi {
  display:       block;
  position:      relative;
  border-radius: 14px;
  overflow:      hidden;
  border:        1px solid rgba(255,255,255,.06);
  background:    #0c0e20;
  text-decoration: none !important;
  transition:    transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  aspect-ratio:  1 / 1;
}
.dsl-gi::before {
  content:    '';
  position:   absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, var(--tc), var(--tc2));
  opacity:    0; transition: opacity .3s;
}
.dsl-gi:hover {
  transform:    translateY(-6px) scale(1.02);
  border-color: var(--tc);
  box-shadow:   0 18px 44px rgba(0,0,0,.55),
                0 0 28px color-mix(in srgb, var(--tc) 24%, transparent);
}
.dsl-gi:hover::before { opacity: 1; }

/* Imagen */
.dsl-gi-img {
  width:    100%;
  height:   100%;
  position: absolute; inset: 0;
}
.dsl-gi-img img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  object-position: center;
  transition:  transform .45s ease;
  display:     block;
}
.dsl-gi:hover .dsl-gi-img img { transform: scale(1.08); }

/* Emoji fallback */
.dsl-gi-emoji {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       3.2rem;
  opacity:         .85;
}

/* Overlay con nombre + CTA */
.dsl-gi-overlay {
  position:   absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.2) 55%, transparent 100%);
  display:    flex;
  flex-direction: column;
  justify-content: flex-end;
  padding:    14px 12px 12px;
  opacity:    0;
  transition: opacity .3s ease;
  z-index:    2;
}
.dsl-gi:hover .dsl-gi-overlay { opacity: 1; }

.dsl-gi-name {
  font-family:    var(--ff) !important;
  font-size:      .78rem !important;
  font-weight:    700 !important;
  color:          #ffffff !important;
  line-height:    1.3 !important;
  display:        -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:       hidden;
  margin-bottom:  6px !important;
}
.dsl-gi-cta {
  display:        inline-block;
  font-family:    var(--ffc) !important;
  font-size:      .72rem !important;
  font-weight:    700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color:          var(--tc) !important;
  background:     rgba(0,0,0,.5);
  padding:        4px 10px;
  border-radius:  50px;
  border:         1px solid var(--tc);
}

@media(max-width:768px){
  .dsl-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 10px; }
}
@media(max-width:480px){
  .dsl-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dsl-vermas-btn   { padding: 7px 14px !important; font-size: .72rem !important; }
}

/* ══════════════════════════════════════════════════
   MODAL 3D PRODUCTO
══════════════════════════════════════════════════ */
.dsl-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(14px);
  z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: dsl-fade-in .25s ease;
}
@keyframes dsl-fade-in { from{opacity:0} to{opacity:1} }

.dsl-modal-box {
  background:    #070714;
  border:        1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  width:         100%;
  max-width:     860px;
  max-height:    90vh;
  overflow:      hidden;
  position:      relative;
  box-shadow:    0 0 100px rgba(79,195,247,.12), 0 40px 90px rgba(0,0,0,.7);
  animation:     dsl-box-in .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes dsl-box-in { from{transform:scale(.88) translateY(30px);opacity:0} to{transform:none;opacity:1} }

#dsl-modal-close {
  position:        absolute; top: 16px; right: 16px; z-index: 10;
  width:           38px; height: 38px; border-radius: 50%;
  background:      rgba(255,255,255,.09) !important; border: none !important;
  color:           rgba(255,255,255,.8) !important; font-size: 1rem;
  display:         flex; align-items: center; justify-content: center;
  cursor:          pointer; transition: background .2s, transform .2s;
}
#dsl-modal-close:hover { background: rgba(255,255,255,.18) !important; transform: scale(1.1); }

.dsl-modal-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
}
@media(max-width:600px){ .dsl-modal-layout { grid-template-columns: 1fr; } }

/* Lado 3D */
.dsl-modal-3d-side {
  position: relative;
  background: #060614;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  min-height: 380px;
}
#dsl-modal-canvas {
  width:  100% !important;
  height: 100% !important;
  display: block;
  position: absolute; inset: 0;
}
.dsl-modal-cat-pill {
  position:      absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  padding:       5px 18px; border-radius: 50px;
  font-family:   var(--ffc); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
  white-space:   nowrap;
  box-shadow:    0 4px 16px rgba(0,0,0,.4);
  z-index:       2;
}

/* Lado info */
.dsl-modal-info-side {
  padding: 32px 28px 28px;
  overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center;
}
.dsl-mp-img-wrap {
  background:    rgba(255,255,255,.04);
  border-radius: 10px;
  padding:       12px;
  margin-bottom: 16px;
  text-align:    center;
}
.dsl-mp-photo { max-height: 100px; object-fit: contain; width: 100%; }

.dsl-mp-sku   { font-family: monospace; font-size: .72rem; color: var(--muted); margin: 0 0 6px !important; }
.dsl-mp-name  { font-size: 1.35rem !important; font-weight: 900 !important; color: var(--white) !important; line-height: 1.25 !important; margin: 0 0 10px !important; font-family: var(--ffc) !important; }
.dsl-mp-stars { margin-bottom: 14px; }
.dsl-mp-stars .s-on  { color: #ffd700; font-size: .9rem; }
.dsl-mp-stars .s-off { color: rgba(255,255,255,.18); font-size: .9rem; }
.dsl-mp-price { font-size: 2.1rem !important; font-weight: 900 !important; font-family: var(--ffe) !important; color: #4fc3f7 !important; margin: 0 0 22px !important; line-height: 1 !important; }

.dsl-mp-btns  { display: flex; flex-direction: column; gap: 10px; }
.dsl-mp-cart,
.dsl-mp-link  {
  display:         block !important;
  padding:         14px 18px !important;
  border-radius:   12px !important;
  text-align:      center !important;
  font-family:     var(--ffc) !important;
  font-size:       .95rem !important;
  font-weight:     800 !important;
  letter-spacing:  .05em !important;
  text-decoration: none !important;
  transition:      all .25s;
  cursor:          pointer;
}
.dsl-mp-cart { background: linear-gradient(135deg, #0c6efd, #7c4dff) !important; color: #fff !important; box-shadow: 0 6px 24px rgba(12,110,253,.3); border: none !important; }
.dsl-mp-cart:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(12,110,253,.45); filter: brightness(1.1); color: #fff !important; }
.dsl-mp-link  { background: transparent !important; border: 2px solid rgba(79,195,247,.3) !important; color: #4fc3f7 !important; }
.dsl-mp-link:hover  { border-color: #4fc3f7 !important; background: rgba(79,195,247,.08) !important; color: #4fc3f7 !important; }

/* mount container */
#dsl-modal-mount { display: none; }

@media(max-width:600px){
  .dsl-modal-3d-side { min-height: 260px; }
  .dsl-modal-info-side { padding: 20px 18px 22px; }
  .dsl-mp-name  { font-size: 1.1rem !important; }
  .dsl-mp-price { font-size: 1.6rem !important; }
  .dsl-prod-grid { grid-template-columns: repeat(auto-fill, minmax(155px,1fr)); gap:10px; }
}