/* =========================================================
   THE LAB — "Personalización"  (v9.2)
   ---------------------------------------------------------
   Solo carga en la página /personalizacion/ (ver dj_lab_assets() en
   inc/personalizacion/personalizacion.php) y en su vista previa de
   Elementor. El resto del sitio nunca descarga este archivo.

   Color de marca de The Lab: #e52822 (el rojo de su isotipo, distinto
   al --dj-red de Deportes Jimmy) — pedido así por el cliente para que
   esta página se sienta como su propia sub-marca dentro del sitio.
   ========================================================= */

:root { --lab-red: #e52822; }


/* ---------------------------------------------------------
   0. SIN TÍTULO DE PÁGINA, Y EL HERO PEGADO AL MENÚ
   -----------------------------------------------------------
   WordPress/Elementor imprimen "Personalización" como título de la
   página arriba del contenido (el recuadro gris que sale en el
   editor) — aquí no se quiere ver ese texto ni el espacio que ocupa,
   para que el Hero quede pegado al menú sin ningún hueco en medio.
   Se cubren los selectores más comunes de título de página en Hello
   Elementor / Elementor por si el tema usa uno u otro: "mejor de más"
   que dejar uno vivo por no cubrirlo.
   --------------------------------------------------------- */
body.dj-page-lab .page-header,
body.dj-page-lab .entry-header,
body.dj-page-lab h1.entry-title,
body.dj-page-lab .elementor-page-title {
  display: none !important;
}

body.dj-page-lab #content,
body.dj-page-lab .site-content,
body.dj-page-lab main#main,
body.dj-page-lab .elementor {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Seguía quedando una franja blanca entre el menú y el Hero: no era el
   título (ya tapado arriba), sino el padding/margen que Elementor le
   pone por defecto a la PRIMERA sección/contenedor de la página (los
   "Containers" nuevos de Elementor traen 10-20px de aire de fábrica).
   Se anula ese aire, pero SOLO en el primer bloque de la página —
   nada de esto toca el espaciado de las secciones de más abajo. */
body.dj-page-lab .elementor > .elementor-element:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.dj-page-lab .elementor > .elementor-element:first-child .elementor-container,
body.dj-page-lab .elementor > .elementor-element:first-child .elementor-column,
body.dj-page-lab .elementor > .elementor-element:first-child .elementor-widget-wrap,
body.dj-page-lab .elementor > .elementor-element:first-child .elementor-widget-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Esa línea blanca fina también podía ser el borde inferior que el
   menú lleva SIEMPRE (para separarlo del contenido en el resto del
   sitio, sobre fondo blanco casi no se nota) — aquí, sobre negro, se
   veía como una raya clara. Se quita del todo en esta página. */
body.dj-page-lab .dj-header__main {
  border-bottom: none;
}

/* El mismo aire de fábrica que Elementor le pone a la primera sección
   (arriba) también lo pone en la ÚLTIMA — acá se nota como una franja
   blanca entre el mini-footer de "The Lab" (widget Cierre) y el
   footer completo del sitio, que se quiere ver pegado, sin hueco. Los
   Contenedores nuevos de Elementor usan ".e-con-inner" como el div
   que de verdad lleva ese padding (no ".elementor-widget-wrap" de los
   Contenedores viejos) — se cubren los dos por si acaso. */
body.dj-page-lab .elementor > .elementor-element:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body.dj-page-lab .elementor > .elementor-element:last-child .e-con-inner,
body.dj-page-lab .elementor > .elementor-element:last-child .elementor-widget-wrap,
body.dj-page-lab .elementor > .elementor-element:last-child .elementor-widget-container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* ---------------------------------------------------------
   1. MENÚ EN NEGRO — SOLO EN ESTA PÁGINA
   -----------------------------------------------------------
   El body lleva la clase .dj-page-lab (la agrega dj_lab_body_class()
   con el filtro body_class, así no hay que tocar header.php con un
   "si es esta página..." regado por todas partes). Todo lo que en el
   header normal es negro sobre blanco, aquí se invierte.

   El menú móvil (el panel negro que sale desde el lado) YA es oscuro
   siempre en todo el sitio, así que no hace falta tocarlo aquí.
   --------------------------------------------------------- */
body.dj-page-lab .dj-header__main {
  background-color: #0b0b0c;
  /* el borde inferior ya se quitó del todo arriba (sección 0) */
}

body.dj-page-lab .dj-nav__list a { color: #fff; }
body.dj-page-lab .dj-nav__list a:hover,
body.dj-page-lab .dj-nav__list .current-menu-item > a {
  color: var(--lab-red);
}
body.dj-page-lab .dj-nav__list > li > a::after { background: var(--lab-red); }

/* "Ofertas" ya es roja de por sí — sigue leyéndose sobre negro. Su
   único problema es el hover, pensado para fondo blanco (pasaba a
   negro y se volvía invisible aquí). */
body.dj-page-lab .dj-nav__ofertas:hover { color: #fff !important; }

body.dj-page-lab .dj-action-btn { color: #fff; }
body.dj-page-lab .dj-action-btn:hover {
  background: rgba(255, 255, 255, .1);
  color: var(--lab-red);
}

body.dj-page-lab .dj-hamburger span { background: #fff; }

body.dj-page-lab .dj-header--scrolled .dj-header__main {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}


/* ---------------------------------------------------------
   2. LA "CULEBRILLA" LÁSER — compartida entre widgets
   --------------------------------------------------------- */
.dj-lab-culebrilla {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 34px;
  pointer-events: none;
  z-index: 3;
}
.dj-lab-culebrilla path {
  fill: none;
  stroke: var(--lab-red);
  stroke-width: 3;
  stroke-linecap: round;
  /* Más capas de resplandor y un poco más rápida — se pidió que se
     sienta más dinámica, no solo una línea fina prendiéndose. */
  filter: drop-shadow(0 0 5px var(--lab-red)) drop-shadow(0 0 14px rgba(229, 40, 34, .65)) drop-shadow(0 0 26px rgba(229, 40, 34, .4));
  stroke-dasharray: 36 260;
  animation: dj-lab-laser 2.6s linear infinite;
}
@keyframes dj-lab-laser {
  to { stroke-dashoffset: -296; }
}
/* Chispitas que recorren la misma curva — el efecto de "partículas"
   pedido: 3 puntitos de luz roja que van y vienen por la línea, cada
   uno arrancando en un momento distinto para que nunca se vean
   sincronizados ni se sientan como un solo elemento repetido. */
.dj-lab-culebrilla__spark {
  /* Casi imperceptible a propósito: un puntito muy tenue, no una
     bolita que llame la atención. */
  fill: var(--lab-red);
  filter: drop-shadow(0 0 1.5px rgba(229, 40, 34, .8));
  offset-path: path('M0,30 C50,0 100,60 150,30 S250,0 300,30 S400,60 450,30 S550,0 600,30');
  offset-rotate: 0deg;
  animation: dj-lab-spark 3.2s linear infinite;
}
.dj-lab-culebrilla__spark:nth-of-type(2) { animation-delay: -1.07s; }
.dj-lab-culebrilla__spark:nth-of-type(3) { animation-delay: -2.13s; }
@keyframes dj-lab-spark {
  0%   { offset-distance: 0%; opacity: 0; }
  6%   { opacity: .22; }
  94%  { opacity: .22; }
  100% { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dj-lab-culebrilla path { animation: none; stroke-dasharray: none; }
  .dj-lab-culebrilla__spark { animation: none; opacity: 0; }
}


/* ---------------------------------------------------------
   2.1 CULEBRILLA LÁSER EN HOVER + FUEGO SUTIL — tarjetas, paneles,
       técnicas y fotos de la galería.
   -----------------------------------------------------------
   Al pasar el mouse, un aro de luz roja "recorre" el borde de la
   tarjeta (::before, con un conic-gradient que gira) — la misma idea
   de la culebrilla láser del resto de la página, pero rodeando la
   tarjeta en vez de una sola línea. Además, todas las tarjetas y
   fotos llevan un resplandor cálido sutil tipo brasa en la base
   (::after), que respira todo el tiempo y se intensifica un poco al
   pasar el mouse — un efecto de "fuego" discreto, no una llama
   literal. Se apunta directo a las clases de cada tarjeta/foto para
   que funcione en las 4 secciones sin tocar el PHP de cada widget. */
@property --dj-lab-glow-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.dj-lab-card,
.dj-lab-panel,
.dj-lab-tec-card,
.dj-lab-gal-item {
  --dj-lab-glow-angle: 0deg;
}

.dj-lab-card::before,
.dj-lab-panel::before,
.dj-lab-tec-card::before,
.dj-lab-gal-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  padding: 4px;
  background: conic-gradient(from var(--dj-lab-glow-angle),
    transparent 0deg, transparent 235deg,
    #ff8a80 290deg,
    var(--lab-red) 330deg,
    rgba(229, 40, 34, 0) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  /* El halo de verdad: sin esto el aro se ve como una simple línea de
     color; con el drop-shadow se ve como neón encendido, y se nota
     igual de bien sobre foto oscura que sobre tarjeta blanca (Técnicas),
     porque el resplandor no depende de lo que tenga detrás. Reforzado
     a pedido — que se note bien marcado, no sutil. */
  filter: drop-shadow(0 0 5px var(--lab-red)) drop-shadow(0 0 16px rgba(229, 40, 34, .85)) drop-shadow(0 0 30px rgba(229, 40, 34, .55));
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  animation: dj-lab-glow-spin 1.9s linear infinite;
}
.dj-lab-card:hover::before,
.dj-lab-panel:hover::before,
.dj-lab-tec-card:hover::before,
.dj-lab-gal-item:hover::before {
  /* Bajado a la mitad — se pidió menos marcado que la versión anterior. */
  opacity: .5;
}
@keyframes dj-lab-glow-spin {
  to { --dj-lab-glow-angle: 360deg; }
}
/* CELULAR: no hay ":hover" real al tocar con el dedo, así que estos
   efectos (culebrilla neón + fuego) se dejan siempre encendidos —
   más suaves que al pasar el mouse en computadora, pero visibles —
   para que en el teléfono también se vea que la página "vive". */
@media (hover: none) {
  .dj-lab-card::before,
  .dj-lab-panel::before,
  .dj-lab-tec-card::before,
  .dj-lab-gal-item::before {
    opacity: .38;
  }
}

.dj-lab-card::after,
.dj-lab-panel::after,
.dj-lab-tec-card::after,
.dj-lab-gal-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(62% 50% at 50% 100%,
    rgba(255, 106, 0, .62) 0%,
    rgba(229, 40, 34, .34) 45%,
    transparent 78%);
  /* Todas las opacidades de este "fuego" bajadas a la mitad — el
     efecto anterior se sintió demasiado marcado. */
  opacity: .15;
  animation: dj-lab-fuego 3.4s ease-in-out infinite;
}
.dj-lab-card:hover::after,
.dj-lab-panel:hover::after,
.dj-lab-tec-card:hover::after,
.dj-lab-gal-item:hover::after {
  opacity: .35;
}
@media (hover: none) {
  .dj-lab-card::after,
  .dj-lab-panel::after,
  .dj-lab-tec-card::after,
  .dj-lab-gal-item::after {
    opacity: .25;
  }
}
@keyframes dj-lab-fuego {
  0%, 100% { opacity: .11; transform: scale(1); }
  35%      { opacity: .2;  transform: scale(1.05); }
  62%      { opacity: .13; transform: scale(.98); }
  82%      { opacity: .18; transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .dj-lab-card::before, .dj-lab-panel::before, .dj-lab-tec-card::before, .dj-lab-gal-item::before,
  .dj-lab-card::after,  .dj-lab-panel::after,  .dj-lab-tec-card::after,  .dj-lab-gal-item::after {
    animation: none;
  }
  .dj-lab-card::after, .dj-lab-panel::after, .dj-lab-tec-card::after, .dj-lab-gal-item::after {
    opacity: .11;
  }
}


/* ---------------------------------------------------------
   3. HERO (widget "The Lab — Hero")
   --------------------------------------------------------- */
.dj-lab-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: #0b0b0c;
  /* A TODO EL ANCHO SIEMPRE, sea imagen o Slider Revolution: se saca
     del "max-width" de la columna/sección de Elementor que lo
     contenga (aunque esa sección esté configurada como "Boxed") con
     el truco clásico de ancho-completo, así nunca se ve el borde
     blanco a los lados. La proporción 16:6 del boceto queda fija acá
     mismo, no como opción — por eso ya no existe "Alto" en el panel
     de Elementor de este widget. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  aspect-ratio: 16 / 6;
  min-height: 260px;
}

.dj-lab-hero__rs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Slider Revolution mete su propio wrapper adentro con su propio
   alto — se fuerza a llenar esta caja de proporción fija en vez de
   dejar que imponga el suyo (si el diseño del slider en su plugin
   usa "Auto Height", esto es lo que evita que la caja "salte" de
   tamaño al cargar). */
.dj-lab-hero__rs > div,
.dj-lab-hero__rs .rev_slider_wrapper,
.dj-lab-hero__rs .rev_slider {
  width: 100% !important;
  height: 100% !important;
}

.dj-lab-hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--dj-lab-bg, none);
  background-size: cover;
  background-position: center;
  /* Más margen de sobra que antes (1.06 → 1.12): así el parallax de
     scroll tiene más recorrido real para moverse y se nota más el
     efecto de profundidad, sin riesgo de que asome un borde vacío —
     el recorrido siempre se mide y se limita a lo que sobra de foto. */
  transform: scale(1.12);
  will-change: transform;
}
.dj-lab-hero__bg:not(.has-src) {
  background: linear-gradient(135deg, #0b0b0c 0%, #1a1a1c 55%, #241012 100%);
}
.dj-lab-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .38) 48%, rgba(0, 0, 0, .55) 100%);
}

/* -----------------------------------------------------------
   3.1 DETALLES FINOS DEL ENCABEZADO — sutiles, aparte del láser
   -----------------------------------------------------------
   Tres capas decorativas que suman "vida" sin robarle protagonismo
   a la foto/slider ni al texto:
     · marco   → esquinas tipo visor, en rojo, muy tenues, que
                 respiran despacio.
     · barrido → una luz ancha y diagonal que cruza el encabezado
                 cada tantos segundos, casi imperceptible.
     · brasas  → 6 puntitos cálidos que suben flotando, cada uno con
                 su propio ritmo y desvío, como ceniza encendida.
   Todo con pointer-events:none, así el slider se sigue pudiendo
   arrastrar/clickear normalmente por debajo. */
.dj-lab-hero__detalles {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.dj-lab-hero__marco {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(229, 40, 34, .34);
  /* Solo las 4 esquinas: el degradado de máscara borra el centro de
     cada lado y deja nada más los rincones, como el visor de una
     cámara. Se ve fino y caro sin encerrar la foto en un cuadro. */
  -webkit-mask:
    linear-gradient(to right, #000 0 68px, transparent 68px calc(100% - 68px), #000 calc(100% - 68px) 100%),
    linear-gradient(to bottom, #000 0 46px, transparent 46px calc(100% - 46px), #000 calc(100% - 46px) 100%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to right, #000 0 68px, transparent 68px calc(100% - 68px), #000 calc(100% - 68px) 100%),
    linear-gradient(to bottom, #000 0 46px, transparent 46px calc(100% - 46px), #000 calc(100% - 46px) 100%);
  mask-composite: intersect;
  animation: dj-lab-marco 6s ease-in-out infinite;
}
@keyframes dj-lab-marco {
  0%, 100% { opacity: .5; }
  50%      { opacity: .95; }
}

.dj-lab-hero__barrido {
  position: absolute;
  top: -60%;
  left: -35%;
  width: 45%;
  height: 220%;
  transform: rotate(14deg);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, .05) 45%,
    rgba(255, 255, 255, .09) 50%,
    rgba(255, 255, 255, .05) 55%,
    transparent 100%);
  filter: blur(6px);
  animation: dj-lab-barrido 9s ease-in-out infinite;
}
@keyframes dj-lab-barrido {
  0%, 62%  { transform: translateX(0) rotate(14deg); opacity: 0; }
  68%      { opacity: 1; }
  92%      { opacity: 1; }
  100%     { transform: translateX(320%) rotate(14deg); opacity: 0; }
}

.dj-lab-hero__brasa {
  position: absolute;
  bottom: -12px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 140, 80, .9);
  box-shadow: 0 0 6px rgba(229, 40, 34, .8);
  opacity: 0;
  animation: dj-lab-brasa 11s linear infinite;
}
.dj-lab-hero__brasa:nth-of-type(1) { left: 12%; animation-delay: 0s;    animation-duration: 12s; }
.dj-lab-hero__brasa:nth-of-type(2) { left: 27%; animation-delay: -3.5s; animation-duration: 10s; }
.dj-lab-hero__brasa:nth-of-type(3) { left: 44%; animation-delay: -6s;   animation-duration: 13s; }
.dj-lab-hero__brasa:nth-of-type(4) { left: 61%; animation-delay: -1.8s; animation-duration: 11s; }
.dj-lab-hero__brasa:nth-of-type(5) { left: 78%; animation-delay: -8s;   animation-duration: 14s; }
.dj-lab-hero__brasa:nth-of-type(6) { left: 91%; animation-delay: -4.6s; animation-duration: 12.5s; }
@keyframes dj-lab-brasa {
  0%   { transform: translate(0, 0) scale(.8); opacity: 0; }
  12%  { opacity: .55; }
  50%  { transform: translate(14px, -46vh) scale(1); opacity: .4; }
  85%  { opacity: .18; }
  100% { transform: translate(-8px, -95vh) scale(.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dj-lab-hero__marco   { animation: none; opacity: .6; }
  .dj-lab-hero__barrido { animation: none; opacity: 0; }
  .dj-lab-hero__brasa   { animation: none; opacity: 0; }
}
/* En celular las brasas y el marco se achican para no estorbar. */
@media (max-width: 700px) {
  .dj-lab-hero__marco { inset: 10px; }
  .dj-lab-hero__brasa:nth-of-type(5),
  .dj-lab-hero__brasa:nth-of-type(6) { display: none; }
}

.dj-lab-hero__aviso,
.dj-lab-hero__hint {
  position: relative;
  z-index: 4;
  margin: 16px auto 0;
  max-width: 640px;
  padding: 14px 18px;
  background: #fff3f2;
  border: 1px solid var(--lab-red);
  border-radius: 8px;
  color: #7a1410;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .85rem;
  line-height: 1.5;
}

.dj-lab-hero__content {
  position: relative;
  z-index: 2;
  padding: 56px 20px 64px;
  max-width: 760px;
}

.dj-lab-hero__title {
  margin: 0 0 16px;
  font-family: var(--dj-font-display, 'Anton', sans-serif);
  text-transform: uppercase;
  line-height: .96;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
.dj-lab-hero__line {
  display: block;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  letter-spacing: .5px;
}
/* PALABRA BLANCA EN REGULAR, PALABRA ROJA EN NEGRITA — mismo tamaño,
   misma tipografía, solo distinto peso.
   -----------------------------------------------------------
   Por qué se veía al revés (la blanca más gruesa que la roja): los
   títulos son <h1>/<h2>/<h3>, y TODO navegador les pone negrita por
   defecto. Como Anton solo trae un peso real (400), esa negrita la
   "inventaba" el navegador (bold sintético) y engordaba la palabra
   BLANCA — justo lo contrario de lo pedido.
   La solución: forzar los títulos a peso 400 de verdad (así la
   palabra blanca queda en regular real, sin negrita inventada) y
   engordar SOLO la palabra roja con capas de text-shadow pegadas al
   borde de la letra. El text-shadow nunca cambia el tamaño ni la
   métrica del texto, así que las dos palabras miden exactamente lo
   mismo — lo único que cambia es el grosor del trazo. */
.dj-lab-hero__title,
.dj-lab-tarjetas__title,
.dj-lab-panel__title,
.dj-lab-tecnicas__title,
.dj-lab-galeria__title,
.dj-lab-pasos__title {
  font-weight: 400;
}

.dj-lab-hero__line--accent,
.dj-lab-tarjetas__accent,
.dj-lab-panel__title-accent,
.dj-lab-tecnicas__accent,
.dj-lab-galeria__accent,
.dj-lab-pasos__accent {
  font-weight: 400;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, .6),
    .8px 0 currentColor,
    -.8px 0 currentColor,
    0 .8px currentColor,
    0 -.8px currentColor,
    .6px .6px currentColor,
    -.6px -.6px currentColor,
    .6px -.6px currentColor,
    -.6px .6px currentColor;
}

.dj-lab-hero__line--accent { color: var(--lab-red); }

.dj-lab-hero__sub {
  margin: 0 0 28px;
  max-width: 52ch;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: clamp(.95rem, 1.6vw, 1.1rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}

.dj-lab-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 12px;
  background: var(--lab-red);
  color: #fff;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .82rem;
  font-weight: var(--dj-weight-bold, 700);
  letter-spacing: .8px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.dj-lab-btn:hover {
  background: #c01f1a;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(229, 40, 34, .35);
  color: #fff;
}
/* Sensación "táctil" al tocar en celular — sin :hover, este es el
   único aviso de que el botón respondió al toque. */
.dj-lab-btn:active {
  transform: scale(.96);
  background: #c01f1a;
}

@media (max-width: 600px) {
  .dj-lab-hero__content { padding: 40px 16px 48px; }
}


/* ---------------------------------------------------------
   4. "¿QUÉ QUIERES PERSONALIZAR?" (widget "The Lab — Tarjetas")
   -----------------------------------------------------------
   4 tarjetas altas y angostas (proporción ~9:16 en el boceto), cada
   una con foto de fondo, velo oscuro para que el texto blanco se lea
   siempre, y el mismo parallax "de sobra" (scale > 1) que el resto de
   la página. En pantallas angostas bajan a 2 columnas y, en móvil, a 1.
   --------------------------------------------------------- */
.dj-lab-tarjetas {
  position: relative;
  padding: 72px 0;
  background: #fff;
  overflow: hidden;
}

.dj-lab-tarjetas__head {
  text-align: center;
  margin: 0 0 40px;
}
.dj-lab-tarjetas__title {
  margin: 0;
  font-family: var(--dj-font-display, 'Anton', sans-serif);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .5px;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  color: #111;
}
.dj-lab-tarjetas__title span { display: inline; }
.dj-lab-tarjetas__accent { color: var(--lab-red); }

.dj-lab-tarjetas__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.dj-lab-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  /* Antes 9/16 (muy angosta) — más ancha para que se vea menos
     "flaca" y más cómoda de leer. */
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  background: #111;
  isolation: isolate;
  /* Misma sombra "elevada" que ya tenían las tarjetas de Técnicas —
     así todas las tarjetas de la página se sienten parte de un mismo
     sistema, no piezas sueltas cada una a su aire. */
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
  transition: transform .3s ease, box-shadow .3s ease;
}
.dj-lab-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 22px 46px rgba(0, 0, 0, .4);
}

.dj-lab-card__bg {
  position: absolute;
  inset: 0;
  background-image: var(--dj-lab-bg, none);
  background-size: cover;
  background-position: center;
  /* Más margen de sobra (1.1 → 1.16) para que el parallax de scroll se
     note más — se pidió un efecto de profundidad más marcado en las
     fotos, no solo en el hover. */
  transform: scale(1.16);
  transition: transform .5s ease;
  will-change: transform;
}
.dj-lab-card__bg:not(.has-src) {
  background: linear-gradient(160deg, #1a1a1c 0%, #2a1416 100%);
}
.dj-lab-card:hover .dj-lab-card__bg { transform: scale(1.24); }

.dj-lab-card__veil {
  position: absolute;
  inset: 0;
  /* El texto (título/frase/descripción) va arriba de la tarjeta, así
     que el velo oscuro se concentra ahí para que se lea bien, y se
     aclara rápido hacia el resto de la tarjeta — así la foto se sigue
     viendo en vez de quedar tapada de arriba a abajo. */
  background: linear-gradient(180deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .58) 28%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .04) 66%, transparent 100%);
}
/* "Brillo" que recorre la tarjeta al pasar el mouse (o siempre
   encendido, más lento, en celular) — un destello diagonal, como el
   de una superficie pulida, para que el efecto se sienta más vistoso
   sin tapar la foto ni el texto. */
.dj-lab-card__veil::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .16) 48%, rgba(255, 255, 255, .32) 51%, rgba(255, 255, 255, .16) 54%, transparent 64%);
  background-size: 250% 250%;
  background-position: -60% -60%;
  transition: background-position .8s ease;
  pointer-events: none;
}
.dj-lab-card:hover .dj-lab-card__veil::before {
  background-position: 160% 160%;
}
@media (hover: none) {
  .dj-lab-card__veil::before {
    animation: dj-lab-shine 5s ease-in-out infinite;
  }
}
@keyframes dj-lab-shine {
  0%, 20% { background-position: -60% -60%; }
  60%, 100% { background-position: 160% 160%; }
}

.dj-lab-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 20px 26px;
  color: #fff;
}
/* SIMETRÍA REAL: cada línea de texto (título, frase, descripción,
   categorías) tiene su propia altura RESERVADA (min-height) y un
   límite de líneas (line-clamp) — así el título, por ejemplo, ocupa
   siempre el mismo espacio tenga una palabra o dos, sin importar cuál
   de las 4 tarjetas sea. El título y la frase quedan arriba, siempre
   en el mismo punto de partida en las 4 tarjetas, y el botón se
   empuja solo hasta el fondo — como todo lo de arriba mide siempre lo
   mismo, el botón también termina siempre en el mismo punto. */
