/* ═══════════════════════════════════════════════════════════
   LABORATORIO — Estilos completos (layout + typography + components + responsive)
═══════════════════════════════════════════════════════════ */

/* Variables de fuente */
:root {
  --lab-font-mono: 'Roboto Mono', monospace;
  --lab-font-sans: 'Raleway', sans-serif;
  --lab-font-inter: 'Inter', sans-serif;
}

/* ── Fix contenedores WPBakery ───────────────────────────── */
.vc_row:has(#laboratorio) .full_section_inner,
.vc_row:has(#laboratorio) .vc_column-inner,
.vc_row:has(#laboratorio) .wpb_wrapper,
.vc_row:has(#laboratorio) .wpb_raw_html {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ── Layout ──────────────────────────────────────────────── */

#laboratorio {
  position: relative;
  width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  clip-path: polygon(0 51px, 100% 0, 100% calc(100% - 51px), 0 100%);
  margin-top: -51px;
  margin-bottom: -51px;
  background: #050508;
  overflow: hidden;
  z-index: 0;
  contain: layout paint;
}

#labCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.lab__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.40) 0%,
    rgba(0, 0, 0, 0)    50%,
    rgba(0, 0, 0, 0.95) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.lab__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 182px 190px 140px;
}

.lab__list {
  list-style: disc;
  padding-left: 20px;
  text-align: left;
  max-width: 430px;
  width: 100%;
  margin-bottom: 72px;
}

.lab__stats {
  display: flex;
  align-items: stretch;
  gap: 43px;
  flex-wrap: wrap;
  justify-content: center;
}

.lab__stat {
  background: rgba(0, 0, 0, 0.75);
  width: 195.82px;
  min-height: auto !important;
  height: auto !important;
  padding: 14px 24px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: default;
  transition:
    border-color 0.35s ease,
    box-shadow   0.35s ease,
    background   0.35s ease;
}

/* ── Typography ──────────────────────────────────────────── */

.lab__title {
  font-family: var(--lab-font-mono);
  font-weight: 700;
  font-size: clamp(28px, 3.8vw, 49.8px);
  line-height: 1.25;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  margin-bottom: 22px;
}

.lab__desc {
  font-family: var(--lab-font-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  max-width: 825px;
  margin-bottom: 56px;
}

.lab__list li {
  font-family: var(--lab-font-sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 26px;
  color: #fff;
}

.lab__stat-num {
  font-family: var(--lab-font-inter);
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  text-align: center;
  display: block;
  transition: text-shadow 0.35s ease;
}

.lab__stat-label {
  font-family: var(--lab-font-inter);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #99a1af;
  text-align: center;
  display: block;
}

/* ── Components ──────────────────────────────────────────── */

.lab__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 15px;
  font-family: var(--lab-font-mono);
  font-size: 12px !important;
  font-weight: 400;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #efefef !important;
  background: rgba(0, 211, 243, 0.30) !important;
  border: 1.538px solid #00d3f3 !important;
  border-radius: 7px !important;
  padding: 13px 18px 13px 33px !important;
  line-height: 1 !important;
  cursor: pointer;
  margin-bottom: 72px;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.lab__btn:hover {
  background: rgba(0, 211, 243, 0.55) !important;
  color: #fff !important;
  box-shadow:
    0 0  8px  rgba(0, 211, 243, 0.80),
    0 0  20px rgba(0, 211, 243, 0.50),
    0 0  45px rgba(0, 211, 243, 0.25),
    inset 0 0 15px rgba(0, 211, 243, 0.10) !important;
  border-color: #00d3f3 !important;
  text-shadow: 0 0 10px rgba(0, 211, 243, 0.90) !important;
}

.lab__btn svg { flex-shrink: 0; }

/* Bordes por variante */
.lab__stat--purple { border: 0.769px solid rgba(173, 70,  255, 0.2); }
.lab__stat--pink   { border: 0.769px solid rgba(246, 51,  154, 0.2); }
.lab__stat--cyan   { border: 0.769px solid rgba(43,  127, 255, 0.2); }
.lab__stat--white  { border: 0.769px solid rgba(255, 255, 255, 0.2); }
.lab__stat--indigo { border: 0.769px solid rgba(123, 140, 222, 0.2); }

/* Color número por variante */
.lab__stat--purple .lab__stat-num { color: #a855f7; }
.lab__stat--pink   .lab__stat-num { color: #ff006e; }
.lab__stat--cyan   .lab__stat-num { color: #00d3f3; }
.lab__stat--white  .lab__stat-num { color: #ffffff; }
.lab__stat--indigo .lab__stat-num { color: #7b8cde; }

/* Hover neon — PURPLE */
.lab__stat--purple:hover {
  border-color: #a855f7;
  background: rgba(168, 85, 247, 0.10);
  box-shadow: 0 0 6px rgba(168,85,247,1), 0 0 16px rgba(168,85,247,0.6), 0 0 36px rgba(168,85,247,0.25), inset 0 0 12px rgba(168,85,247,0.08);
}
.lab__stat--purple:hover .lab__stat-num { text-shadow: 0 0 8px rgba(168,85,247,1), 0 0 20px rgba(168,85,247,0.55); }

/* Hover neon — PINK */
.lab__stat--pink:hover {
  border-color: #ff006e;
  background: rgba(255, 0, 110, 0.10);
  box-shadow: 0 0 6px rgba(255,0,110,1), 0 0 16px rgba(255,0,110,0.6), 0 0 36px rgba(255,0,110,0.25), inset 0 0 12px rgba(255,0,110,0.08);
}
.lab__stat--pink:hover .lab__stat-num { text-shadow: 0 0 8px rgba(255,0,110,1), 0 0 20px rgba(255,0,110,0.55); }

/* Hover neon — CYAN */
.lab__stat--cyan:hover {
  border-color: #00d3f3;
  background: rgba(0, 211, 243, 0.10);
  box-shadow: 0 0 6px rgba(0,211,243,1), 0 0 16px rgba(0,211,243,0.6), 0 0 36px rgba(0,211,243,0.25), inset 0 0 12px rgba(0,211,243,0.08);
}
.lab__stat--cyan:hover .lab__stat-num { text-shadow: 0 0 8px rgba(0,211,243,1), 0 0 20px rgba(0,211,243,0.55); }

/* Hover neon — WHITE */
.lab__stat--white:hover {
  border-color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 6px rgba(255,255,255,0.9), 0 0 16px rgba(255,255,255,0.45), 0 0 36px rgba(255,255,255,0.18), inset 0 0 12px rgba(255,255,255,0.06);
}
.lab__stat--white:hover .lab__stat-num { text-shadow: 0 0 8px rgba(255,255,255,0.95), 0 0 20px rgba(255,255,255,0.5); }

/* Hover neon — INDIGO */
.lab__stat--indigo:hover {
  border-color: #7b8cde;
  background: rgba(123, 140, 222, 0.10);
  box-shadow: 0 0 6px rgba(123,140,222,1), 0 0 16px rgba(123,140,222,0.6), 0 0 36px rgba(123,140,222,0.25), inset 0 0 12px rgba(123,140,222,0.08);
}
.lab__stat--indigo:hover .lab__stat-num { text-shadow: 0 0 8px rgba(123,140,222,1), 0 0 20px rgba(123,140,222,0.55); }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1280px) {
  .lab__content { padding: 150px 80px 120px; }
}

@media (max-width: 1024px) {
  #laboratorio  { clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%); margin-top: -40px; margin-bottom: -40px; }
  .lab__content { padding: 120px 40px 100px; }
}

@media (max-width: 768px) {
  #laboratorio  { clip-path: polygon(0 28px, 100% 0, 100% calc(100% - 28px), 0 100%); margin-top: -28px; margin-bottom: -28px; }
  .lab__content { padding: 100px 24px 80px; }
  .lab__stats   { gap: 16px; }
  .lab__stat    { width: calc(50% - 8px); }
}

@media (max-width: 480px) {
  #laboratorio  { clip-path: polygon(0 20px, 100% 0, 100% calc(100% - 20px), 0 100%); margin-top: -20px; margin-bottom: -20px; }
  .lab__content { padding: 80px 16px 70px; }
  .lab__stats   { gap: 10px; }
  .lab__stat    { width: 100%; }
  .lab__title   { font-size: 28px; line-height: 1.3; }
}