.elementor-kit-4{--e-global-color-primary:#000000;--e-global-color-secondary:#323232;--e-global-color-text:#FFFFFF;--e-global-color-accent:#656565;--e-global-color-58be983:#ffffff;--e-global-color-09cc561:#FFFFFF;--e-global-color-a495fd4:#B8C0CC;--e-global-color-dff8941:#F8FCFA;--e-global-color-95b1b45:#B2B2B2;--e-global-color-df0bcd7:#B4B4B4;--e-global-color-a457ef7:#FFFFFFCF;--e-global-color-7358ba6:#FFFFFFB2;--e-global-typography-primary-font-family:"Inter Tight";--e-global-typography-primary-font-size:18px;--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"HelveticaNeue";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter Tight";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Helvetica";--e-global-typography-accent-font-weight:500;--e-global-typography-5535e8e-font-family:"HelveticaNeue";--e-global-typography-5535e8e-font-size:3rem;--e-global-typography-5535e8e-font-weight:700;--e-global-typography-c83476d-font-family:"HelveticaNeue";--e-global-typography-c83476d-font-size:2.5rem;--e-global-typography-c83476d-font-weight:bold;--e-global-typography-887fca2-font-family:"Inter Tight";--e-global-typography-887fca2-font-size:1rem;--e-global-typography-887fca2-font-weight:400;--e-global-typography-2142591-font-family:"Inter Tight";--e-global-typography-2142591-font-size:1rem;--e-global-typography-2142591-font-weight:700;--e-global-typography-6e52843-font-family:"HelveticaNeue";--e-global-typography-6e52843-font-size:1rem;--e-global-typography-6e52843-font-weight:500;background-color:#000000;color:#FFFFFF;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a{color:#FFFFFF;}.elementor-kit-4 a:hover{color:var( --e-global-color-a495fd4 );}.elementor-kit-4 h1{color:#FFFFFF;font-family:"HelveticaNeue", Sans-serif;font-size:40px;font-weight:300;text-transform:uppercase;line-height:38px;}.elementor-kit-4 h2{color:#FFFFFF;font-family:"HelveticaNeue", Sans-serif;font-size:40px;font-weight:300;}.elementor-kit-4 h3{color:#FFFFFF;font-family:"HelveticaNeue", Sans-serif;font-size:32px;font-weight:400;line-height:34px;}.elementor-kit-4 h4{color:#FFFFFF;}.elementor-kit-4 h5{color:#FFFFFF;}.elementor-kit-4 h6{color:#FFFFFF;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:90%;}.e-con{--container-max-width:90%;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}.entry-title, .wp-block-post-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-4 h2{font-size:40px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-4{--e-global-typography-c83476d-font-size:1.9rem;}.elementor-kit-4 h2{font-size:36px;line-height:32px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.bolder-text{
    color:#ffffff;
    font-weight: 500;
}
.p-bolder {
    color:#ffffff;
    font-weight: 400;
}
/* ========================================
   Reusable button wrapper
======================================== */
.ui-btn {
  width: 100%;
}

/* ========================================
   Figma metallic pill button
======================================== */
.ui-btn--figma-metal .elementor-button,
.ui-btn--figma-metal a,
.ui-btn--figma-metal button {
  --metal-light: #b6b6b6;
  --metal-dark: #666666;
  --text-color: #f3f3f3;
  --border-soft: rgba(224, 224, 224, 0.3);
  --border-strong: rgba(224, 224, 224, 1);
  --border-end: rgba(224, 224, 224, 0.2);
  --shadow-color: rgba(255, 255, 255, 0.1);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 18px 32px;
  border: 0.8px solid transparent !important;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none !important;
  text-align: center;
  text-transform: uppercase;
  color: var(--text-color) !important;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease,
    background 0.25s ease;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.08) 16%,
      rgba(255, 255, 255, 0.02) 38%,
      rgba(0, 0, 0, 0.06) 100%
    ) padding-box,
    linear-gradient(
      90deg,
      var(--metal-light) 0%,
      var(--metal-dark) 25%,
      var(--metal-dark) 78%,
      var(--metal-light) 100%
    ) padding-box,
    linear-gradient(
      90deg,
      var(--border-soft) 0%,
      var(--border-strong) 48%,
      var(--border-end) 100%
    ) border-box !important;

  box-shadow:
    0 4px 40px var(--shadow-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -8px 14px rgba(0, 0, 0, 0.08) !important;

  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* ========================================
   Inner glossy layer
======================================== */
.ui-btn--figma-metal .elementor-button::before,
.ui-btn--figma-metal a::before,
.ui-btn--figma-metal button::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.26) 0%,
      rgba(255, 255, 255, 0.12) 18%,
      rgba(255, 255, 255, 0.02) 40%,
      rgba(255, 255, 255, 0) 52%,
      rgba(0, 0, 0, 0.05) 100%
    );
}