.dj-lab-card__body .dj-lab-btn {
  margin-top: auto;
  align-self: flex-start;
}

.dj-lab-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 3.15rem;
  margin: 0 0 6px;
  font-family: var(--dj-font-display, 'Anton', sans-serif);
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 1.5rem;
  line-height: 1.05;
  color: #fff;
  /* Sombra oscura detrás de la letra: se lee igual de bien sin
     importar qué tan clara sea la foto justo ahí atrás. */
  text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}
.dj-lab-card__frase {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  min-height: 1.3rem;
  margin: 0 0 10px;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .88rem;
  line-height: 1.3rem;
  font-weight: var(--dj-weight-bold, 700);
  color: var(--lab-red);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.dj-lab-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.46rem;
  margin: 0 0 12px;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .82rem;
  font-weight: var(--dj-weight-medium, 500);
  line-height: 1.23rem;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}
.dj-lab-card__tags {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  min-height: 1.15rem;
  margin: 0 0 2px;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .7rem;
  font-weight: var(--dj-weight-semibold, 600);
  letter-spacing: .3px;
  line-height: 1.15rem;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.dj-lab-card__tags--sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  min-height: 1.15rem;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .68);
}

.dj-lab-btn--sm {
  padding: 11px 18px;
  border-radius: 9px;
  font-size: .72rem;
}

