/* ═══════════════════════════════════════════════════
   DAT Servicio Lima — Producto Único CSS
   DATXALE © 2024
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;600;700;900&family=Barlow+Condensed:wght@400;600;700;900&family=Exo+2:wght@400;600;700;900&display=swap');

/* ── RESET GLOBAL PÁGINA ─────────────────────── */
body.dslp-body,
body.dslp-body * { box-sizing: border-box; }

body.dslp-body {
  background: #040d1f;
  color:      #f0f4ff;
  font-family:'Barlow', sans-serif;
  margin: 0;
}

/* Ocultar elementos del tema que interfieran */
body.dslp-body .site-main > *:not(#dslp-wrap),
body.dslp-body #comments,
body.dslp-body .woocommerce-notices-wrapper {
  display: none !important;
}

#dslp-wrap {
  --navy:  #040d1f;
  --blue:  #0c6efd;
  --gold:  #f0a500;
  --bdr:   rgba(255,255,255,.07);
  --ff:    'Barlow', sans-serif;
  --ffc:   'Barlow Condensed', sans-serif;
  --ffe:   'Exo 2', sans-serif;
  background: var(--navy);
  min-height: 100vh;
}

/* ── BREADCRUMB ──────────────────────────────── */
.dslp-bc {
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 12px 40px;
}
.dslp-bc-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: rgba(255,255,255,.4);
}
.dslp-bc a { color: rgba(255,255,255,.5) !important; text-decoration: none !important; transition: color .2s; }
.dslp-bc a:hover { color: var(--tc, #3d9bff) !important; }
.dslp-bc .current { color: var(--tc, #3d9bff); }

/* ── HERO ────────────────────────────────────── */
.dslp-hero {
  position: relative;
  overflow: hidden;
  padding: 52px 40px 64px;
  background: #040d1f;
}
.dslp-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(12,110,253,.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 90%, color-mix(in srgb, var(--tc, #0c6efd) 15%, transparent) 0%, transparent 55%);
}
.dslp-orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.dslp-o1  { width: 500px; height: 500px; background: color-mix(in srgb, var(--tc, #0c6efd) 12%, transparent); top: -120px; left: -80px; }
.dslp-o2  { width: 320px; height: 320px; background: color-mix(in srgb, var(--tc2, #f0a500) 9%, transparent); bottom: -80px; right: -40px; }

.dslp-hero-inner {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
}
@media(max-width:900px){ .dslp-hero-inner { grid-template-columns: 1fr; gap: 36px; } }

/* ── IZQUIERDA: 3D + GALERÍA ─────────────────── */
.dslp-left { display: flex; flex-direction: column; gap: 16px; }

/* Canvas 3D */
.dslp-3d-wrap {
  position:      relative;
  border-radius: 20px;
  overflow:      hidden;
  border:        1px solid rgba(255,255,255,.08);
  background:    #06060f;
  box-shadow:    0 0 60px color-mix(in srgb, var(--tc, #0c6efd) 15%, transparent);
}
#dslp-canvas { display: block; width: 100% !important; height: 380px !important; }
.dslp-3d-badge {
  position:    absolute; top: 16px; left: 18px;
  padding:     5px 16px; border-radius: 50px;
  background:  color-mix(in srgb, var(--tc, #0c6efd) 20%, rgba(0,0,0,.6));
  border:      1px solid color-mix(in srgb, var(--tc, #0c6efd) 40%, transparent);
  font-family: 'Barlow Condensed', sans-serif;
  font-size:   .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color:       #fff; pointer-events: none;
  backdrop-filter: blur(6px);
}
.dslp-3d-hint {
  position:    absolute; bottom: 12px; right: 16px;
  font-size:   .68rem; color: rgba(255,255,255,.25);
  pointer-events: none; letter-spacing: .06em;
}

/* Galería fotos */
.dslp-gallery {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap:                   8px;
}
.dslp-gthumb {
  aspect-ratio:  1/1;
  border-radius: 10px;
  overflow:      hidden;
  border:        2px solid rgba(255,255,255,.07);
  cursor:        pointer;
  transition:    border-color .25s, transform .25s, box-shadow .25s;
  background:    #0a0a1e;
}
.dslp-gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.dslp-gthumb:hover, .dslp-gthumb.active {
  border-color: var(--tc, #0c6efd);
  transform:    translateY(-3px);
  box-shadow:   0 8px 20px color-mix(in srgb, var(--tc, #0c6efd) 25%, transparent);
}
.dslp-gthumb:hover img { transform: scale(1.08); }

/* ── DERECHA: INFO ───────────────────────────── */
.dslp-right { padding-top: 8px; }

.dslp-cat-pill {
  display:     inline-flex; align-items: center; gap: 7px;
  padding:     5px 16px; border-radius: 50px; margin-bottom: 16px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size:   .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background:  color-mix(in srgb, var(--tc, #0c6efd) 18%, transparent);
  border:      1px solid color-mix(in srgb, var(--tc, #0c6efd) 40%, transparent);
  color:       var(--tc, #3d9bff);
}

.dslp-title {
  font-family:    'Barlow Condensed', sans-serif !important;
  font-size:      clamp(1.8rem, 4vw, 3rem) !important;
  font-weight:    900 !important;
  line-height:    1.05 !important;
  color:          #f0f4ff !important;
  margin:         0 0 12px !important;
  letter-spacing: -.01em !important;
}

.dslp-sku { font-family: monospace; font-size: .74rem !important; color: rgba(255,255,255,.35) !important; margin: 0 0 12px !important; }

/* Estrellas */
.dslp-stars { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.dslp-stars .s-on  { color: #ffd700; font-size: 1.05rem; }
.dslp-stars .s-off { color: rgba(255,255,255,.2); font-size: 1.05rem; }
.dslp-stars .s-count { font-size: .8rem; color: rgba(255,255,255,.4); margin-left: 4px; }

/* Precio */
.dslp-price {
  margin: 0 0 20px !important;
}
.dslp-price .woocommerce-Price-amount,
.dslp-price bdi {
  font-family: 'Exo 2', sans-serif !important;
  font-size:   2.6rem !important;
  font-weight: 900 !important;
  color:       var(--tc, #4fc3f7) !important;
  line-height: 1 !important;
}

/* Descripción */
.dslp-desc {
  font-size:   .95rem !important;
  line-height: 1.7 !important;
  color:       rgba(240,244,255,.65) !important;
  margin:      0 0 24px !important;
  padding:     16px 18px;
  background:  rgba(255,255,255,.03);
  border:      1px solid rgba(255,255,255,.06);
  border-radius: 10px;
}
.dslp-desc p { margin: 0 !important; }

/* Specs */
.dslp-specs { margin-bottom: 24px; }
.dslp-specs-title { font-family: 'Barlow Condensed', sans-serif !important; font-size: .82rem !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: rgba(255,255,255,.4) !important; margin: 0 0 10px !important; }
.dslp-specs-grid { display: flex; flex-direction: column; gap: 6px; }
.dslp-spec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 14px; background: rgba(255,255,255,.03); border-radius: 8px; border: 1px solid rgba(255,255,255,.05); }
.dslp-spec-k { font-size: .82rem !important; color: rgba(255,255,255,.45) !important; flex-shrink: 0; }
.dslp-spec-v { font-size: .85rem !important; font-weight: 600 !important; color: #f0f4ff !important; text-align: right; }

/* Botones */
.dslp-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.dslp-btn-cart,
.dslp-btn-call {
  display:     inline-flex !important; align-items: center !important; gap: 8px;
  padding:     14px 26px !important; border-radius: 12px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size:   1rem !important; font-weight: 800 !important; letter-spacing: .05em !important;
  text-transform: uppercase !important; text-decoration: none !important;
  transition:  all .25s; cursor: pointer; border: none !important; line-height: 1 !important;
}
.dslp-btn-cart {
  background: linear-gradient(135deg, var(--tc, #0c6efd), var(--tc2, #0a58ca)) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--tc, #0c6efd) 38%, transparent);
}
.dslp-btn-cart:hover { transform: translateY(-3px); filter: brightness(1.12); color: #fff !important; }
.dslp-btn-call {
  background: rgba(255,255,255,.06) !important;
  border:     1.5px solid rgba(255,255,255,.18) !important;
  color:      #f0f4ff !important;
}
.dslp-btn-call svg { width: 18px; height: 18px; fill: currentColor; }
.dslp-btn-call:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; transform: translateY(-2px); }

/* Badges garantía */
.dslp-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.dslp-badge-item {
  display:     flex; align-items: center; gap: 7px;
  padding:     8px 14px; border-radius: 50px;
  background:  rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  font-size:   .78rem; color: rgba(255,255,255,.6);
}
.dslp-badge-ico { font-size: .95rem; }

/* ── DESCRIPCIÓN LARGA ───────────────────────── */
.dslp-full-desc { padding: 56px 40px; border-top: 1px solid rgba(255,255,255,.06); }
.dslp-full-desc-inner { max-width: 860px; margin: 0 auto; }
.dslp-full-desc h2 { font-family: 'Barlow Condensed', sans-serif !important; font-size: 1.8rem !important; font-weight: 900 !important; color: #f0f4ff !important; margin: 0 0 20px !important; }
.dslp-desc-content { font-size: .95rem !important; line-height: 1.75 !important; color: rgba(240,244,255,.65) !important; }
.dslp-desc-content p { margin-bottom: 12px !important; }

/* ── RELACIONADOS ────────────────────────────── */
.dslp-related { padding: 56px 40px; border-top: 1px solid rgba(255,255,255,.06); }
.dslp-related-inner { max-width: 1200px; margin: 0 auto; }
.dslp-rel-head { margin-bottom: 28px; }
.dslp-tag {
  display: inline-block; padding: 4px 14px; border-radius: 50px; margin-bottom: 8px;
  font-family: 'Barlow Condensed', sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #3d9bff; border: 1px solid rgba(61,155,255,.25); background: rgba(12,110,253,.07);
}
.dslp-rel-head h2 { font-family: 'Barlow Condensed', sans-serif !important; font-size: 1.7rem !important; font-weight: 900 !important; color: #f0f4ff !important; margin: 0 !important; }
.dslp-rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 16px; }
.dslp-rel-card {
  display: block; border-radius: 14px; overflow: hidden;
  background: #0f1228; border: 1px solid rgba(255,255,255,.07);
  text-decoration: none !important; transition: transform .3s, box-shadow .3s, border-color .3s;
}
.dslp-rel-card:hover { transform: translateY(-5px); border-color: rgba(61,155,255,.35); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.dslp-rel-img { height: 140px; overflow: hidden; background: rgba(255,255,255,.03); }
.dslp-rel-img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform .35s; }
.dslp-rel-card:hover .dslp-rel-img img { transform: scale(1.07); }
.dslp-rel-info { padding: 12px 14px; }
.dslp-rel-name { display: block; font-size: .84rem !important; font-weight: 700 !important; color: #f0f4ff !important; margin-bottom: 5px !important; line-height: 1.3 !important; }
.dslp-rel-price .woocommerce-Price-amount, .dslp-rel-price bdi { font-family: 'Exo 2', sans-serif !important; font-size: .95rem !important; font-weight: 800 !important; color: #3d9bff !important; }

/* ── RESPONSIVE ──────────────────────────────── */
@media(max-width:768px){
  .dslp-bc     { padding: 10px 20px; }
  .dslp-hero   { padding: 32px 20px 48px; }
  .dslp-full-desc, .dslp-related { padding: 40px 20px; }
  #dslp-canvas { height: 280px !important; }
  .dslp-actions { flex-direction: column; }
  .dslp-btn-cart, .dslp-btn-call { justify-content: center; }
}
@media(max-width:480px){
  .dslp-gallery { grid-template-columns: repeat(4, 1fr); }
  .dslp-badges  { flex-direction: column; }
}

/* ── Fila contacto (Llamar + WhatsApp) ────── */
.dslp-contact-row {
  display:   flex;
  gap:       10px;
  flex-wrap: wrap;
}
.dslp-contact-row .dslp-btn-call {
  flex: 1 1 180px;
}

/* ── Botón WhatsApp ─────────────────────── */
.dslp-btn-whatsapp {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         13px 20px;
  background:      linear-gradient(135deg,#25d366,#128c7e);
  color:           #fff !important;
  border-radius:   10px;
  font-family:     Barlow, sans-serif;
  font-weight:     700;
  font-size:       .88rem;
  letter-spacing:  .06em;
  text-transform:  uppercase;
  text-decoration: none;
  border:          none;
  cursor:          pointer;
  transition:      transform .2s, box-shadow .2s, filter .2s;
  box-shadow:      0 4px 18px rgba(37,211,102,.30);
  white-space:     nowrap;
  flex:            1 1 140px;
  justify-content: center;
}
.dslp-btn-whatsapp svg {
  width:  18px;
  height: 18px;
  fill:   currentColor;
}
.dslp-btn-whatsapp:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 28px rgba(37,211,102,.50);
  filter:     brightness(1.1);
}
.dslp-btn-whatsapp:active {
  transform: translateY(0);
}

/* ══════════════════════════════════════════
   ACORDEÓN DESCRIPCIÓN — override Elementor
══════════════════════════════════════════ */
#dslp-desc-accordion { display:flex !important; flex-direction:column !important; gap:0 !important; }

#dslp-desc-accordion .dslp-acc-block {
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  border-left:   none !important;
  border-right:  none !important;
  border-top:    none !important;
  overflow:      hidden !important;
  background:    transparent !important;
  margin:        0 !important;
  padding:       0 !important;
  border-radius: 0 !important;
  box-shadow:    none !important;
}
#dslp-desc-accordion .dslp-acc-block:first-child {
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

#dslp-desc-accordion .dslp-acc-head {
  all:             unset !important;
  display:         flex !important;
  width:           100% !important;
  align-items:     center !important;
  justify-content: space-between !important;
  padding:         16px 4px !important;
  cursor:          pointer !important;
  background:      transparent !important;
  border:          none !important;
  box-shadow:      none !important;
  border-radius:   0 !important;
  color:           #e8f4ff !important;
  transition:      background .18s !important;
  gap:             12px !important;
}
#dslp-desc-accordion .dslp-acc-head:hover {
  background: rgba(255,255,255,.04) !important;
}
#dslp-desc-accordion .dslp-acc-head:focus { outline: none !important; }

#dslp-desc-accordion .dslp-acc-title {
  font-family:    Barlow, sans-serif !important;
  font-size:      1.0rem !important;
  font-weight:    700 !important;
  color:          #e0eeff !important;
  letter-spacing: .02em !important;
  flex:           1 !important;
  line-height:    1.3 !important;
  background:     transparent !important;
  text-transform: none !important;
}

#dslp-desc-accordion .dslp-acc-arrow {
  color:       rgba(180,210,255,.5) !important;
  font-size:   .7rem !important;
  transition:  transform .28s ease !important;
  flex-shrink: 0 !important;
  display:     inline-block !important;
}
#dslp-desc-accordion .dslp-acc-block.open .dslp-acc-arrow {
  transform: rotate(180deg) !important;
  color:     #00e5ff !important;
}

#dslp-desc-accordion .dslp-acc-body {
  overflow:   hidden !important;
  transition: max-height .35s ease !important;
}
#dslp-desc-accordion .dslp-acc-inner {
  padding:     2px 4px 22px !important;
  color:       rgba(200,220,255,.80) !important;
  font-size:   .93rem !important;
  line-height: 1.78 !important;
}
#dslp-desc-accordion .dslp-acc-inner h2,
#dslp-desc-accordion .dslp-acc-inner h3 {
  color: #e8f4ff !important; font-size:.98rem !important; margin:14px 0 7px !important;
}
#dslp-desc-accordion .dslp-acc-inner ul  { padding-left:18px !important; }
#dslp-desc-accordion .dslp-acc-inner li  { margin-bottom:5px !important; }
#dslp-desc-accordion .dslp-acc-inner strong { color:#fff !important; }

/* ══════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════ */
#dslp-lightbox img {
  opacity: 0;
  transition: opacity .22s;
}
#dslp-lightbox button {
  font-family: Barlow, sans-serif;
}
#dslp-lightbox button:hover {
  background: rgba(255,255,255,.22) !important;
}