/* ========================================
   Moving sheen effect
======================================== */
.ui-btn--figma-metal .elementor-button::after,
.ui-btn--figma-metal a::after,
.ui-btn--figma-metal button::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -42%;
  width: 26%;
  height: 170%;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  transform: skewX(-18deg);
  filter: blur(12px);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.24) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transition:
    left 0.7s ease,
    opacity 0.25s ease;
}

/* ========================================
   Content above visual layers
======================================== */
.ui-btn--figma-metal .elementor-button-text,
.ui-btn--figma-metal .elementor-button-icon,
.ui-btn--figma-metal .ui-btn__text,
.ui-btn--figma-metal .ui-btn__icon {
  position: relative;
  z-index: 2;
}

/* ========================================
   Icon sizing
======================================== */
.ui-btn--figma-metal .elementor-button-icon,
.ui-btn--figma-metal .ui-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ui-btn--figma-metal svg,
.ui-btn--figma-metal i {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  transition: transform 0.25s ease;
}

/* ========================================
   Hover state
======================================== */
.ui-btn--figma-metal .elementor-button:hover,
.ui-btn--figma-metal a:hover,
.ui-btn--figma-metal button:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow:
    0 8px 44px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -8px 14px rgba(0, 0, 0, 0.08) !important;
}

.ui-btn--figma-metal .elementor-button:hover::after,
.ui-btn--figma-metal a:hover::after,
.ui-btn--figma-metal button:hover::after {
  left: 112%;
}

.ui-btn--figma-metal .elementor-button:hover svg,
.ui-btn--figma-metal a:hover svg,
.ui-btn--figma-metal button:hover svg,
.ui-btn--figma-metal .elementor-button:hover i,
.ui-btn--figma-metal a:hover i,
.ui-btn--figma-metal button:hover i {
  transform: translateX(2px) translateY(-1px);
}

/* ========================================
   Active state
======================================== */
.ui-btn--figma-metal .elementor-button:active,
.ui-btn--figma-metal a:active,
.ui-btn--figma-metal button:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