@media (max-width: 1024px) {
  .dj-lab-tarjetas__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dj-lab-tarjetas { padding: 52px 0; }
  .dj-lab-tarjetas__grid { grid-template-columns: 1fr; gap: 16px; }
  .dj-lab-card { min-height: 340px; aspect-ratio: auto; }
}


/* ---------------------------------------------------------
   5. "PANEL DESTACADO" (widget "The Lab — Panel Destacado")
   -----------------------------------------------------------
   Los dos cuadros grandes del boceto (secciones 03/04: "Personaliza
   tu deporte" y "Trofeos y reconocimientos") son el MISMO widget,
   colocado dos veces dentro de una fila de Elementor a 2 columnas —
   por eso este widget, solo, ya se ve completo como un cuadrado y no
   asume que hay un "compañero" al lado.
   --------------------------------------------------------- */
.dj-lab-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: #111;
  isolation: isolate;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
  transition: transform .3s ease, box-shadow .3s ease;
}
.dj-lab-panel:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 22px 46px rgba(0, 0, 0, .4);
}

/* Los dos "Panel Destacado" van uno al lado del otro dentro de una
   fila de Elementor (Flexbox) — acá se fuerza a que se repartan el
   ancho exactamente igual (mitad y mitad, no según su contenido) y se
   les separa con un margen entre sí, sin depender del "Huecos" que se
   configure a mano en esa fila. Se apunta a la clase que Elementor le
   pone SIEMPRE al contenedor del widget según su tipo
   ("elementor-widget-dj_lab_panel"), así el arreglo sigue funcionando
   sin importar en qué fila/Contenedor se coloquen los paneles. */
.elementor-widget-dj_lab_panel {
  flex: 1 1 0;
  min-width: 0;
}
.elementor-widget-dj_lab_panel + .elementor-widget-dj_lab_panel {
  margin-left: 24px;
}
@media (max-width: 767px) {
  /* v9.9.6 — En celular, la fila de Elementor que trae los 2 paneles
     NO estaba apilando a columna sola (dependía de un ajuste de
     "Dirección" del Contenedor en Elementor que no quedó puesto así);
     el resultado eran los 2 paneles apretados lado a lado en un
     celular normal, con el título partiéndose letra por letra
     ("PERSONALI" / "ZA TU..."). Esto lo fuerza siempre, sin depender
     de ese ajuste ni de una clase estable del Contenedor (Elementor le
     pone una clase distinta cada vez): se agarra el PADRE de los 2
     paneles con :has(), buscando ese patrón exacto (dos paneles uno
     al lado del otro) y se le pone dirección columna a la fuerza. */
  *:has(> .elementor-widget-dj_lab_panel + .elementor-widget-dj_lab_panel) {
    flex-direction: column !important;
  }
  .elementor-widget-dj_lab_panel {
    width: 100%;
  }
  /* Si en pantallas chicas la fila pasa a apilarse en columna, la
     separación debe ser arriba, no al lado — 16px, la misma
     separación que usan las tarjetas y las técnicas en celular, para
     que todo respire con el mismo ritmo en vez de sentirse cada
     sección "a su aire". */
  .elementor-widget-dj_lab_panel + .elementor-widget-dj_lab_panel {
    margin-left: 0;
    margin-top: 16px;
  }
}