/* ========================================
   Focus state
======================================== */
.ui-btn--figma-metal .elementor-button:focus-visible,
.ui-btn--figma-metal a:focus-visible,
.ui-btn--figma-metal button:focus-visible {
  outline: none;
  box-shadow:
    0 4px 40px rgba(255, 255, 255, 0.1),
    0 0 0 3px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* ========================================
   Elementor alignment fix
======================================== */
.ui-btn--figma-metal .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* ========================================
   Tablet
======================================== */
@media (max-width: 1024px) {
  .ui-btn--figma-metal .elementor-button,
  .ui-btn--figma-metal a,
  .ui-btn--figma-metal button {
    min-height: 58px;
    padding: 16px 24px;
    font-size: 18px;
    gap: 10px;
  }

  .ui-btn--figma-metal svg,
  .ui-btn--figma-metal i {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .ui-btn--figma-metal .elementor-button-content-wrapper {
    gap: 10px;
  }
}

/* ========================================
   Mobile
======================================== */
@media (max-width: 767px) {
  .ui-btn--figma-metal .elementor-button,
  .ui-btn--figma-metal a,
  .ui-btn--figma-metal button {
    min-height: 52px;
    padding: 14px 18px;
    font-size: 15px;
    gap: 8px;
  }

  .ui-btn--figma-metal svg,
  .ui-btn--figma-metal i {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .ui-btn--figma-metal .elementor-button-content-wrapper {
    gap: 8px;
  }
}
/* ========================================
   Reusable wrapper
======================================== */
.ui-btn {
  width: 100%;
}

/* ========================================
   Dark outlined Figma button
======================================== */
.ui-btn--figma-dark-outline .elementor-widget-container,
.ui-btn--figma-dark-outline .elementor-button-wrapper {
  width: 100%;
}

.ui-btn--figma-dark-outline .elementor-button,
.ui-btn--figma-dark-outline .elementor-button-link,
.ui-btn--figma-dark-outline a.elementor-button {
  --btn-fill-edge: #0e0e0e;
  --btn-fill-center: #0a0a0a;
  --btn-text: #f3f3f3;
  --btn-stroke-start: rgba(224, 224, 224, 0.30);
  --btn-stroke-mid: rgba(224, 224, 224, 1);
  --btn-stroke-end: rgba(224, 224, 224, 0.20);

  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100% !important;
  min-height: 64px;
  padding: 18px 30px !important;
  border: 0.8px solid transparent !important;
  border-radius: 999px !important;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none !important;
  text-align: center;
  text-transform: uppercase !important;
  color: var(--btn-text) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    filter 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 18%,
      rgba(255, 255, 255, 0) 45%,
      rgba(0, 0, 0, 0.18) 100%
    ) padding-box,
    linear-gradient(
      90deg,
      var(--btn-fill-edge) 0%,
      var(--btn-fill-center) 25%,
      var(--btn-fill-center) 78%,
      var(--btn-fill-edge) 100%
    ) padding-box,
    linear-gradient(
      90deg,
      var(--btn-stroke-start) 0%,
      var(--btn-stroke-mid) 48%,
      var(--btn-stroke-end) 100%
    ) border-box !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -8px 12px rgba(0, 0, 0, 0.18) !important;

  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}

/* ========================================
   Inner surface highlight
======================================== */
.ui-btn--figma-dark-outline .elementor-button::before,
.ui-btn--figma-dark-outline .elementor-button-link::before,
.ui-btn--figma-dark-outline a.elementor-button::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 16%,
      rgba(255, 255, 255, 0) 42%,
      rgba(0, 0, 0, 0.10) 100%
    );
}

/* ========================================
   Soft sheen effect
======================================== */
.ui-btn--figma-dark-outline .elementor-button::after,
.ui-btn--figma-dark-outline .elementor-button-link::after,
.ui-btn--figma-dark-outline a.elementor-button::after {
  content: "";
  position: absolute;
  top: -35%;
  left: -48%;
  width: 28%;
  height: 170%;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.14;
  transform: skewX(-20deg);
  filter: blur(12px);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transition:
    left 0.7s ease,
    opacity 0.25s ease;
}

/* ========================================
   Keep content above layers
======================================== */
.ui-btn--figma-dark-outline .elementor-button-content-wrapper,
.ui-btn--figma-dark-outline .elementor-button-text,
.ui-btn--figma-dark-outline .elementor-button-icon {
  position: relative;
  z-index: 2;
}

.ui-btn--figma-dark-outline .elementor-button-content-wrapper {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

/* ========================================
   Optional icon support
======================================== */
.ui-btn--figma-dark-outline .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}

.ui-btn--figma-dark-outline .elementor-button-icon svg,
.ui-btn--figma-dark-outline .elementor-button-icon i {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

/* ========================================
   Hover state
======================================== */
.ui-btn--figma-dark-outline .elementor-button:hover,
.ui-btn--figma-dark-outline .elementor-button-link:hover,
.ui-btn--figma-dark-outline a.elementor-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -8px 12px rgba(0, 0, 0, 0.20) !important;
}

.ui-btn--figma-dark-outline .elementor-button:hover::after,
.ui-btn--figma-dark-outline .elementor-button-link:hover::after,
.ui-btn--figma-dark-outline a.elementor-button:hover::after {
  left: 115%;
  opacity: 0.22;
}