.dj-lab-panel__bg {
  position: absolute;
  inset: 0;
  background-image: var(--dj-lab-bg, none);
  background-size: cover;
  background-position: center;
  /* Más margen de sobra (1.1 → 1.16), mismo motivo que en las
     tarjetas: más recorrido real para que el parallax de scroll se
     note. */
  transform: scale(1.16);
  transition: transform .6s ease;
  will-change: transform;
}
.dj-lab-panel__bg:not(.has-src) {
  background: linear-gradient(150deg, #1a1a1c 0%, #2a1416 100%);
}
.dj-lab-panel:hover .dj-lab-panel__bg { transform: scale(1.22); }

.dj-lab-panel__veil {
  position: absolute;
  inset: 0;
  /* Mismo criterio que en las tarjetas: la etiqueta/título/descripción
     quedan arriba, así que el velo oscuro se concentra ahí y se
     aclara hacia abajo, para que la foto del panel se siga viendo. */
  background: linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 30%, rgba(0, 0, 0, .16) 55%, rgba(0, 0, 0, .03) 72%, transparent 100%);
}
.dj-lab-panel__veil::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .16) 48%, rgba(255, 255, 255, .32) 51%, rgba(255, 255, 255, .16) 54%, transparent 64%);
  background-size: 250% 250%;
  background-position: -60% -60%;
  transition: background-position .8s ease;
  pointer-events: none;
}
.dj-lab-panel:hover .dj-lab-panel__veil::before {
  background-position: 160% 160%;
}
@media (hover: none) {
  .dj-lab-panel__veil::before {
    animation: dj-lab-shine 5s ease-in-out infinite;
  }
}

.dj-lab-panel__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 30px 32px 34px;
  color: #fff;
}
/* SIMETRÍA REAL, igual que en las tarjetas de arriba: la etiqueta, el
   título y la descripción tienen su propia altura reservada
   (min-height + line-clamp), así los dos paneles arrancan siempre en
   el mismo punto exacto, y el botón se empuja solo hasta el fondo —
   como todo mide siempre lo mismo, el botón también termina siempre
   en el mismo punto en los dos paneles. */
.dj-lab-panel__body .dj-lab-btn {
  margin-top: auto;
  align-self: flex-start;
}

.dj-lab-panel__kicker {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  min-height: 1.1rem;
  margin: 0 0 10px;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .72rem;
  font-weight: var(--dj-weight-bold, 700);
  letter-spacing: 1.6px;
  color: var(--lab-red);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.dj-lab-panel__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 4.4rem;
  margin: 0 0 12px;
  font-family: var(--dj-font-display, 'Anton', sans-serif);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: .4px;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}
/* La última palabra del título, en rojo — igual que en el resto de
   secciones de esta página (Técnicas, Galería, Pasos). */
.dj-lab-panel__title-accent { color: var(--lab-red); }
.dj-lab-panel__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  min-height: 4.65rem;
  margin: 0 0 20px;
  max-width: 42ch;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .88rem;
  font-weight: var(--dj-weight-medium, 500);
  line-height: 1.55;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}

@media (max-width: 1024px) {
  .dj-lab-panel__body { padding: 24px 24px 28px; }
}
@media (max-width: 560px) {
  .dj-lab-panel { aspect-ratio: 4 / 5; }
}


/* ---------------------------------------------------------
   6. "TÉCNICAS DE PERSONALIZACIÓN" (widget "The Lab — Técnicas")
   -----------------------------------------------------------
   Sección CLARA a propósito: después del Hero, las Tarjetas y los
   Paneles (los tres oscuros, con foto de fondo), una sección blanca
   con tarjetas de ícono le da un respiro a la página en vez de que
   todo se vea igual de negro de principio a fin.
   --------------------------------------------------------- */
.dj-lab-tecnicas {
  padding: 76px 0;
  background: #fafafa;
}

.dj-lab-tecnicas__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}
.dj-lab-tecnicas__title {
  margin: 0 0 12px;
  font-family: var(--dj-font-display, 'Anton', sans-serif);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .5px;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  color: #111;
}
.dj-lab-tecnicas__accent { color: var(--lab-red); }
.dj-lab-tecnicas__sub {
  margin: 0;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .95rem;
  line-height: 1.6;
  color: #555;
}

.dj-lab-tecnicas__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.dj-lab-tec-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 30px 24px;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .05);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.dj-lab-tec-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .1);
  border-color: rgba(229, 40, 34, .25);
}