.ui-btn--figma-dark-outline .elementor-button:hover .elementor-button-icon svg,
.ui-btn--figma-dark-outline .elementor-button-link:hover .elementor-button-icon svg,
.ui-btn--figma-dark-outline a.elementor-button:hover .elementor-button-icon svg,
.ui-btn--figma-dark-outline .elementor-button:hover .elementor-button-icon i,
.ui-btn--figma-dark-outline .elementor-button-link:hover .elementor-button-icon i,
.ui-btn--figma-dark-outline a.elementor-button:hover .elementor-button-icon i {
  transform: translateX(2px);
}

/* ========================================
   Active state
======================================== */
.ui-btn--figma-dark-outline .elementor-button:active,
.ui-btn--figma-dark-outline .elementor-button-link:active,
.ui-btn--figma-dark-outline a.elementor-button:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

/* ========================================
   Focus state
======================================== */
.ui-btn--figma-dark-outline .elementor-button:focus-visible,
.ui-btn--figma-dark-outline .elementor-button-link:focus-visible,
.ui-btn--figma-dark-outline a.elementor-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -8px 12px rgba(0, 0, 0, 0.18) !important;
}

/* ========================================
   Tablet
======================================== */
@media (max-width: 1024px) {
  .ui-btn--figma-dark-outline .elementor-button,
  .ui-btn--figma-dark-outline .elementor-button-link,
  .ui-btn--figma-dark-outline a.elementor-button {
    min-height: 58px;
    padding: 16px 24px !important;
    font-size: 18px !important;
  }
}

/* ========================================
   Mobile
======================================== */
@media (max-width: 767px) {
  .ui-btn--figma-dark-outline .elementor-button,
  .ui-btn--figma-dark-outline .elementor-button-link,
  .ui-btn--figma-dark-outline a.elementor-button {
    min-height: 52px;
    padding: 14px 18px !important;
    font-size: 15px !important;
    gap: 8px;
  }

  .ui-btn--figma-dark-outline .elementor-button-content-wrapper {
    gap: 8px;
  }

  .ui-btn--figma-dark-outline .elementor-button-icon svg,
  .ui-btn--figma-dark-outline .elementor-button-icon i {
    width: 14px;
    height: 14px;
  }
}

/* =====================================================
   DKMG — GRID → CAROUSEL EN MÓVIL/TABLET
   Pega esto en: Elementor > Personalizar > CSS adicional
   O en un widget HTML justo antes del cierre </body>
   
   PASO 1: Añade la clase  "dkmg-shows-grid"  al 
   contenedor padre (section/container) en Elementor
   que tiene las 4 tarjetas.
===================================================== */
 
/* ── MÓVIL + TABLET: activar carousel ── */
@media (max-width: 1024px) {
 
  .dkmg-shows-grid {
    overflow: hidden !important;
    padding: 0 !important;
    position: relative !important;
  }
 
  /* El track deslizable */
  .dkmg-shows-grid > .e-con-inner,
  .dkmg-shows-grid > .elementor-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 0 24px !important;
    width: max-content !important;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    cursor: grab;
    user-select: none;
  }
 
  .dkmg-shows-grid > .e-con-inner:active,
  .dkmg-shows-grid > .elementor-container:active {
    cursor: grabbing;
  }
 
  /* Cada tarjeta hija */
  .dkmg-shows-grid > .e-con-inner > .e-con,
  .dkmg-shows-grid > .elementor-container > .elementor-column {
    flex: 0 0 auto !important;
    width: 78vw !important;   /* muestra ~1.2 cards = efecto "peek" */
    max-width: 320px !important;
  }
 
  /* Dots de navegación */
  .dkmg-carousel-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding-bottom: 4px;
  }
 
  .dkmg-carousel-dots span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transition: background 0.3s, transform 0.3s;
    cursor: pointer;
  }
 
  .dkmg-carousel-dots span.active {
    background: #1d6fce;
    transform: scale(1.35);
  }
}
 