/* Foto de fondo opcional detrás del texto (antes solo había un ícono
   chiquito) — la tarjeta pasa a modo "oscuro" solo cuando se sube una
   foto, para que el texto blanco se siga leyendo encima; si no hay
   foto, la tarjeta se queda igual que siempre (clara, con ícono). */
.dj-lab-tec-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--dj-lab-bg, none);
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  transition: transform .5s ease;
  will-change: transform;
}
.dj-lab-tec-card:hover .dj-lab-tec-card__bg { transform: scale(1.16); }
.dj-lab-tec-card__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Más clara que antes — que se note la foto detrás del texto, no
     solo un fondo oscuro casi sólido. */
  background: linear-gradient(200deg, rgba(10, 10, 11, .3) 0%, rgba(10, 10, 11, .62) 100%);
}
.dj-lab-tec-card.has-bg {
  background: #111;
  border-color: transparent;
}
.dj-lab-tec-card.has-bg .dj-lab-tec-card__title { color: #fff; }
.dj-lab-tec-card.has-bg .dj-lab-tec-card__desc { color: rgba(255, 255, 255, .82); }
.dj-lab-tec-card.has-bg .dj-lab-tec-card__icono { background: rgba(255, 255, 255, .14); }
.dj-lab-tec-card.has-bg .dj-lab-tec-card__icono svg { fill: #fff; }

.dj-lab-tec-card__icono {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: rgba(229, 40, 34, .08);
  flex-shrink: 0;
}
.dj-lab-tec-card__icono img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.dj-lab-tec-card__icono svg {
  width: 24px;
  height: 24px;
  fill: var(--lab-red);
}

.dj-lab-tec-card__title {
  position: relative;
  z-index: 2;
  margin: 0 0 10px;
  font-family: var(--dj-font-display, 'Anton', sans-serif);
  text-transform: uppercase;
  letter-spacing: .3px;
  font-size: 1.25rem;
  line-height: 1.05;
  color: #111;
}
.dj-lab-tec-card__desc {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .85rem;
  line-height: 1.55;
  color: #666;
}

@media (max-width: 1024px) {
  .dj-lab-tecnicas__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dj-lab-tecnicas { padding: 56px 0; }
  .dj-lab-tecnicas__grid { grid-template-columns: 1fr; gap: 16px; }
  .dj-lab-tec-card { aspect-ratio: auto; }
}


/* ---------------------------------------------------------
   7. "HECHO EN THE LAB" (widget "The Lab — Galería")
   -----------------------------------------------------------
   Vuelve al fondo oscuro (después del blanco de Técnicas), 8 fotos
   cuadradas en rejilla y la barra de Instagram debajo. Los cuadros
   sin foto todavía (mientras se suben) se ven como un placeholder
   discreto, no como un hueco roto.
   --------------------------------------------------------- */
.dj-lab-galeria {
  padding: 76px 0;
  background: #0b0b0c;
  /* A todo el ancho de la pantalla, igual que el Hero — se sale del
     "boxed" del Contenedor de Elementor que lo tenga adentro. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.dj-lab-galeria__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}
.dj-lab-galeria__title {
  margin: 0 0 12px;
  font-family: var(--dj-font-display, 'Anton', sans-serif);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .5px;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  color: #fff;
}
.dj-lab-galeria__accent { color: var(--lab-red); }
.dj-lab-galeria__sub {
  margin: 0;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
}

.dj-lab-galeria__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.dj-lab-gal-item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background-color: #1a1a1c;
  background-image: var(--dj-lab-bg, none);
  background-size: cover;
  background-position: center;
  transform: scale(1);
  -webkit-tap-highlight-color: transparent;
  transition: transform .4s ease;
}
.dj-lab-gal-item.has-src:hover { transform: scale(1.03); }
.dj-lab-gal-item.has-src:active { transform: scale(.97); }
.dj-lab-gal-item:not(.has-src) {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(150deg, #1a1a1c 0%, #232325 100%);
  border: 1px dashed rgba(255, 255, 255, .15);
}
.dj-lab-gal-item__icono {
  position: relative;
  z-index: 2;
  width: 26px;
  height: 26px;
  fill: rgba(255, 255, 255, .25);
}

.dj-lab-galeria__ig {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.dj-lab-galeria__ig-icono {
  display: flex;
  color: #fff;
}
.dj-lab-galeria__ig-usuario {
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-weight: var(--dj-weight-semibold, 600);
  font-size: .95rem;
  color: #fff;
}

@media (max-width: 1024px) {
  .dj-lab-galeria__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .dj-lab-galeria { padding: 56px 0; }
  .dj-lab-galeria__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}


/* ---------------------------------------------------------
   8. "ASÍ FUNCIONA" (widget "The Lab — Así funciona")
   -----------------------------------------------------------
   Clara otra vez (después del negro de la Galería): 4 pasos en fila,
   unidos por una línea punteada que pasa por detrás de cada círculo
   numerado. En móvil se apilan y la línea se acuesta a la izquierda.
   --------------------------------------------------------- */
.dj-lab-pasos {
  padding: 76px 0;
  background: #fff;
}

.dj-lab-pasos__head { text-align: center; margin: 0 0 52px; }
.dj-lab-pasos__title {
  margin: 0;
  font-family: var(--dj-font-display, 'Anton', sans-serif);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .5px;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  color: #111;
}
.dj-lab-pasos__accent { color: var(--lab-red); }

.dj-lab-pasos__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
/* La línea punteada que conecta los 4 círculos, de centro a centro.
   left/right al 12.5% dejan que empiece y termine en el centro de la
   primera y la última tarjeta (1/8 de 4 columnas = 12.5%). */
.dj-lab-pasos__linea::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 12.5%;
  right: 12.5%;
  border-top: 2px dashed rgba(229, 40, 34, .25);
  z-index: 0;
}

.dj-lab-paso {
  position: relative;
  z-index: 1;
  text-align: center;
}
.dj-lab-paso__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--lab-red);
  color: #fff;
  font-family: var(--dj-font-display, 'Anton', sans-serif);
  font-size: 1.1rem;
}
.dj-lab-paso__title {
  margin: 0 0 8px;
  font-family: var(--dj-font-display, 'Anton', sans-serif);
  text-transform: uppercase;
  letter-spacing: .3px;
  font-size: 1.1rem;
  line-height: 1.1;
  color: #111;
}
.dj-lab-paso__desc {
  margin: 0;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .85rem;
  line-height: 1.55;
  color: #666;
}