/* ── DESKTOP: grid normal, ocultar dots ── */
@media (min-width: 1025px) {
  .dkmg-carousel-dots {
    display: none !important;
  }
 
  /* Resetear cualquier transform que haya quedado */
  .dkmg-shows-grid > .e-con-inner,
  .dkmg-shows-grid > .elementor-container {
    transform: translateX(0) !important;
    transition: none !important;
    cursor: default !important;
  }
} .elementor-container > .elementor-column {
    flex: 0 0 auto !important;
    width: 78vw !important;   /* muestra ~1.2 cards = efecto "peek" */
    max-width: 320px !important;
  }

  /* Dots de navegación */
  .dkmg-carousel-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding-bottom: 4px;
  }

  .dkmg-carousel-dots span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transition: background 0.3s, transform 0.3s;
    cursor: pointer;
  }

  .dkmg-carousel-dots span.active {
    background: #1d6fce;
    transform: scale(1.35);
  }
}

/* ── DESKTOP: grid normal, ocultar dots ── */
@media (min-width: 1025px) {
  .dkmg-carousel-dots {
    display: none !important;
  }

  /* Resetear cualquier transform que haya quedado */
  .dkmg-shows-grid > .e-con-inner,
  .dkmg-shows-grid > .elementor-container {
    transform: translateX(0) !important;
    transition: none !important;
    cursor: default !important;
  }
}
/* High-fidelity dark panel for Elementor */
.apz-panel-fidelity {
  --apz-stroke: 0.5px;
  --apz-fill-gradient: linear-gradient(
    90deg,
    rgba(14, 14, 14, 0.88) 0%,
    rgba(10, 10, 10, 0.78) 25%,
    rgba(10, 10, 10, 0.78) 78%,
    rgba(14, 14, 14, 0.88) 100%
  );
  --apz-stroke-gradient: linear-gradient(
    90deg,
    rgba(224, 224, 224, 0.30) 0%,
    rgba(224, 224, 224, 1) 48%,
    rgba(224, 224, 224, 0.20) 100%
  );

  position: relative;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: hidden;
  isolation: isolate;
}

/* Fill layer */
.apz-panel-fidelity::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--apz-fill-gradient);
  pointer-events: none;
  z-index: 0;
}

/* Inner gradient outline */
@supports ((-webkit-mask: linear-gradient(#000 0 0)) or (mask: linear-gradient(#000 0 0))) {
  .apz-panel-fidelity::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: var(--apz-stroke);
    background: var(--apz-stroke-gradient);
    pointer-events: none;
    z-index: 1;

    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}

/* Fallback border */
@supports not (((-webkit-mask: linear-gradient(#000 0 0)) or (mask: linear-gradient(#000 0 0)))) {
  .apz-panel-fidelity {
    border: 1px solid rgba(224, 224, 224, 0.22) !important;
    background: var(--apz-fill-gradient) !important;
  }
}

.apz-panel-fidelity > * {
  position: relative;
  z-index: 2;
}

/* Optional subtle depth */
.apz-panel-fidelity {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.015),
    inset 0 10px 24px rgba(255, 255, 255, 0.01),
    inset 0 -12px 24px rgba(0, 0, 0, 0.18);
}

/* Mobile optimization */
@media (max-width: 767px) {
  .apz-panel-fidelity {
    --apz-stroke: 1px;
  }
}
/* =====================================================
   APZ — GRID CROSS DIVIDERS
   Continuous gradient lines at top, bottom, and between
   every card. Lines are created by the wrapper background
   showing through padding (outer edges) and gap (inner seams).
   No pseudo-elements — nothing can bleed outside the grid.

   Elementor setup:
   - Parent Grid → Advanced → CSS Classes: "apz-grid-cross"
   - Keep "apz-panel-fidelity" on the child Containers — this
     system detects it and prevents duplicate borders/backgrounds.
===================================================== */

.apz-grid-cross {
  --apz-line-soft:   rgba(224, 224, 224, 0.30);
  --apz-line-mid:    rgba(224, 224, 224, 1);
  --apz-line-soft2:  rgba(224, 224, 224, 0.20);
  /* Same alpha values as apz-panel-fidelity original fill */
  --apz-fill-edge:   rgba(14, 14, 14, 0.88);
  --apz-fill-center: rgba(10, 10, 10, 0.78);
  /* Opaque base behind the translucent card fill, so the bright
     wrapper gradient doesn't bleed through the alpha. */
  --apz-card-base:   #0a0a0a;

  position: relative !important;
  border: none !important;
  border-radius: 0 !important;

  /* 1px padding top/bottom → shows the wrapper gradient as outer lines
     1px gap between cards → shows it as inner dividers */
  padding: 1px 0 !important;
  gap: 1px !important;

  /* The wrapper background is the line itself. Visible only through
     the padding (top/bottom) and gaps (between cards). */
  background: linear-gradient(
    90deg,
    var(--apz-line-soft) 0%,
    var(--apz-line-mid) 48%,
    var(--apz-line-soft2) 100%
  ) !important;
}

/* Children: reset borders and give them an opaque base color so the
   bright wrapper gradient doesn't bleed through their semi-transparent
   fill. The apz-panel-fidelity ::after still paints its gradient on
   top — visually identical to the look outside the grid. */
.apz-grid-cross > .e-con,
.apz-grid-cross > .elementor-column,
.apz-grid-cross > [data-element_type="container"] {
  position: relative;
  border: none !important;
  border-radius: 0 !important;
  background-color: var(--apz-card-base) !important;
}

/* For children WITHOUT apz-panel-fidelity: also apply the gradient
   fill directly (since they don't inherit it from that class). */
.apz-grid-cross > .e-con:not(.apz-panel-fidelity),
.apz-grid-cross > .elementor-column:not(.apz-panel-fidelity),
.apz-grid-cross > [data-element_type="container"]:not(.apz-panel-fidelity) {
  background:
    linear-gradient(
      90deg,
      var(--apz-fill-edge) 0%,
      var(--apz-fill-center) 25%,
      var(--apz-fill-center) 78%,
      var(--apz-fill-edge) 100%
    ),
    var(--apz-card-base) !important;
}

/* Kill apz-panel-fidelity's own border pseudo-element when nested
   inside the grid — prevents side-border artifacts.
   Multiple .elementor-kit-4s to cover any nesting Elementor creates. */
.apz-grid-cross .apz-panel-fidelity::before,
.apz-grid-cross > .apz-panel-fidelity::before,
.apz-grid-cross > * .apz-panel-fidelity::before,
.apz-grid-cross .apz-panel-fidelity > *::before {
  content: none !important;
  display: none !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  -webkit-mask: none !important;
          mask: none !important;
}

/* Also ensure no shadow-based border leaks through */
.apz-grid-cross .apz-panel-fidelity {
  box-shadow: none !important;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'HelveticaNeue';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://dkmedia.group/wp-content/uploads/2026/04/HelveticaNeueThin.woff2') format('woff2');
}
@font-face {
	font-family: 'HelveticaNeue';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://dkmedia.group/wp-content/uploads/2026/04/HelveticaNeueRoman.woff2') format('woff2');
}
@font-face {
	font-family: 'HelveticaNeue';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://dkmedia.group/wp-content/uploads/2026/04/HelveticaNeueMedium.woff2') format('woff2');
}
@font-face {
	font-family: 'HelveticaNeue';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('https://dkmedia.group/wp-content/uploads/2026/04/HelveticaNeueLight.woff2') format('woff2');
}
@font-face {
	font-family: 'HelveticaNeue';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('https://dkmedia.group/wp-content/uploads/2026/04/HelveticaNeueHeavy.woff2') format('woff2');
}
@font-face {
	font-family: 'HelveticaNeue';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://dkmedia.group/wp-content/uploads/2026/04/HelveticaNeueBold.woff2') format('woff2');
}
@font-face {
	font-family: 'HelveticaNeue';
	font-style: normal;
	font-weight: 800;
	font-display: auto;
	src: url('https://dkmedia.group/wp-content/uploads/2026/04/HelveticaNeueBlack.woff2') format('woff2');
}
/* End Custom Fonts CSS */