@media (max-width: 900px) {
  .dj-lab-pasos__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .dj-lab-pasos__linea::before { display: none; }
}
@media (max-width: 560px) {
  .dj-lab-pasos { padding: 56px 0; }
  .dj-lab-pasos__grid { grid-template-columns: 1fr; gap: 36px; }
}


/* ---------------------------------------------------------
   9. CIERRE: CTA FINAL + MINI-FOOTER "THE LAB"
   (widget "The Lab — Cierre")
   -----------------------------------------------------------
   La franja roja ancha de cierre (16:4 en el boceto) y, pegado justo
   debajo, el mini-footer oscuro de la sub-marca. El footer COMPLETO
   del sitio sigue viniendo después de esto — este bloque no lo
   reemplaza, solo cierra "The Lab" antes de llegar a él.
   --------------------------------------------------------- */
.dj-lab-cierre {
  /* Todo el cierre (franja roja + mini-footer) a todo el ancho de la
     pantalla, igual que el Hero y la Galería — sin esto se veía
     "encajonado" con borde blanco a los lados. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.dj-lab-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--lab-red) 0%, #a8241f 100%);
  padding: 56px 0;
}
/* Foto de fondo opcional (Contenido → Foto de fondo del CTA): se pone
   detrás de todo, con el mismo degradado rojo encima a modo de velo
   para que el texto blanco siga leyéndose igual de bien con o sin
   foto. Si no se sube ninguna, esta capa no se imprime y se ve el
   fondo rojo liso de siempre. */
.dj-lab-cta__bg {
  position: absolute;
  inset: 0;
  background-image: var(--dj-lab-cta-bg, none);
  background-size: cover;
  background-position: center;
}
.dj-lab-cta__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(229, 40, 34, .87) 0%, rgba(139, 29, 24, .87) 100%);
}
.dj-lab-cta__culebrilla { opacity: .5; filter: brightness(0) invert(1); }

.dj-lab-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.dj-lab-cta__title {
  margin: 0 0 6px;
  font-family: var(--dj-font-display, 'Anton', sans-serif);
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: .3px;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  color: #fff;
}
.dj-lab-cta__sub {
  margin: 0;
  max-width: 46ch;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
}
.dj-lab-cta__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  border-radius: 12px;
  background: #111;
  color: #fff;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .82rem;
  font-weight: var(--dj-weight-bold, 700);
  letter-spacing: .8px;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease;
}
.dj-lab-cta__btn:hover { background: #000; transform: translateY(-2px); color: #fff; }

.dj-lab-minifooter {
  background: #0b0b0c;
  padding: 26px 0;
}
.dj-lab-minifooter__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  text-align: center;
}
.dj-lab-minifooter__marca {
  font-family: var(--dj-font-display, 'Anton', sans-serif);
  letter-spacing: .5px;
  font-size: 1rem;
  color: #fff;
}
.dj-lab-minifooter__texto {
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .78rem;
  color: rgba(255, 255, 255, .55);
}
.dj-lab-minifooter__ig {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-family: var(--dj-font-body, 'Poppins', sans-serif);
  font-size: .82rem;
  font-weight: var(--dj-weight-semibold, 600);
  transition: color .25s ease;
}
.dj-lab-minifooter__ig:hover { color: var(--lab-red); }

@media (max-width: 700px) {
  .dj-lab-cta { padding: 44px 0; }
  .dj-lab-cta__inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .dj-lab-cta__btn { width: 100%; justify-content: center; }
}


/* ---------------------------------------------------------
   9. "LOADING" EN LAS FOTOS DE FONDO — sin cuadros negros
   -----------------------------------------------------------
   La página tiene fotos pesadas y en internet lento se notaba un
   cuadro negro sólido mientras cada foto todavía se estaba
   descargando. Acá se pone, DETRÁS de la foto (como una segunda capa
   de fondo — el navegador soporta varias imágenes de fondo apiladas
   con comas), un degradado animado tipo "shimmer" que se ve mientras
   la foto real no ha terminado de cargar. En cuanto la foto está
   lista, el navegador la pinta encima y el shimmer queda tapado —
   nunca hace falta JavaScript para "avisar" que ya cargó. Va al final
   del archivo a propósito, para que gane sobre las reglas de arriba
   que ya definían background-image/-size/-position para estas mismas
   clases. */
.dj-lab-hero__bg.has-src,
.dj-lab-card__bg.has-src,
.dj-lab-panel__bg.has-src,
.dj-lab-tec-card__bg,
.dj-lab-gal-item.has-src {
  background-image: var(--dj-lab-bg, none), linear-gradient(100deg, #18181b 30%, #26262a 50%, #18181b 70%);
  background-size: cover, 200% 100%;
  background-position: center, 0 0;
  background-repeat: no-repeat, no-repeat;
  animation: dj-lab-shimmer 1.6s ease-in-out infinite;
}
@keyframes dj-lab-shimmer {
  0%   { background-position: center, 0% 0; }
  100% { background-position: center, -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dj-lab-hero__bg.has-src,
  .dj-lab-card__bg.has-src,
  .dj-lab-panel__bg.has-src,
  .dj-lab-tec-card__bg,
  .dj-lab-gal-item.has-src {
    animation: none;
  }
}