.elementor-735 .elementor-element.elementor-element-57b4a60{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-735 .elementor-element.elementor-element-e2fa770{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:24px 24px;--row-gap:24px;--column-gap:24px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-735 .elementor-element.elementor-element-2d9603e .elementor-heading-title{font-family:"Bebas Neue", Sans-serif;font-size:1px;font-weight:600;color:#FFFFFF;}.elementor-735 .elementor-element.elementor-element-6954a5f{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:16px 16px;--row-gap:16px;--column-gap:16px;--flex-wrap:wrap;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-735 .elementor-element.elementor-element-c934ec5 .elementor-button-content-wrapper{flex-direction:row;}.elementor-735 .elementor-element.elementor-element-c934ec5 .elementor-button .elementor-button-content-wrapper{gap:0px;}.elementor-735 .elementor-element.elementor-element-96675ed{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-735 .elementor-element.elementor-element-c615cf6{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-735 .elementor-element.elementor-element-5e72e89{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;}.elementor-735 .elementor-element.elementor-element-b710590{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-735 .elementor-element.elementor-element-7eb0702{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-735 .elementor-element.elementor-element-b6f6e8d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-735 .elementor-element.elementor-element-3d7a3c4{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-735 .elementor-element.elementor-element-215364b{width:100%;max-width:100%;}.elementor-735 .elementor-element.elementor-element-21cd8f2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-735 .elementor-element.elementor-element-55fcf32{--display:flex;}.elementor-735 .elementor-element.elementor-element-81cb3f2{--display:flex;}.elementor-735 .elementor-element.elementor-element-ede0cea{width:var( --container-widget-width, 33.934% );max-width:33.934%;--container-widget-width:33.934%;--container-widget-flex-grow:0;}.elementor-735 .elementor-element.elementor-element-ede0cea.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-735 .elementor-element.elementor-element-a6a0f16{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-735 .elementor-element.elementor-element-34e1470{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;}.elementor-735 .elementor-element.elementor-element-34e1470.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-735 .elementor-element.elementor-element-a9573e4{width:var( --container-widget-width, 93.052% );max-width:93.052%;--container-widget-width:93.052%;--container-widget-flex-grow:0;}.elementor-735 .elementor-element.elementor-element-a9573e4.elementor-element{--flex-grow:0;--flex-shrink:0;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-735 .elementor-element.elementor-element-e2fa770{--width:50%;}.elementor-735 .elementor-element.elementor-element-96675ed{--width:50%;}.elementor-735 .elementor-element.elementor-element-b710590{--width:100%;}.elementor-735 .elementor-element.elementor-element-7eb0702{--width:50%;}.elementor-735 .elementor-element.elementor-element-b6f6e8d{--width:50%;}}/* Start custom CSS for container, class: .elementor-element-57b4a60 *//* ==============================================================================
   ND HERO — Nivel Delta v1.4 CONSOLIDADO
   ==============================================================================
   Version validada conceptualmente por GPT + Claude.

   Cambio principal vs v1.2:
   - Se integra el ajuste vertical real de la imagen del guardia.
   - La imagen ahora crea overflow vertical con height > 100%.
   - El ajuste vertical usa position: relative + top.
   - Ken Burns vuelve a 1 -> 1.08 para conservar un zoom limpio y suave.
   - Las variables de imagen quedan consolidadas en un solo bloque .nd-hero-wrap.

   Ubicacion recomendada:
   Elementor -> Site Settings -> Custom CSS

   Estructura esperada:
   .nd-hero-wrap
     .nd-hero-content
       .nd-hero-badge
       .nd-hero-title
       .nd-hero-sub
       .nd-hero-actions
         .nd-hero-btn-cot
         .nd-hero-btn-what
       .nd-hero-trust
     .nd-hero-media
       .nd-hero-image
   .nd-hero-marquee
   ============================================================================== */


/* ==============================================================================
   00. SR-ONLY
   Texto visible para lectores de pantalla, oculto visualmente.
   ============================================================================== */

.nd-hero-wrap .sr-only,
.sr-only {
  position: absolute !important; /* Saca el texto del flujo visual */
  width: 1px !important; /* Reduce el ancho al minimo */
  height: 1px !important; /* Reduce el alto al minimo */
  padding: 0 !important; /* Elimina espacio interno */
  margin: -1px !important; /* Evita que ocupe espacio visual */
  overflow: hidden !important; /* Oculta cualquier desborde */
  clip: rect(0, 0, 0, 0) !important; /* Recorta visualmente el elemento */
  white-space: nowrap !important; /* Evita saltos de linea */
  border: 0 !important; /* Elimina borde */
}


/* ==============================================================================
   01. VARIABLES BASE
   Control central del hero. Los breakpoints modifican estas variables.
   ============================================================================== */

.nd-hero-wrap {
  /* 01.1 Paleta */
  --hero-bg: #050505; /* Fondo principal del hero */
  --hero-gold: #c8a44a; /* Dorado principal */
  --hero-gold-soft: #d4b264; /* Dorado claro para hover */
  --hero-text: #f5f1ea; /* Texto principal */
  --hero-text-dim: rgba(245, 241, 234, 0.75); /* Texto secundario */
  --hero-text-soft: rgba(245, 241, 234, 0.6); /* Texto microcopy */
  --hero-ease: 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transicion general */

  /* 01.2 Alto y compensacion con header */
  --page-header-h: 90px; /* Altura real normal del header en el breakpoint base */
  --hero-min-h: calc(100vh - var(--page-header-h)); /* Alto hero alineado al header */
  --hero-overlap-top: -15px; /* Solape superior visual contra header */

  /* 01.3 Espaciado */
  --hero-pad-x: 70px; /* Padding horizontal de la columna de contenido */
  --hero-pad-y-top: 110px; /* Padding superior del contenido */
  --hero-pad-y-bot: 105px; /* Padding inferior del contenido */

  /* 01.4 Layout */
  --hero-content-w: 50%; /* Ancho de columna izquierda */
  --hero-media-w: 50%; /* Ancho de columna derecha */
  --hero-content-gap: 28px; /* Separacion vertical entre elementos */

  /* 01.5 Badge */
  --hero-badge-size: 15px; /* Tamano de texto del badge */
  --hero-badge-letter: 2.5px; /* Espaciado de letras del badge */
  --hero-badge-pad: 10px 22px; /* Padding interno del badge */
  --hero-badge-y: -20px; /* Negativo = sube, positivo = baja */

  /* 01.6 Titulo */
  --hero-title-size: 88px; /* Tamano del titulo */
  --hero-title-line: 1; /* Interlineado del titulo */
  --hero-title-weight: 700; /* Peso del titulo */

  /* 01.7 Subtitulo */
  --hero-sub-size: 18px; /* Tamano del subtitulo */
  --hero-sub-line: 1.55; /* Interlineado del subtitulo */
  --hero-sub-max-w: 540px; /* Ancho maximo del subtitulo */

  /* 01.8 Botones */
  --hero-btn-w: 270px; /* Ancho minimo de botones */
  --hero-btn-h: 50px; /* Alto de botones */
  --hero-btn-pad-x: 30px; /* Padding horizontal de botones */
  --hero-btn-size: 15px; /* Tamano de texto de botones */
  --hero-btn-radius: 15px; /* Radio de botones */
  --hero-btn-gap: 16px; /* Separacion entre botones */

  /* 01.9 Trust */
  --hero-trust-size: 13px; /* Tamano del microcopy */
  --hero-trust-letter: 0.5px; /* Espaciado de microcopy */
  --hero-trust-y: 15px; /* Positivo baja el microcopy, negativo lo sube */

  /* 01.10 Imagen del guardia */
  --hero-img-focus: 50% 30%; /* Encuadre base de object-position: X Y */
  --hero-img-v-bleed: .95; /* Altura relativa del img: .95 = 5% mas bajo */
  --hero-img-v-shift: 12.5%; /* Positivo baja la imagen, negativo la sube */

  /* 01.11 Ken Burns */
  --hero-img-scale-start: 1; /* Escala inicial del zoom */
  --hero-img-scale-end: 1.05; /* Escala final del zoom */
  --hero-img-zoom-duration: 10s; /* Duracion del Ken Burns */
  --hero-parallax-strength: -0.08px; /* Intensidad del parallax */

  /* 01.12 Overlay de imagen */
  --hero-overlay-from: rgba(5, 5, 5, 1); /* Inicio oscuro del gradiente */
  --hero-overlay-mid: rgba(5, 5, 5, 0.45); /* Punto medio del gradiente */
  --hero-overlay-to: rgba(5, 5, 5, 0); /* Final transparente */
  --hero-overlay-stop-2: 55%; /* Posicion del punto medio */
  --hero-vignette: 0.3; /* Intensidad del vignette */

  /* 01.13 Pulso de luz */
  --hero-pulse-x: 25%; /* Posicion horizontal del pulso */
  --hero-pulse-y: 30%; /* Posicion vertical del pulso */
  --hero-pulse-w: 200px; /* Ancho del pulso */
  --hero-pulse-h: 150px; /* Alto del pulso */
  --hero-pulse-duration: 5s; /* Duracion del pulso */

  /* 01.14 WhatsApp */
  --hero-whatsapp: #25d366; /* Verde WhatsApp */
}


/* ==============================================================================
   02. CONTENEDOR PRINCIPAL
   Seccion hero completa.
   ============================================================================== */

.nd-hero-wrap {
  position: relative !important; /* Permite overlays absolutos */
  overflow: hidden !important; /* Recorta efectos que salgan del hero */
  background: var(--hero-bg) !important; /* Fondo negro del hero */
  min-height: var(--hero-min-h) !important; /* Alto minimo responsive */
  margin-top: var(--hero-overlap-top) !important; /* Ajuste contra header */
  padding: 0 !important; /* El padding vive en .nd-hero-content */
  border-top: 0 !important; /* Evita linea superior accidental */

  display: flex !important; /* Layout horizontal */
  flex-direction: row !important; /* Content izquierda, media derecha */
  align-items: stretch !important; /* Columnas igual alto */
  --align-items: stretch !important; /* Refuerzo Elementor */
  flex-wrap: nowrap !important; /* Evita salto de columnas */
  gap: 0 !important; /* Sin separacion entre columnas */
}

.nd-hero-wrap > .e-con-inner {
  display: flex !important; /* Neutraliza wrapper interno */
  flex-direction: row !important; /* Mantiene columnas en fila */
  flex-wrap: nowrap !important; /* Evita salto de columnas */
  align-items: stretch !important; /* Estira columnas */
  width: 100% !important; /* Ocupa ancho completo */
  max-width: 100% !important; /* Cancela max-width de Elementor */
  padding: 0 !important; /* Sin padding interno */
  gap: 0 !important; /* Sin gap interno */
}


/* ==============================================================================
   03. CONTENT
   Columna izquierda: textos, botones y trust.
   ============================================================================== */

.nd-hero-content {
  position: relative !important; /* Permite z-index */
  z-index: 5 !important; /* Queda sobre imagen y overlays */
  flex: 0 0 auto !important; /* No crece automaticamente */
  width: var(--hero-content-w) !important; /* Ancho responsive */
  padding: var(--hero-pad-y-top) var(--hero-pad-x) var(--hero-pad-y-bot) var(--hero-pad-x) !important; /* Espaciado interno */

  display: flex !important; /* Apila elementos */
  flex-direction: column !important; /* Direccion vertical */
  justify-content: center !important; /* Centrado vertical */
  align-items: flex-start !important; /* Alineacion izquierda */
  --align-items: flex-start !important; /* Refuerzo Elementor */
  gap: var(--hero-content-gap) !important; /* Separacion entre elementos */
}


/* ==============================================================================
   04. MEDIA
   Columna derecha: imagen, overlays y efectos.
   ============================================================================== */

.nd-hero-media {
  position: relative !important; /* Base para overlays */
  flex: 0 0 auto !important; /* Columna fija por variable */
  width: var(--hero-media-w) !important; /* Ancho responsive */
  overflow: hidden !important; /* Recorta imagen con bleed vertical */
  padding: 0 !important; /* Sin padding */
  z-index: 1 !important; /* Detras del contenido */
}

.nd-hero-image {
  position: absolute !important; /* Llena la columna media */
  inset: 0 !important; /* Top/right/bottom/left 0 */
  width: 100% !important; /* Ancho completo */
  height: 100% !important; /* Alto completo */
  padding: 0 !important; /* Sin padding */
  overflow: visible !important; /* Permite pulso interno */
  transform: translateY(calc(var(--nd-scroll, 0) * var(--hero-parallax-strength))) !important; /* Parallax por variable global */
  transition: transform 0.05s linear !important; /* Movimiento suave de parallax */
  will-change: transform !important; /* Optimiza transform */
}

.nd-hero-image .elementor-widget-container {
  position: relative !important; /* Base para pseudo-elementos internos */
  width: 100% !important; /* Ancho completo */
  height: 100% !important; /* Alto completo */
}

.nd-hero-image img {
  display: block !important; /* Evita espacio inline */
  position: relative !important; /* Permite top sin afectar Ken Burns */
  top: var(--hero-img-v-shift) !important; /* Ajuste vertical limpio */
  width: 100% !important; /* Ancho completo */
  height: calc(100% * var(--hero-img-v-bleed)) !important; /* Crea overflow vertical real */
  object-fit: cover !important; /* Recorta sin deformar */
  object-position: var(--hero-img-focus) !important; /* Encuadre base */
  transform-origin: center center !important; /* Zoom desde el centro */
  animation:
    ndHeroImgIn 1.2s ease-out 0.3s both,
    ndHeroKenBurns var(--hero-img-zoom-duration) ease-in-out 1.5s infinite alternate !important; /* Fade + Ken Burns */
  will-change: opacity, transform !important; /* Optimiza animacion */
}

.nd-hero-media::before {
  content: "" !important; /* Crea overlay */
  position: absolute !important; /* Cubre media */
  inset: 0 !important; /* Ocupa todo */
  background: linear-gradient(
    to right,
    var(--hero-overlay-from) 0%,
    var(--hero-overlay-mid) var(--hero-overlay-stop-2),
    var(--hero-overlay-to) 100%
  ) !important; /* Funde imagen con fondo negro */
  pointer-events: none !important; /* No bloquea clicks */
  z-index: 2 !important; /* Sobre imagen */
  animation: ndHeroOverlayPulse 5s ease-in-out infinite alternate !important; /* Respiracion sutil */
  will-change: opacity !important; /* Optimiza opacidad */
}

.nd-hero-media::after {
  content: "" !important; /* Crea vignette */
  position: absolute !important; /* Cubre media */
  inset: 0 !important; /* Ocupa todo */
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, var(--hero-vignette)) 100%
  ) !important; /* Oscurece esquinas */
  pointer-events: none !important; /* No bloquea clicks */
  z-index: 3 !important; /* Sobre gradiente */
}

.nd-hero-image::before {
  content: "" !important; /* Crea pulso de luz */
  position: absolute !important; /* Posicion manual */
  top: var(--hero-pulse-y) !important; /* Posicion Y */
  left: var(--hero-pulse-x) !important; /* Posicion X */
  width: var(--hero-pulse-w) !important; /* Ancho */
  height: var(--hero-pulse-h) !important; /* Alto */
  background: radial-gradient(
    ellipse at center,
    rgba(255, 180, 80, 0.85) 0%,
    rgba(255, 180, 80, 0.4) 30%,
    rgba(255, 180, 80, 0.15) 60%,
    transparent 80%
  ) !important; /* Luz calida */
  pointer-events: none !important; /* No bloquea clicks */
  mix-blend-mode: screen !important; /* Fusion luminosa */
  z-index: 4 !important; /* Sobre overlays */
  filter: blur(8px) !important; /* Suaviza luz */
  animation: ndHeroLightPulse var(--hero-pulse-duration) ease-in-out infinite !important; /* Pulso */
  will-change: opacity, transform !important; /* Optimiza */
}

.nd-hero-wrap::after {
  content: "" !important; /* Crea ambient glow */
  position: absolute !important; /* Posicion respecto al hero */
  top: -12% !important; /* Sale por arriba */
  right: -6% !important; /* Sale por derecha */
  width: 55% !important; /* Ancho del glow */
  height: 65% !important; /* Alto del glow */
  background: radial-gradient(
    ellipse at center,
    rgba(200, 164, 74, 0.22) 0%,
    rgba(200, 164, 74, 0.10) 35%,
    rgba(200, 164, 74, 0.04) 60%,
    transparent 75%
  ) !important; /* Resplandor dorado */
  pointer-events: none !important; /* No bloquea clicks */
  z-index: 0 !important; /* Detras del contenido */
  animation: ndHeroAmbientGlow 14s ease-in-out infinite alternate !important; /* Movimiento lento */
  will-change: opacity, transform !important; /* Optimiza */
}


/* ==============================================================================
   05. BADGE
   Etiqueta superior.
   ============================================================================== */

.nd-hero-badge {
  margin: var(--hero-badge-y) 0 0 0 !important;
  padding: 0 !important;
  animation: ndHeroFadeUp 0.8s ease-out 0.2s both !important;
  will-change: opacity, transform !important;
}


.nd-hero-badge .elementor-widget-container {
  padding: 0 !important; /* Limpia padding Elementor */
}

.nd-hero-badge p {
  display: inline-block !important; /* Ajusta al contenido */
  margin: 0 !important; /* Sin margen */
  padding: var(--hero-badge-pad) !important; /* Padding de badge */
  font-family: "Outfit", system-ui, sans-serif !important; /* Fuente badge */
  font-size: var(--hero-badge-size) !important; /* Tamano */
  font-weight: 500 !important; /* Peso */
  line-height: 1 !important; /* Altura compacta */
  letter-spacing: var(--hero-badge-letter) !important; /* Espaciado */
  text-transform: uppercase !important; /* Mayusculas */
  color: var(--hero-gold) !important; /* Dorado */
  background: rgba(200, 164, 74, 0.06) !important; /* Fondo sutil */
  border: 1px solid rgba(200, 164, 74, 0.35) !important; /* Borde dorado */
  border-radius: 2px !important; /* Radio pequeno */
  backdrop-filter: blur(8px) !important; /* Blur fondo */
  -webkit-backdrop-filter: blur(8px) !important; /* Soporte Safari */
}

.nd-hero-badge .nd-badge-star {
  display: inline-block !important; /* Permite transform */
  font-weight: 500 !important; /* Peso estrella */
  animation: ndStarPulse 2.6s ease-in-out infinite !important; /* Pulso estrella */
  will-change: opacity, transform, text-shadow !important; /* Optimiza */
}

.nd-hero-badge .nd-badge-star:last-of-type {
  animation-delay: 1.3s !important; /* Desfase de segunda estrella */
}


/* ==============================================================================
   06. TITULO
   Texto principal del hero.
   ============================================================================== */

.nd-hero-title {
  margin: 0 !important; /* Sin margen */
  padding: 0 !important; /* Sin padding */
  animation: ndHeroFadeUp 1s ease-out 0.4s both !important; /* Entrada */
  will-change: opacity, transform !important; /* Optimiza */
}

.nd-hero-title .elementor-widget-container {
  padding: 0 !important; /* Limpia padding Elementor */
  margin: 0 !important; /* Limpia margen Elementor */
}

.nd-hero-title .elementor-heading-title,
.nd-hero-title h2 {
  margin: 0 !important; /* Sin margen */
  padding: 0 !important; /* Sin padding */
  font-family: "Bebas Neue", "Outfit", system-ui, sans-serif !important; /* Fuente del titulo */
  font-size: var(--hero-title-size) !important; /* Tamano responsive */
  font-weight: var(--hero-title-weight) !important; /* Peso */
  line-height: var(--hero-title-line) !important; /* Interlineado */
  letter-spacing: 0 !important; /* Sin tracking negativo */
  color: var(--hero-text) !important; /* Color principal */
  text-wrap: balance !important; /* Balancea lineas en navegadores compatibles */
}

.nd-hero-title .nd-accent {
  color: var(--hero-gold) !important; /* Acento dorado */
  font-style: italic !important; /* Estilo enfatico */
  font-weight: 700 !important; /* Peso fuerte */
}


/* ==============================================================================
   07. SUBTITULO
   Texto secundario.
   ============================================================================== */

.nd-hero-sub {
  margin: 0 !important; /* Sin margen */
  padding: 0 !important; /* Sin padding */
  max-width: var(--hero-sub-max-w) !important; /* Ancho maximo */
  animation: ndHeroFadeUp 0.8s ease-out 0.6s both !important; /* Entrada */
  will-change: opacity, transform !important; /* Optimiza */
}

.nd-hero-sub .elementor-widget-container {
  padding: 0 !important; /* Limpia padding Elementor */
}

.nd-hero-sub p {
  margin: 0 !important; /* Sin margen */
  padding: 0 !important; /* Sin padding */
  font-family: "Outfit", system-ui, sans-serif !important; /* Fuente subtitulo */
  font-size: var(--hero-sub-size) !important; /* Tamano responsive */
  font-weight: 400 !important; /* Peso normal */
  line-height: var(--hero-sub-line) !important; /* Interlineado */
  color: var(--hero-text-dim) !important; /* Color atenuado */
  text-wrap: pretty !important; /* Mejora saltos en navegadores compatibles */
}


/* ==============================================================================
   08. BOTONES
   Acciones principales.
   ============================================================================== */

.nd-hero-actions {
  display: flex !important; /* Layout de botones */
  flex-direction: row !important; /* En fila */
  flex-wrap: wrap !important; /* Permite salto en pantallas chicas */
  align-items: center !important; /* Centra verticalmente */
  gap: var(--hero-btn-gap) !important; /* Separacion entre botones */
  margin: 0 !important; /* Sin margen */
  padding: 0 !important; /* Sin padding */
  animation: ndHeroFadeUp 0.8s ease-out 0.8s both !important; /* Entrada */
  will-change: opacity, transform !important; /* Optimiza */
}

.nd-hero-wrap .nd-hero-btn-cot .elementor-button,
.nd-hero-wrap .nd-hero-btn-what .elementor-button {
  font-family: "Outfit", system-ui, sans-serif !important; /* Fuente boton */
  position: relative !important; /* Permite animaciones internas */
  min-width: var(--hero-btn-w) !important; /* Ancho minimo */
  height: var(--hero-btn-h) !important; /* Alto */
  border-radius: var(--hero-btn-radius) !important; /* Radio */
  padding: 0 var(--hero-btn-pad-x) !important; /* Padding horizontal */
  display: inline-flex !important; /* Flex inline */
  align-items: center !important; /* Centra vertical */
  justify-content: center !important; /* Centra horizontal */
  font-size: var(--hero-btn-size) !important; /* Tamano texto */
  font-weight: 800 !important; /* Peso fuerte */
  line-height: 1 !important; /* Altura compacta */
  letter-spacing: 0 !important; /* Sin tracking */
  text-transform: uppercase !important; /* Mayusculas */
  text-decoration: none !important; /* Sin subrayado */
  text-rendering: geometricPrecision !important; /* Render fino */
  -webkit-font-smoothing: antialiased !important; /* Suavizado */
}

.nd-hero-wrap .nd-hero-btn-cot .elementor-button-content-wrapper,
.nd-hero-wrap .nd-hero-btn-what .elementor-button-content-wrapper {
  display: inline-flex !important; /* Alinea icono/texto */
  align-items: center !important; /* Centra vertical */
  justify-content: center !important; /* Centra horizontal */
  gap: 10px !important; /* Separacion icono/texto */
  position: relative !important; /* Encima de efectos */
  z-index: 3 !important; /* Prioridad visual */
}


/* ------------------------------------------------------------------------------
   08.1 COTIZACION
   Boton dorado con brillo diagonal solo en hover.
   ------------------------------------------------------------------------------ */

.nd-hero-wrap .nd-hero-btn-cot .elementor-button {
  color: #050505 !important; /* Texto negro */
  fill: #050505 !important; /* Iconos negros */
  border: 1px solid #cdaa61 !important; /* Borde dorado */
  overflow: hidden !important; /* Recorta brillo */

  background-color: #cdaa61 !important; /* Fondo dorado */
  background-image: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 47%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.55) 53%,
    transparent 65%
  ) !important; /* Franja de brillo diagonal */
  background-size: 220% 100% !important; /* Area amplia para animar */
  background-repeat: no-repeat !important; /* Evita repetir brillo */
  background-position: 110% 0; /* Brillo escondido a la derecha */

  transition:
    transform var(--hero-ease),
    border-color var(--hero-ease),
    box-shadow var(--hero-ease),
    background-color var(--hero-ease) !important; /* Transiciones hover */
  will-change: background-position !important; /* Optimiza brillo */
}

.nd-hero-wrap .nd-hero-btn-cot:hover .elementor-button,
.nd-hero-wrap .nd-hero-btn-cot .elementor-button:hover {
  transform: translateY(-3px) !important; /* Eleva boton */
  background-color: #d7b670 !important; /* Dorado mas claro */
  border-color: #d7b670 !important; /* Borde acorde */
  box-shadow:
    0 14px 26px rgba(205, 170, 97, 0.30),
    0 0 24px rgba(205, 170, 97, 0.40) !important; /* Glow dorado */
  filter: brightness(1.05) !important; /* Brillo general */
  animation: ndCotShine 1s ease-out !important; /* Cruce de brillo */
}


/* ------------------------------------------------------------------------------
   08.2 WHATSAPP
   Boton outline con halo verde.
   ------------------------------------------------------------------------------ */

.nd-hero-wrap .nd-hero-btn-what .elementor-button {
  overflow: visible !important; /* Permite halo fuera del boton */
  background: transparent !important; /* Fondo transparente */
  color: #ffffff !important; /* Texto blanco */
  fill: #ffffff !important; /* Icono blanco */
  border: 1px solid rgba(37, 211, 102, 0.42) !important; /* Borde verde sutil */
  animation: ndWhatsappGlow 2.2s ease-out infinite !important; /* Halo continuo */
  transition: transform var(--hero-ease), color var(--hero-ease), border-color var(--hero-ease) !important; /* Hover */
}

.nd-hero-wrap .nd-hero-btn-what:hover .elementor-button,
.nd-hero-wrap .nd-hero-btn-what .elementor-button:hover {
  transform: scale(1.03) !important; /* Crece ligeramente */
  color: var(--hero-whatsapp) !important; /* Texto verde */
  fill: var(--hero-whatsapp) !important; /* Icono verde */
  border-color: var(--hero-whatsapp) !important; /* Borde verde intenso */
  background: transparent !important; /* Mantiene outline */
}

.nd-hero-wrap .nd-hero-btn-what .elementor-button-icon {
  display: inline-flex !important; /* Controla icono */
  align-items: center !important; /* Centra vertical */
  justify-content: center !important; /* Centra horizontal */
  margin: 0 !important; /* Sin margen */
}

.nd-hero-wrap .nd-hero-btn-what .elementor-button-icon svg,
.nd-hero-wrap .nd-hero-btn-what .elementor-button-icon i {
  width: 20px !important; /* Ancho icono */
  height: 20px !important; /* Alto icono */
  font-size: 20px !important; /* Tamano icon font */
  fill: currentColor !important; /* Hereda color */
  color: currentColor !important; /* Hereda color */
  transition: fill var(--hero-ease), color var(--hero-ease) !important; /* Transicion */
}


/* ==============================================================================
   09. TRUST
   Microcopy inferior.
   ============================================================================== */

.nd-hero-trust {
  margin: var(--hero-trust-y) 0 0 0 !important;
  padding: 0 !important; /* Sin padding */
  animation: ndHeroFadeUp 0.8s ease-out 1s both !important; /* Entrada */
  will-change: opacity, transform !important; /* Optimiza */
}

.nd-hero-trust .elementor-widget-container {
  padding: 0 !important; /* Limpia padding Elementor */
}

.nd-hero-trust-text {
  font-family: "Outfit", system-ui, sans-serif !important; /* Fuente trust */
  font-size: var(--hero-trust-size) !important; /* Tamano */
  font-weight: 400 !important; /* Peso */
  letter-spacing: var(--hero-trust-letter) !important; /* Espaciado */
  color: var(--hero-text-soft) !important; /* Color suave */
  line-height: 1.5 !important; /* Interlineado */
}


/* ==============================================================================
   10. MARQUEE
   Cintilla inferior animada.
   ============================================================================== */

.nd-hero-marquee {
  --mq-bg: #c8a96e; /* Fondo marquee */
  --mq-text: #0a0a0a; /* Texto marquee */
  --mq-text-size: 14px; /* Tamano texto */
  --mq-text-weight: 500; /* Peso texto */
  --mq-text-spacing: 1.4px; /* Espaciado letras */
  --mq-separator-opacity: 0.5; /* Opacidad separadores */
  --mq-separator-gap: 24px; /* Espacio separadores */
  --mq-padding-y: 10px; /* Padding vertical */
  --mq-overlap-top: 3px; /* Solape con hero */
  --mq-duration: 38s; /* Velocidad animacion */
  --mq-fade-width: 8%; /* Desvanecido lateral */

  position: relative !important; /* Permite z-index */
  z-index: 9 !important; /* Sobre hero */
  width: 100% !important; /* Ancho total */
  max-width: 100% !important; /* Evita desbordes */
  margin: var(--mq-overlap-top) 0 0 0 !important; /* Solape superior */
  padding: var(--mq-padding-y) 0 !important; /* Padding vertical */
  background: var(--mq-bg) !important; /* Fondo */
  overflow: hidden !important; /* Recorta track */
  line-height: 1 !important; /* Altura compacta */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 var(--mq-fade-width), #000 calc(100% - var(--mq-fade-width)), transparent 100%); /* Fade Safari */
  mask-image: linear-gradient(to right, transparent 0%, #000 var(--mq-fade-width), #000 calc(100% - var(--mq-fade-width)), transparent 100%); /* Fade */
}

.nd-hero-marquee .elementor-widget-html,
.nd-hero-marquee .elementor-widget-container {
  margin: 0 !important; /* Sin margen */
  padding: 0 !important; /* Sin padding */
}

.nd-marquee {
  width: 100% !important; /* Ancho total */
  overflow: hidden !important; /* Recorta movimiento */
}

.nd-marquee-track {
  display: flex !important; /* Fila de grupos */
  align-items: center !important; /* Centra vertical */
  width: max-content !important; /* Ancho segun contenido */
  animation: ndHeroMarqueeMove var(--mq-duration) linear infinite !important; /* Movimiento infinito */
  will-change: transform !important; /* Optimiza */
}

.nd-hero-marquee:hover .nd-marquee-track {
  animation-play-state: paused !important; /* Pausa al hover */
}

.nd-marquee-group {
  display: flex !important; /* Grupo en fila */
  align-items: center !important; /* Centra vertical */
  flex: 0 0 auto !important; /* No se encoge */
}

.nd-marquee-track span,
.nd-marquee-track i {
  font-family: "Bebas Neue", "Outfit", sans-serif !important; /* Fuente marquee */
  font-size: var(--mq-text-size) !important; /* Tamano */
  font-weight: var(--mq-text-weight) !important; /* Peso */
  line-height: 1 !important; /* Compacto */
  color: var(--mq-text) !important; /* Color */
  text-transform: uppercase !important; /* Mayusculas */
  letter-spacing: var(--mq-text-spacing) !important; /* Espaciado */
  white-space: nowrap !important; /* Sin saltos */
}

.nd-marquee-track i {
  opacity: var(--mq-separator-opacity) !important; /* Opacidad separador */
  font-style: normal !important; /* No cursiva */
  padding: 0 var(--mq-separator-gap) !important; /* Separacion */
}


/* ==============================================================================
   11. KEYFRAMES
   Animaciones globales del hero.
   ============================================================================== */

@keyframes ndHeroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ndHeroImgIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ndHeroKenBurns {
  0% { transform: scale(var(--hero-img-scale-start)); }
  100% { transform: scale(var(--hero-img-scale-end)); }
}

@keyframes ndHeroOverlayPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.68; }
}

@keyframes ndHeroLightPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes ndHeroAmbientGlow {
  0%, 100% { opacity: 0.6; transform: scale(1) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.18) rotate(10deg); }
}

@keyframes ndStarPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
    text-shadow: 0 0 0 rgba(200, 164, 74, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1.25);
    text-shadow: 0 0 14px rgba(200, 164, 74, 0.85);
  }
}

@keyframes ndCotShine {
  0% { background-position: 110% 0; }
  100% { background-position: -110% 0; }
}

@keyframes ndWhatsappGlow {
  0% {
    box-shadow:
      0 0 0 0 rgba(37, 211, 102, 0.55),
      0 0 14px rgba(37, 211, 102, 0.18);
  }
  55% {
    box-shadow:
      0 0 0 9px rgba(37, 211, 102, 0),
      0 0 22px rgba(37, 211, 102, 0.34);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(37, 211, 102, 0),
      0 0 12px rgba(37, 211, 102, 0.12);
  }
}

@keyframes ndHeroMarqueeMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}


/* ==============================================================================
   12. RESPONSIVE
   Breakpoints alineados con el header.
   ============================================================================== */

@media (max-width: 480px) {
  .nd-hero-wrap {
    --page-header-h: 50px;
    --hero-min-h: auto;
    --hero-overlap-top: 0px;
    --hero-pad-x: 22px;
    --hero-pad-y-top: 72px;
    --hero-pad-y-bot: 72px;
    --hero-content-w: 100%;
    --hero-media-w: 100%;
    --hero-content-gap: 20px;
    --hero-badge-size: 11px;
    --hero-badge-letter: 1.8px;
    --hero-badge-pad: 8px 16px;
    --hero-title-size: 44px;
    --hero-sub-size: 15px;
    --hero-sub-max-w: 100%;
    --hero-btn-w: 100%;
    --hero-btn-h: 48px;
    --hero-btn-size: 12px;
    --hero-btn-gap: 12px;
    --hero-trust-size: 11px;
    --hero-overlay-from: rgba(5, 5, 5, 0.92);
    --hero-overlay-mid: rgba(5, 5, 5, 0.82);
    --hero-overlay-to: rgba(5, 5, 5, 0.7);
    --hero-overlay-stop-2: 50%;
  }

  .nd-hero-wrap,
  .nd-hero-wrap > .e-con-inner {
    flex-direction: column !important;
  }

  .nd-hero-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
  }

  .nd-hero-content {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .nd-hero-marquee {
    --mq-text-size: 12px;
    --mq-separator-gap: 16px;
    --mq-duration: 32s;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .nd-hero-wrap {
    --page-header-h: 65px;
    --hero-min-h: auto;
    --hero-overlap-top: 0px;
    --hero-pad-x: 28px;
    --hero-pad-y-top: 80px;
    --hero-pad-y-bot: 76px;
    --hero-content-w: 100%;
    --hero-media-w: 100%;
    --hero-title-size: 52px;
    --hero-sub-size: 16px;
    --hero-sub-max-w: 100%;
    --hero-btn-w: 270px;
    --hero-overlay-from: rgba(5, 5, 5, 0.88);
    --hero-overlay-mid: rgba(5, 5, 5, 0.78);
    --hero-overlay-to: rgba(5, 5, 5, 0.65);
    --hero-overlay-stop-2: 55%;
  }

  .nd-hero-wrap,
  .nd-hero-wrap > .e-con-inner {
    flex-direction: column !important;
  }

  .nd-hero-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
  }

  .nd-hero-content {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .nd-hero-marquee {
    --mq-text-size: 13px;
    --mq-separator-gap: 18px;
    --mq-duration: 34s;
  }
}

@media (max-width: 767px) and (max-height: 450px) {
  .nd-hero-wrap {
    --page-header-h: 60px;
    --hero-pad-y-top: 48px;
    --hero-pad-y-bot: 48px;
    --hero-content-gap: 14px;
    --hero-title-size: 36px;
    --hero-sub-size: 13px;
  }

  .nd-hero-marquee {
    --mq-text-size: 11px;
    --mq-padding-y: 6px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .nd-hero-wrap {
    --page-header-h: 85px;
    --hero-min-h: calc(100vh - var(--page-header-h));
    --hero-overlap-top: 0px;
    --hero-pad-x: 42px;
    --hero-pad-y-top: 100px;
    --hero-pad-y-bot: 90px;
    --hero-content-w: 56%;
    --hero-media-w: 44%;
    --hero-title-size: 62px;
    --hero-sub-size: 16px;
    --hero-btn-w: 240px;
  }

  .nd-hero-marquee {
    --mq-text-size: 13px;
    --mq-padding-y: 8px;
  }
}

@media (min-width: 1025px) and (max-width: 1199px) {
  .nd-hero-wrap {
    --page-header-h: 90px;
    --hero-min-h: calc(100vh - var(--page-header-h));
    --hero-overlap-top: 0px;
    --hero-pad-x: 56px;
    --hero-pad-y-top: 110px;
    --hero-pad-y-bot: 100px;
    --hero-content-w: 53%;
    --hero-media-w: 47%;
    --hero-title-size: 72px;
    --hero-sub-size: 17px;
  }
}

@media (min-width: 1200px) and (max-width: 1440px) {
  .nd-hero-wrap {
    --page-header-h: 90px;
    --hero-min-h: calc(100vh - var(--page-header-h));
    --hero-overlap-top: -15px;
    --hero-pad-x: 70px;
    --hero-title-size: 80px;
    --hero-sub-size: 17px;
  }
}

@media (min-width: 1441px) and (max-width: 2000px) {
  .nd-hero-wrap {
    --page-header-h: 110px;
    --hero-min-h: calc(100vh - var(--page-header-h));
    --hero-pad-x: 96px;
    --hero-pad-y-top: 130px;
    --hero-pad-y-bot: 90px;
    --hero-title-size: 70px;
    --hero-sub-size: 19px;
    --hero-sub-max-w: 560px;
    --hero-btn-size: 15px;
  }

  .nd-hero-marquee {
    --mq-text-size: 15px;
    --mq-padding-y: 12px;
    --mq-duration: 42s;
  }
}

@media (min-width: 2001px) and (max-width: 2500px) {
  .nd-hero-wrap {
    --page-header-h: 130px;
    --hero-min-h: calc(100vh - var(--page-header-h));
    --hero-pad-x: 130px;
    --hero-pad-y-top: 150px;
    --hero-pad-y-bot: 140px;
    --hero-content-gap: 36px;
    --hero-badge-size: 18px;
    --hero-title-size: 130px;
    --hero-sub-size: 24px;
    --hero-sub-max-w: 720px;
    --hero-btn-w: 330px;
    --hero-btn-h: 64px;
    --hero-btn-size: 18px;
    --hero-trust-size: 16px;
  }

  .nd-hero-marquee {
    --mq-text-size: 20px;
    --mq-padding-y: 14px;
  }
}

@media (min-width: 2501px) and (max-width: 3000px) {
  .nd-hero-wrap {
    --page-header-h: 150px;
    --hero-min-h: calc(100vh - var(--page-header-h));
    --hero-pad-x: 160px;
    --hero-pad-y-top: 180px;
    --hero-pad-y-bot: 170px;
    --hero-title-size: 160px;
    --hero-sub-size: 28px;
    --hero-sub-max-w: 880px;
    --hero-btn-w: 390px;
    --hero-btn-h: 72px;
    --hero-btn-size: 22px;
    --hero-trust-size: 19px;
  }

  .nd-hero-marquee {
    --mq-text-size: 26px;
    --mq-padding-y: 16px;
  }
}

@media (min-width: 3001px) and (max-width: 3839px) {
  .nd-hero-wrap {
    --page-header-h: 200px;
    --hero-min-h: calc(100vh - var(--page-header-h));
    --hero-pad-x: 200px;
    --hero-pad-y-top: 220px;
    --hero-pad-y-bot: 200px;
    --hero-title-size: 200px;
    --hero-sub-size: 34px;
    --hero-sub-max-w: 1100px;
    --hero-btn-w: 460px;
    --hero-btn-h: 84px;
    --hero-btn-size: 26px;
    --hero-trust-size: 23px;
  }

  .nd-hero-marquee {
    --mq-text-size: 32px;
    --mq-padding-y: 18px;
  }
}

@media (min-width: 3840px) {
  .nd-hero-wrap {
    --page-header-h: 250px;
    --hero-min-h: calc(100vh - var(--page-header-h));
    --hero-pad-x: 240px;
    --hero-pad-y-top: 260px;
    --hero-pad-y-bot: 240px;
    --hero-title-size: 250px;
    --hero-sub-size: 42px;
    --hero-sub-max-w: 1400px;
    --hero-btn-w: 560px;
    --hero-btn-h: 96px;
    --hero-btn-size: 32px;
    --hero-trust-size: 28px;
  }

  .nd-hero-marquee {
    --mq-text-size: 40px;
    --mq-padding-y: 22px;
  }
}

/* ==============================================================================
   13. REDUCED MOTION
   Apaga animaciones si el usuario lo tiene configurado.
   ============================================================================== */

@media (prefers-reduced-motion: reduce) {
  .nd-hero-image,
  .nd-hero-image img,
  .nd-hero-image::before,
  .nd-hero-media::before,
  .nd-hero-wrap::after,
  .nd-hero-badge,
  .nd-hero-badge .nd-badge-star,
  .nd-hero-title,
  .nd-hero-sub,
  .nd-hero-actions,
  .nd-hero-trust,
  .nd-hero-btn-cot .elementor-button,
  .nd-hero-btn-what .elementor-button,
  .nd-marquee-track {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5e72e89 *//* ==============================================================================
   ND WHY — Nivel Delta v1.2 FINAL
   ==============================================================================
   Objetivo:
   Seccion "Por que elegirnos" basada en la referencia visual:
   "por que elegirnos .png".

   Ubicacion recomendada:
   Elementor -> Site Settings -> Custom CSS

   Notas:
   - Mantiene los 11 breakpoints del sistema header/hero.
   - Usa imagenes PNG transparentes para los iconos principales.
   - El checklist conserva SVG inline para los checks.
   - Mobile/tablet apilan columnas y resetean el margen del checklist.
   ============================================================================== */


/* ==============================================================================
   01. VARIABLES BASE
   Control central de colores, layout, tipografia y tamanos.
   ============================================================================== */

.nd-why-wrap {
  /* 01.1 Paleta */
  --why-bg: #050505; /* Fondo base negro profundo */
  --why-gold: #c8a44a; /* Dorado principal */
  --why-gold-soft: #d8b866; /* Dorado claro por si se usa en hovers */
  --why-text: #f6f2ea; /* Texto principal claro */
  --why-text-dim: rgba(246, 242, 234, 0.72); /* Texto secundario */
  --why-text-soft: rgba(246, 242, 234, 0.56); /* Texto terciario */
  --why-border: rgba(246, 242, 234, 0.16); /* Borde suave */
  --why-border-strong: rgba(246, 242, 234, 0.22); /* Borde visible de cajas */

  /* 01.2 Layout general */
  --why-max-w: 1810px; /* Ancho maximo interno */
  --why-pad-x: 64px; /* Padding horizontal de la seccion */
  --why-pad-y-top: 15px; /* Padding superior: controla espacio bajo el marquee */
  --why-pad-y-bot: 10px; /* Padding inferior de la seccion */
  --why-inner-gap: 86px; /* Separacion entre columna izquierda y derecha */
  --why-copy-w: 52%; /* Proporcion de columna izquierda */
  --why-checks-w: 48%; /* Proporcion de columna derecha */

  /* 01.3 Tipografia */
  --why-kicker-size: 14px; /* Tamano del kicker */
  --why-kicker-letter: 5px; /* Espaciado del kicker */
  --why-title-size: 64px; /* Tamano del titulo */
  --why-title-line: 0.98; /* Interlineado compacto del titulo */
  --why-desc-size: 18px; /* Tamano de parrafos */
  --why-desc-line: 1.5; /* Interlineado de parrafos */

  /* 01.4 Componentes */
  --why-metric-h: 174px; /* Alto minimo de las cajas metricas */
  --why-metric-gap: 22px; /* Separacion entre metricas */
  --why-check-h: 105px; /* Alto minimo de filas del checklist */
  --why-strip-gap: 54px; /* Separacion entre items del strip inferior */
}


/* ==============================================================================
   02. WRAP PRINCIPAL
   Fondo negro con luces sutiles y padding general.
   ============================================================================== */

.nd-why-wrap {
  position: relative !important; /* Permite pseudo-elementos internos */
  overflow: hidden !important; /* Recorta brillos fuera de la seccion */
  isolation: isolate !important; /* Aisla z-index y blends del fondo */
  background:
    radial-gradient(circle at 18% 2%, rgba(200, 164, 74, 0.075), transparent 28%),
    radial-gradient(circle at 78% 16%, rgba(255, 255, 255, 0.035), transparent 30%),
    linear-gradient(180deg, #060606 0%, #040404 100%) !important; /* Fondo cinematografico */
  padding: var(--why-pad-y-top) var(--why-pad-x) var(--why-pad-y-bot) !important; /* Espaciado global */
}

.nd-why-wrap::before {
  content: "" !important; /* Crea textura de fondo */
  position: absolute !important; /* Cubre toda la seccion */
  inset: 0 !important; /* Ocupa todo el wrap */
  z-index: -1 !important; /* Queda detras del contenido */
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.035), transparent 31%, rgba(200, 164, 74, 0.025) 70%, transparent),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 160px) !important; /* Lineas tenues */
  opacity: 0.35 !important; /* Mantiene el efecto discreto */
  pointer-events: none !important; /* No bloquea clics */
}


/* ==============================================================================
   03. INNER
   Distribuye la columna editorial izquierda y el checklist derecho.
   ============================================================================== */

.nd-why-inner {
  position: relative !important; /* Mantiene el contenido sobre el fondo */
  z-index: 1 !important; /* Prioridad sobre el pseudo-elemento */
  display: flex !important; /* Activa columnas */
  flex-direction: row !important; /* Columnas en horizontal */
  align-items: flex-start !important; /* Alinea columnas arriba */
  justify-content: space-between !important; /* Separa columnas */
  gap: var(--why-inner-gap) !important; /* Separacion real entre columnas */
  width: 100% !important; /* Ocupa todo el ancho disponible */
  max-width: var(--why-max-w) !important; /* Limita ancho interno */
  margin: 0 auto !important; /* Centra el contenido */
  padding: 0 !important; /* Limpia padding de Elementor */
}

.nd-why-copy {
  flex: 0 0 calc(var(--why-copy-w) - (var(--why-inner-gap) / 2)) !important; /* Ancho flexible corregido por gap */
  width: calc(var(--why-copy-w) - (var(--why-inner-gap) / 2)) !important; /* Refuerzo de ancho */
  min-width: 0 !important; /* Evita overflow de texto */
}

.nd-why-checks {
  flex: 0 0 calc(var(--why-checks-w) - (var(--why-inner-gap) / 2)) !important; /* Ancho flexible corregido por gap */
  width: calc(var(--why-checks-w) - (var(--why-inner-gap) / 2)) !important; /* Refuerzo de ancho */
  min-width: 0 !important; /* Evita overflow */
  margin-top: 60px !important; /* Baja el checklist para igualar la referencia */
}


/* ==============================================================================
   04. KICKER
   Linea dorada + texto espaciado superior.
   ============================================================================== */

.nd-why-kicker {
  display: inline-flex !important; /* Permite linea + texto en una fila */
  align-items: center !important; /* Centra verticalmente la linea */
  gap: 18px !important; /* Separacion entre linea y texto */
  margin: 0 0 10px !important; /* Espacio bajo el kicker */
  color: var(--why-gold) !important; /* Texto dorado */
  font-family: "Outfit", system-ui, sans-serif !important; /* Fuente principal */
  font-size: var(--why-kicker-size) !important; /* Tamano responsive */
  font-weight: 500 !important; /* Peso medio */
  line-height: 1 !important; /* Altura compacta */
  letter-spacing: var(--why-kicker-letter) !important; /* Tracking premium */
  text-transform: uppercase !important; /* Mayusculas */
}

.nd-why-kicker::before {
  content: "" !important; /* Crea la linea decorativa */
  width: 34px !important; /* Largo de linea */
  height: 1px !important; /* Grosor de linea */
  background: var(--why-gold) !important; /* Color dorado */
}


/* ==============================================================================
   05. TITULO
   Titulo principal con segunda linea dorada.
   ============================================================================== */

.nd-why-title {
  margin: 0 0 15px !important; /* Espacio bajo titulo */
  padding: 0 !important; /* Limpia padding */
  color: var(--why-text) !important; /* Primera linea clara */
  font-family: "Outfit", system-ui, sans-serif !important; /* Fuente */
  font-size: var(--why-title-size) !important; /* Tamano responsive */
  font-weight: 700 !important; /* Peso fuerte */
  line-height: var(--why-title-line) !important; /* Interlineado */
  letter-spacing: 0 !important; /* Sin tracking negativo */
  text-transform: uppercase !important; /* Mayusculas */
}

.nd-why-title span {
  color: var(--why-gold) !important; /* Segunda linea dorada */
}


/* ==============================================================================
   06. DESCRIPCION
   Bloque de parrafos explicativos.
   ============================================================================== */

.nd-why-desc {
  max-width: 870px !important; /* Ancho maximo del texto */
  margin: 0 0 15px !important; /* Separacion antes de metricas */
}

.nd-why-desc p {
  margin: 0 0 24px !important; /* Separacion entre parrafos */
  color: var(--why-text-dim) !important; /* Texto secundario */
  font-family: "Outfit", system-ui, sans-serif !important; /* Fuente */
  font-size: var(--why-desc-size) !important; /* Tamano responsive */
  font-weight: 400 !important; /* Peso normal */
  line-height: var(--why-desc-line) !important; /* Lectura comoda */
}

.nd-why-desc p:last-child {
  margin-bottom: 0 !important; /* Quita margen del ultimo parrafo */
}

.nd-why-desc strong {
  color: var(--why-text) !important; /* Resalta frases clave */
  font-weight: 700 !important; /* Da fuerza al resaltado */
}


/* ==============================================================================
   07. METRICAS
   Cuatro cajas superiores con iconos PNG, valor y texto.
   ============================================================================== */

.nd-why-metrics {
  display: grid !important; /* Crea rejilla */
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* Cuatro columnas */
  gap: var(--why-metric-gap) !important; /* Separacion entre cajas */
  width: 100% !important; /* Ocupa columna completa */
  max-width: 890px !important; /* Igual ancho visual que la cita */
  margin: 0 0 10px !important; /* Espacio antes de quote */
}

.nd-why-metric {
  min-height: var(--why-metric-h) !important; /* Alto uniforme */
  padding: 22px 16px 18px !important; /* Espaciado interno */
  display: flex !important; /* Apila icono/texto */
  flex-direction: column !important; /* Direccion vertical */
  align-items: center !important; /* Centra horizontal */
  justify-content: center !important; /* Centra vertical */
  text-align: center !important; /* Texto centrado */
  border: 1px solid var(--why-border-strong) !important; /* Borde fino */
  background: rgba(255, 255, 255, 0.012) !important; /* Fondo sutil */
}

.nd-why-metric-icon {
  margin: 0 0 1px !important; /* Ajusta espacio bajo icono */
  color: var(--why-gold) !important; /* Fallback si hubiera SVG */
  font-size: 48px !important; /* Fallback si hubiera texto */
  line-height: 1 !important; /* Compacta icono */
}

.nd-why-metric-icon-img img {
  width: 125px !important; /* Tamano desktop de iconos PNG */
  height: 125px !important; /* Alto desktop de iconos PNG */
  display: block !important; /* Evita espacio inline */
  object-fit: contain !important; /* Mantiene proporcion */
}

.nd-why-metric-value {
  margin: 0 0 8px !important; /* Separacion con descripcion */
  color: var(--why-text) !important; /* Texto principal */
  font-family: "Outfit", system-ui, sans-serif !important; /* Fuente */
  font-size: 22px !important; /* Tamano del valor */
  font-weight: 800 !important; /* Peso fuerte */
  line-height: 1.05 !important; /* Compacto */
}

.nd-why-metric-text {
  color: var(--why-text-dim) !important; /* Texto secundario */
  font-family: "Outfit", system-ui, sans-serif !important; /* Fuente */
  font-size: 16px !important; /* Tamano descripcion */
  font-weight: 400 !important; /* Peso normal */
  line-height: 1.35 !important; /* Legibilidad */
}


/* ==============================================================================
   08. QUOTE
   Caja de cita con barra dorada izquierda.
   ============================================================================== */

.nd-why-quote {
  max-width: 890px !important; /* Alinea con metricas */
  min-height: 178px !important; /* Alto estilo referencia */
  display: flex !important; /* Comilla + texto en fila */
  align-items: flex-start !important; /* Alinea arriba */
  gap: 28px !important; /* Separacion comilla/texto */
  padding: 35px 42px 30px !important; /* Espaciado interno */
  border: 1px solid var(--why-border-strong) !important; /* Borde general */
  border-left: 5px solid var(--why-gold) !important; /* Barra dorada */
  background: rgba(255, 255, 255, 0.012) !important; /* Fondo sutil */
}

.nd-why-quote-mark {
  flex: 0 0 auto !important; /* La comilla no se encoge */
  color: var(--why-gold) !important; /* Comilla dorada */
  font-family: Georgia, serif !important; /* Forma editorial */
  font-size: 76px !important; /* Tamano de comilla */
  line-height: 0.8 !important; /* Compacta altura */
}

.nd-why-quote-content p {
  margin: 0 0 25px !important; /* Separacion con firma */
  color: var(--why-text) !important; /* Texto claro */
  font-family: "Outfit", system-ui, sans-serif !important; /* Fuente */
  font-size: 19px !important; /* Tamano cita */
  font-style: italic !important; /* Estilo de cita */
  font-weight: 400 !important; /* Peso normal */
  line-height: 1.72 !important; /* Lectura comoda */
}

.nd-why-quote-content span {
  color: var(--why-gold) !important; /* Firma dorada */
  font-family: "Outfit", system-ui, sans-serif !important; /* Fuente */
  font-size: 15px !important; /* Tamano firma */
  font-weight: 500 !important; /* Peso medio */
  letter-spacing: 3px !important; /* Tracking amplio */
  text-transform: uppercase !important; /* Mayusculas */
}


/* ==============================================================================
   09. CHECKLIST
   Columna derecha con filas altas, checks SVG y divisores.
   ============================================================================== */

.nd-why-check-list {
  width: 100% !important; /* Ocupa columna derecha */
  border: 1px solid var(--why-border-strong) !important; /* Marco exterior */
  background: rgba(255, 255, 255, 0.01) !important; /* Fondo casi negro */
}

.nd-why-check {
  min-height: var(--why-check-h) !important; /* Alto uniforme de filas */
  display: flex !important; /* Icono + texto en fila */
  align-items: center !important; /* Centrado vertical */
  gap: 24px !important; /* Separacion check/texto */
  padding: 25px 38px !important; /* Espaciado interno */
  border-bottom: 1px solid var(--why-border-strong) !important; /* Divisor horizontal */
}

.nd-why-check:last-child {
  border-bottom: 0 !important; /* Quita divisor final */
}

.nd-why-check-icon {
  flex: 0 0 25px !important; /* Ancho fijo del icono */
  width: 30px !important; /* Refuerzo de ancho */
  color: var(--why-gold) !important; /* Check dorado */
  font-family: "Outfit", system-ui, sans-serif !important; /* Fallback */
  font-size: 32px !important; /* Fallback */
  font-weight: 800 !important; /* Fallback fuerte */
  line-height: 1 !important; /* Compacto */
  text-align: center !important; /* Centrado */
}

.nd-why-check-icon svg {
  width: 28px !important; /* Ancho del SVG */
  height: 28px !important; /* Alto del SVG */
  display: block !important; /* Evita espacio inline */
  fill: none !important; /* Sin relleno */
  stroke: currentColor !important; /* Hereda dorado */
  stroke-width: 3 !important; /* Grosor del check */
  stroke-linecap: square !important; /* Punta cuadrada */
  stroke-linejoin: miter !important; /* Union angulada */
}

.nd-why-check-text {
  color: var(--why-text) !important; /* Texto claro */
  font-family: "Outfit", system-ui, sans-serif !important; /* Fuente */
  font-size: 20px !important; /* Tamano desktop */
  font-weight: 400 !important; /* Peso normal */
  line-height: 1.35 !important; /* Legibilidad */
}


/* ==============================================================================
   10. STRIP INFERIOR
   Cuatro atributos al pie separados por lineas verticales.
   ============================================================================== */

.nd-why-strip {
  position: relative !important; /* Permite separadores */
  z-index: 1 !important; /* Sobre fondo */
  width: 100% !important; /* Ocupa ancho */
  max-width: var(--why-max-w) !important; /* Alinea con inner */
  margin: 5px auto 0 !important; /* Separacion superior pequena */
  display: grid !important; /* Grid de cuatro items */
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* Cuatro columnas */
  gap: var(--why-strip-gap) !important; /* Separacion entre items */
}

.nd-why-strip-item {
  position: relative !important; /* Base para divisor */
  min-width: 0 !important; /* Evita overflow */
  display: flex !important; /* Icono + texto */
  align-items: center !important; /* Centrado vertical */
  gap: 20px !important; /* Separacion icono/texto */
}

.nd-why-strip-item:not(:last-child)::after {
  content: "" !important; /* Divisor vertical */
  position: absolute !important; /* Posiciona divisor */
  top: 50% !important; /* Centra vertical */
  right: calc(var(--why-strip-gap) * -0.5) !important; /* Lo coloca entre items */
  width: 1px !important; /* Grosor divisor */
  height: 58px !important; /* Alto divisor */
  background: rgba(246, 242, 234, 0.32) !important; /* Color divisor */
  transform: translateY(-50%) !important; /* Ajuste de centrado */
}

.nd-why-strip-icon {
  flex: 0 0 auto !important; /* Icono no se encoge */
  color: var(--why-gold) !important; /* Fallback dorado */
  font-size: 38px !important; /* Fallback si es texto */
  line-height: 1 !important; /* Compacto */
}

.nd-why-strip-icon-img img {
  width: 44px !important; /* Tamano de iconos PNG del strip */
  height: 44px !important; /* Alto de iconos PNG del strip */
  display: block !important; /* Evita espacio inline */
  object-fit: contain !important; /* Mantiene proporcion */
}

.nd-why-strip-text {
  display: flex !important; /* Permite dos lineas */
  flex-direction: column !important; /* Apila strong/em */
  gap: 6px !important; /* Separacion entre lineas */
  min-width: 0 !important; /* Evita overflow */
  color: var(--why-text) !important; /* Texto claro */
  font-family: "Outfit", system-ui, sans-serif !important; /* Fuente */
  letter-spacing: 2px !important; /* Tracking editorial */
  text-transform: uppercase !important; /* Mayusculas */
}

.nd-why-strip-text strong,
.nd-why-strip-text em {
  display: block !important; /* Cada linea independiente */
  font-size: 16px !important; /* Tamano base */
  font-style: normal !important; /* Evita cursiva en em */
  font-weight: 500 !important; /* Peso medio */
  line-height: 1.2 !important; /* Compacto */
}

.nd-why-strip-text strong {
  color: var(--why-text-dim) !important; /* Primera linea atenuada */
}

.nd-why-strip-text em {
  color: var(--why-text) !important; /* Segunda linea mas fuerte */
}


/* ==============================================================================
   11. RESPONSIVE
   Breakpoints alineados al sistema del header/hero.
   ============================================================================== */

@media (max-width: 480px) {
  .nd-why-wrap {
    --why-pad-x: 20px; /* Padding lateral mobile pequeno */
    --why-pad-y-top: 52px; /* Aire superior mobile */
    --why-pad-y-bot: 50px; /* Aire inferior mobile */
    --why-inner-gap: 34px; /* Separacion entre bloques apilados */
    --why-copy-w: 100%; /* Columna izquierda a ancho total */
    --why-checks-w: 100%; /* Checklist a ancho total */
    --why-kicker-size: 11px; /* Kicker compacto */
    --why-kicker-letter: 2.8px; /* Menos tracking para que quepa */
    --why-title-size: 42px; /* Titulo mobile */
    --why-desc-size: 15px; /* Parrafos mobile */
    --why-metric-h: auto; /* Cajas adaptan alto */
    --why-check-h: auto; /* Checks adaptan alto */
    --why-strip-gap: 22px; /* Gap inferior reducido */
  }

  .nd-why-inner {
    flex-direction: column !important; /* Apila columnas */
  }

  .nd-why-copy,
  .nd-why-checks {
    width: 100% !important; /* Ancho total */
    flex-basis: 100% !important; /* Base completa */
  }

  .nd-why-checks {
    margin-top: 0 !important; /* Quita bajada desktop del checklist */
  }

  .nd-why-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* Dos columnas */
    gap: 12px !important; /* Gap compacto */
  }

  .nd-why-metric {
    padding: 18px 12px !important; /* Reduce padding */
  }

  .nd-why-metric-icon {
    font-size: 30px !important; /* Fallback compacto */
  }

  .nd-why-metric-icon-img img {
    width: 76px !important; /* Iconos PNG mobile pequeno */
    height: 76px !important; /* Alto iconos PNG */
  }

  .nd-why-metric-value {
    font-size: 17px !important; /* Valor compacto */
  }

  .nd-why-metric-text {
    font-size: 13px !important; /* Texto compacto */
  }

  .nd-why-quote {
    min-height: 0 !important; /* Quita alto fijo */
    padding: 24px 20px !important; /* Padding mobile */
    gap: 14px !important; /* Menos espacio comilla/texto */
  }

  .nd-why-quote-mark {
    font-size: 46px !important; /* Comilla pequena */
  }

  .nd-why-quote-content p {
    font-size: 15px !important; /* Cita mobile */
  }

  .nd-why-check {
    padding: 20px !important; /* Checks compactos */
    gap: 16px !important; /* Menor separacion */
  }

  .nd-why-check-text {
    font-size: 15px !important; /* Texto check mobile */
  }

  .nd-why-strip {
    grid-template-columns: 1fr !important; /* Strip en una columna */
    margin-top: 42px !important; /* Aire antes del strip */
  }

  .nd-why-strip-item::after {
    display: none !important; /* Quita separadores verticales */
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .nd-why-wrap {
    --why-pad-x: 26px; /* Padding lateral mobile normal */
    --why-pad-y-top: 60px; /* Aire superior */
    --why-pad-y-bot: 56px; /* Aire inferior */
    --why-inner-gap: 38px; /* Separacion apilada */
    --why-copy-w: 100%; /* Copy full width */
    --why-checks-w: 100%; /* Checks full width */
    --why-title-size: 50px; /* Titulo mobile normal */
    --why-desc-size: 16px; /* Parrafos mobile normal */
    --why-check-h: auto; /* Checks adaptan altura */
  }

  .nd-why-inner {
    flex-direction: column !important; /* Apila columnas */
  }

  .nd-why-copy,
  .nd-why-checks {
    width: 100% !important; /* Ancho total */
    flex-basis: 100% !important; /* Base total */
  }

  .nd-why-checks {
    margin-top: 0 !important; /* Quita bajada desktop */
  }

  .nd-why-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* Dos columnas */
  }

  .nd-why-metric-icon-img img {
    width: 86px !important; /* Iconos mobile normal */
    height: 86px !important; /* Alto iconos */
  }

  .nd-why-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* Strip en dos columnas */
  }

  .nd-why-strip-item::after {
    display: none !important; /* Quita divisores en mobile */
  }
}

@media (max-width: 767px) and (max-height: 450px) {
  .nd-why-wrap {
    --why-pad-y-top: 44px; /* Reduce alto en landscape */
    --why-pad-y-bot: 42px; /* Reduce padding inferior */
    --why-title-size: 38px; /* Titulo mas bajo */
    --why-desc-size: 14px; /* Texto mas compacto */
  }

  .nd-why-checks {
    margin-top: 0 !important; /* Evita hueco en landscape */
  }

  .nd-why-metric-icon-img img {
    width: 68px !important; /* Iconos mas pequenos en landscape */
    height: 68px !important; /* Alto iconos */
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .nd-why-wrap {
    --why-pad-x: 42px; /* Padding tablet */
    --why-pad-y-top: 70px; /* Aire superior tablet */
    --why-pad-y-bot: 62px; /* Aire inferior tablet */
    --why-inner-gap: 44px; /* Separacion apilada */
    --why-copy-w: 100%; /* Copy full width */
    --why-checks-w: 100%; /* Checks full width */
    --why-title-size: 58px; /* Titulo tablet */
  }

  .nd-why-inner {
    flex-direction: column !important; /* Apila en tablet */
  }

  .nd-why-copy,
  .nd-why-checks {
    width: 100% !important; /* Ancho completo */
    flex-basis: 100% !important; /* Base completa */
  }

  .nd-why-checks {
    margin-top: 0 !important; /* Quita bajada desktop */
  }

  .nd-why-metric-icon-img img {
    width: 96px !important; /* Iconos tablet */
    height: 96px !important; /* Alto iconos */
  }

  .nd-why-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* Strip en dos columnas */
  }

  .nd-why-strip-item::after {
    display: none !important; /* Quita divisores verticales */
  }
}

@media (min-width: 1025px) and (max-width: 1199px) {
  .nd-why-wrap {
    --why-pad-x: 54px; /* Padding tablet grande */
    --why-inner-gap: 46px; /* Gap mas compacto */
    --why-title-size: 56px; /* Titulo tablet grande */
    --why-desc-size: 16px; /* Texto compacto */
    --why-check-h: 78px; /* Checks mas bajos */
  }

  .nd-why-check-text {
    font-size: 16px !important; /* Texto checklist tablet grande */
  }
}

@media (min-width: 1200px) and (max-width: 1440px) {
  .nd-why-wrap {
    --why-pad-x: 60px; /* Padding laptop */
    --why-inner-gap: 58px; /* Gap laptop */
    --why-title-size: 58px; /* Titulo laptop */
    --why-desc-size: 16px; /* Texto laptop */
    --why-check-h: 82px; /* Alto check laptop */
  }

  .nd-why-check-text {
    font-size: 17px !important; /* Texto checklist laptop */
  }
}

@media (min-width: 1441px) and (max-width: 2000px) {
  .nd-why-wrap {
    --why-pad-x: 64px; /* Padding monitor estandar */
    --why-title-size: 64px; /* Titulo monitor estandar */
  }
}

@media (min-width: 2001px) and (max-width: 2500px) {
  .nd-why-wrap {
    --why-max-w: 2200px; /* Ancho interno 2K */
    --why-pad-x: 96px; /* Padding 2K */
    --why-pad-y-top: 78px; /* Padding superior 2K */
    --why-pad-y-bot: 72px; /* Padding inferior 2K */
    --why-inner-gap: 96px; /* Gap 2K */
    --why-title-size: 84px; /* Titulo 2K */
    --why-desc-size: 23px; /* Texto 2K */
    --why-check-h: 126px; /* Checks 2K */
  }

  .nd-why-check-text {
    font-size: 24px !important; /* Texto checklist 2K */
  }
}

@media (min-width: 2501px) and (max-width: 3000px) {
  .nd-why-wrap {
    --why-max-w: 2680px; /* Ancho QHD */
    --why-pad-x: 126px; /* Padding QHD */
    --why-pad-y-top: 96px; /* Superior QHD */
    --why-pad-y-bot: 88px; /* Inferior QHD */
    --why-inner-gap: 120px; /* Gap QHD */
    --why-title-size: 104px; /* Titulo QHD */
    --why-desc-size: 29px; /* Texto QHD */
    --why-check-h: 152px; /* Checks QHD */
  }

  .nd-why-check-text {
    font-size: 30px !important; /* Texto checklist QHD */
  }
}

@media (min-width: 3001px) and (max-width: 3839px) {
  .nd-why-wrap {
    --why-max-w: 3400px; /* Ancho pre-4K */
    --why-pad-x: 168px; /* Padding pre-4K */
    --why-pad-y-top: 124px; /* Superior pre-4K */
    --why-pad-y-bot: 112px; /* Inferior pre-4K */
    --why-inner-gap: 150px; /* Gap pre-4K */
    --why-title-size: 132px; /* Titulo pre-4K */
    --why-desc-size: 36px; /* Texto pre-4K */
    --why-check-h: 196px; /* Checks pre-4K */
  }

  .nd-why-check-text {
    font-size: 38px !important; /* Texto checklist pre-4K */
  }
}

@media (min-width: 3840px) {
  .nd-why-wrap {
    --why-max-w: 3600px; /* Ancho 4K */
    --why-pad-x: 220px; /* Padding 4K */
    --why-pad-y-top: 150px; /* Superior 4K */
    --why-pad-y-bot: 134px; /* Inferior 4K */
    --why-inner-gap: 180px; /* Gap 4K */
    --why-title-size: 164px; /* Titulo 4K */
    --why-desc-size: 44px; /* Texto 4K */
    --why-check-h: 240px; /* Checks 4K */
  }

  .nd-why-check-text {
    font-size: 46px !important; /* Texto checklist 4K */
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-21cd8f2 *//* ==============================================================================
   ND DIFERENCIADORES - Nivel Delta
   Version final responsive para Elementor
   ============================================================================== */

.nd-dif-wrap {
  --dif-bg: #050505;
  --dif-bg-soft: #080808;
  --dif-gold: #c8a44a;
  --dif-gold-bright: #f0b327;
  --dif-text: #f6f2ea;
  --dif-text-dim: rgba(246, 242, 234, 0.74);
  --dif-text-soft: rgba(246, 242, 234, 0.56);
  --dif-border: rgba(200, 164, 74, 0.28);
  --dif-border-strong: rgba(200, 164, 74, 0.46);
  --dif-ease: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  --dif-max-w: 1840px;
  --dif-pad-x: 30px;
  --dif-pad-y-top: 26px;
  --dif-pad-y-bot: 18px;
  --dif-panel-pad: 0;
  --dif-gap: 10px;

  --dif-heading-w: 36%;
  --dif-features-w: 64%;
  --dif-title-size: 72px;
  --dif-title-line: 0.9;
  --dif-kicker-size: 13px;
  --dif-kicker-letter: 4px;
  --dif-intro-size: 16px;
  --dif-intro-line: 1.62;

  --dif-feature-h: 300px;
  --dif-feature-img-h: 138px;
  --dif-feature-pad: 0;
  --dif-feature-title-size: 12px;
  --dif-feature-text-size: 13px;

  --dif-stats-h: 106px;
  --dif-stat-icon: 58px;
  --dif-stat-value-size: 33px;
  --dif-stat-label-size: 14px;
  --dif-stats-drone-w: 640px;
  --dif-reasons-w: 46%;
  --dif-showcase-w: 54%;
  --dif-reason-card-h: 112px;
  --dif-reason-pad: 14px;
  --dif-reason-icon: 54px;
  --dif-reason-num-size: 20px;
  --dif-reason-title-size: 16px;
  --dif-reason-text-size: 11.5px;
  --dif-reasons-kicker-size: 35px;
  --dif-showcase-h: 486px;

  --dif-cta-h: 88px;
  --dif-cta-icon: 54px;
  --dif-cta-title-size: 18px;
  --dif-cta-text-size: 13px;
  --dif-cta-objective-w: 430px;
  --dif-cta-objective-size: 25px;
  --dif-cta-copy-w: 560px;
  --dif-cta-btn-margin: 0px;
  --dif-btn-w: 280px;
  --dif-btn-h: 48px;

  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.035), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(200, 164, 74, 0.06), transparent 34%),
    linear-gradient(180deg, #040404 0%, #060606 100%) !important;
  padding: var(--dif-pad-y-top) var(--dif-pad-x) var(--dif-pad-y-bot) !important;
}

.nd-dif-wrap::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.028), transparent 28%, rgba(200, 164, 74, 0.025) 74%, transparent),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.01) 0 1px, transparent 1px 160px) !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
}

.nd-dif-inner {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: var(--dif-max-w) !important;
  margin: 0 auto !important;
  padding: var(--dif-panel-pad) !important;
  border: 0 !important;
  background: rgba(0, 0, 0, 0.16) !important;
}

.nd-dif-top {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--dif-gap) !important;
  width: 100% !important;
  margin: 0 !important;
}

.nd-dif-heading {
  width: 100% !important;
  max-width: 760px !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 !important;
}

.nd-dif-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 22px !important;
  color: var(--dif-gold-bright) !important;
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: var(--dif-kicker-size) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: var(--dif-kicker-letter) !important;
  text-transform: uppercase !important;
}

.nd-dif-kicker::before {
  content: "" !important;
  width: 34px !important;
  height: 2px !important;
  background: var(--dif-gold-bright) !important;
}

.nd-dif-title {
  margin: 0 0 22px !important;
  padding: 0 !important;
  color: var(--dif-text) !important;
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: var(--dif-title-size) !important;
  font-weight: 400 !important;
  line-height: var(--dif-title-line) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.nd-dif-title span {
  color: var(--dif-gold) !important;
  font-weight: 700 !important;
}

.nd-dif-intro,
.nd-dif-intro-new {
  max-width: 620px !important;
  margin: 0 !important;
  color: var(--dif-text-dim) !important;
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: var(--dif-intro-size) !important;
  font-weight: 400 !important;
  line-height: var(--dif-intro-line) !important;
}

.nd-dif-feature-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.nd-dif-feature-card {
  min-width: 0 !important;
  min-height: var(--dif-feature-h) !important;
  padding: var(--dif-feature-pad) !important;
  border: 1px solid var(--dif-border-strong) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.006)) !important;
  overflow: hidden !important;
  transition: transform var(--dif-ease), border-color var(--dif-ease), box-shadow var(--dif-ease) !important;
}

.nd-dif-feature-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(240, 179, 39, 0.68) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34) !important;
}

.nd-dif-feature-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 13px 16px 9px !important;
}

.nd-dif-feature-icon {
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--dif-gold-bright) !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.nd-dif-feature-icon-img img {
  width: 46px !important;
  height: 46px !important;
  display: block !important;
  object-fit: contain !important;
  transform: scale(1.55) !important;
  transform-origin: center center !important;
}

.nd-dif-feature-card:first-child .nd-dif-feature-icon-img img {
  transform: scale(1) !important;
}

.nd-dif-feature-icon-drone img {
  transform: scale(1.5) !important;
}

.nd-dif-feature-icon-app img {
  transform: scale(1) !important;
}

.nd-dif-feature-icon-TR img {
  transform: scale(1.3) !important;
}

.nd-dif-feature-head h3 {
  margin: 0 !important;
  color: var(--dif-text) !important;
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: var(--dif-feature-title-size) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.nd-dif-feature-img {
  width: 100% !important;
  height: var(--dif-feature-img-h) !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #020202 !important;
  border-radius: 0 !important;
}

.nd-dif-feature-img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  image-rendering: auto !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  filter: saturate(1.05) contrast(1.08) brightness(1.03) !important;
}

.nd-dif-feature-card p {
  margin: 0 !important;
  padding: 14px 18px 18px !important;
  color: var(--dif-text-dim) !important;
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: var(--dif-feature-text-size) !important;
  font-weight: 400 !important;
  line-height: 1.52 !important;
}

.nd-dif-stats {
  position: relative !important;
  z-index: 5 !important;
  min-height: var(--dif-stats-h) !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) var(--dif-stats-drone-w) !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 0 var(--dif-gap) !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 6px 6px 0 0 !important;
  background:
    linear-gradient(
      90deg,
      rgba(5, 7, 7, 0.98) 0%,
      rgba(5, 7, 7, 0.96) calc(100% - var(--dif-stats-drone-w)),
      rgba(5, 7, 7, 0.62) calc(100% - (var(--dif-stats-drone-w) * 0.82)),
      rgba(5, 7, 7, 0.28) calc(100% - (var(--dif-stats-drone-w) * 0.55)),
      rgba(5, 7, 7, 0.08) calc(100% - (var(--dif-stats-drone-w) * 0.28)),
      rgba(5, 7, 7, 0) 100%
    ) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24) !important;
  overflow: hidden !important;
}

.nd-dif-stats::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: calc(100% - var(--dif-stats-drone-w)) !important;
  border: 1px solid var(--dif-border) !important;
  border-right: 0 !important;
  border-radius: 6px 0 0 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.nd-dif-stat {
  z-index: 2 !important;
}

.nd-dif-stats .nd-dif-stat {
  position: relative !important;
  z-index: 2 !important;
}

.nd-dif-stat {
  position: relative !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  padding: 18px 24px !important;
}

.nd-dif-stat:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  width: 1px !important;
  height: 62px !important;
  background: rgba(200, 164, 74, 0.28) !important;
  transform: translateY(-50%) !important;
}

.nd-dif-stat-icon {
  flex: 0 0 var(--dif-stat-icon) !important;
  width: var(--dif-stat-icon) !important;
  height: var(--dif-stat-icon) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--dif-gold-bright) !important;
  border: 1px solid rgba(200, 164, 74, 0.55) !important;
  border-radius: 999px !important;
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

.nd-dif-stat-icon-img img {
  width: 55px !important;
  height: 55px !important;
  object-fit: contain !important;
  display: block !important;
}

.nd-dif-stat-icon-247 img {
  width: 90px !important;
  height: 90px !important;
}

.nd-dif-stats-drone {
  position: relative !important;
  min-height: var(--dif-stats-h) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  border-left: 1px solid rgba(200, 164, 74, 0.16) !important;
}

.nd-dif-stats-drone::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    radial-gradient(circle at 48% 50%, rgba(36, 106, 122, 0.24), transparent 42%),
    linear-gradient(90deg, rgba(5, 7, 7, 0.4), rgba(10, 20, 22, 0.08)) !important;
}

.nd-dif-stats-drone img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 170px !important;
  height: 92px !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) !important;
  filter: saturate(1.08) contrast(1.08) brightness(0.9) !important;
}

.nd-dif-stat strong {
  display: block !important;
  color: var(--dif-gold-bright) !important;
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: var(--dif-stat-value-size) !important;
  font-weight: 500 !important;
  line-height: 0.95 !important;
}

.nd-dif-stat em {
  display: block !important;
  margin: 6px 0 0 !important;
  color: var(--dif-text) !important;
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: var(--dif-stat-label-size) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.18 !important;
  text-transform: uppercase !important;
}

.nd-dif-body {
  display: flex !important;
  align-items: stretch !important;
  gap: var(--dif-gap) !important;
  width: 100% !important;
  margin: 0 0 var(--dif-gap) !important;
}

.nd-dif-body > .e-con-inner {
  width: 100% !important;
  max-width: 100% !important;
}

.nd-dif-reasons {
  flex: 0 0 calc(var(--dif-reasons-w) - (var(--dif-gap) / 2)) !important;
  width: calc(var(--dif-reasons-w) - (var(--dif-gap) / 2)) !important;
  min-width: 0 !important;
}

.nd-dif-reasons-kicker {
  margin: 18px 0 18px 0 !important;
  text-align: center !important;
  color: var(--dif-gold-bright) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: var(--dif-reasons-kicker-size) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.nd-dif-reason-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.nd-dif-reason-card {
  height: var(--dif-reason-card-h) !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: var(--dif-reason-icon) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 16px !important;
  padding: var(--dif-reason-pad) !important;
  border: 1px solid var(--dif-border) !important;
  background: rgba(255, 255, 255, 0.012) !important;
  overflow: hidden !important;
}

.nd-dif-reason-icon {
  width: var(--dif-reason-icon) !important;
  height: var(--dif-reason-icon) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--dif-gold-bright) !important;
  border: 1px solid rgba(200, 164, 74, 0.42) !important;
  border-radius: 999px !important;
}

.nd-dif-reason-icon img {
  width: calc(var(--dif-reason-icon) - 18px) !important;
  height: calc(var(--dif-reason-icon) - 18px) !important;
  display: block !important;
  object-fit: contain !important;
}

.nd-dif-reason-card strong {
  display: block !important;
  margin: 0 0 3px !important;
  color: var(--dif-gold-bright) !important;
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: var(--dif-reason-num-size) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.nd-dif-reason-card h3 {
  margin: 0 0 7px !important;
  color: var(--dif-text) !important;
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: var(--dif-reason-title-size) !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
}

.nd-dif-reason-card p {
  margin: 0 !important;
  color: var(--dif-text-dim) !important;
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: var(--dif-reason-text-size) !important;
  font-weight: 400 !important;
  line-height: 1.38 !important;
}

.nd-dif-wrap .nd-dif-reason-card strong {
  font-size: var(--dif-reason-num-size) !important;
  line-height: 1 !important;
}

.nd-dif-wrap .nd-dif-reason-card h3,
.nd-dif-wrap .nd-dif-reason-card .elementor-heading-title {
  font-size: var(--dif-reason-title-size) !important;
  line-height: 1.12 !important;
  margin: 0 0 7px !important;
}

.nd-dif-wrap .nd-dif-reason-card p,
.nd-dif-wrap .nd-dif-reason-card .elementor-widget-text-editor,
.nd-dif-wrap .nd-dif-reason-card .elementor-widget-text-editor p {
  font-size: var(--dif-reason-text-size) !important;
  line-height: 1.38 !important;
  margin: 0 !important;
}

.nd-dif-showcase {
  position: relative !important;
  z-index: 1 !important;
  flex: 0 0 calc(var(--dif-showcase-w) - (var(--dif-gap) / 2)) !important;
  width: calc(var(--dif-showcase-w) - (var(--dif-gap) / 2)) !important;
  max-width: calc(var(--dif-showcase-w) - (var(--dif-gap) / 2)) !important;
  min-width: 0 !important;
  min-height: var(--dif-showcase-h) !important;
  overflow: hidden !important;
  border: 1px solid var(--dif-border) !important;
  border-top: 0 !important;
  background: #020202 !important;
}

.nd-dif-showcase::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 24%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.08) 28%, rgba(0, 0, 0, 0) 58%) !important;
  pointer-events: none !important;
}

.nd-dif-showcase .elementor-widget-container {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nd-dif-showcase img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: var(--dif-showcase-h) !important;
  object-fit: cover !important;
  object-position: center top !important;
}

.nd-dif-cta {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--dif-cta-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 30px !important;
  margin: 0 !important;
  padding: 18px 34px !important;
  border-radius: 6px !important;
  border: 1px solid var(--dif-border) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.006)),
    rgba(5, 7, 7, 0.92) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28) !important;
}

.nd-dif-cta::before {
  content: none !important;
  display: none !important;
}

/* CTA - texto "OBJETIVO : SU TRANQUILIDAD".
   Lo centra dentro de la primera zona del CTA y agrega el separador vertical. */
.nd-dif-cta-objective,
.nd-dif-cta > :first-child:not(.nd-dif-cta-icon):not(.nd-dif-cta-icon-img) {
  flex: 0 0 var(--dif-cta-objective-w) !important;
  height: calc(var(--dif-cta-h) - 30px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 34px 0 12px !important;
  border-right: 1px solid rgba(200, 164, 74, 0.32) !important;
  color: var(--dif-gold-bright) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: var(--dif-cta-objective-size) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.nd-dif-cta-icon,
.nd-dif-cta-icon-img {
  flex: 0 0 var(--dif-cta-icon) !important;
  width: var(--dif-cta-icon) !important;
  height: var(--dif-cta-icon) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--dif-gold-bright) !important;
}

.nd-dif-cta-icon-img img,
.nd-dif-cta-copy img {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
  display: block !important;
}

.nd-dif-cta-copy {
  min-width: 0 !important;
  flex: 0 1 var(--dif-cta-copy-w) !important;
  color: var(--dif-text) !important;
  font-family: "Outfit", system-ui, sans-serif !important;
}

.nd-dif-cta-copy strong {
  display: block !important;
  font-size: var(--dif-cta-title-size) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

.nd-dif-cta-copy span {
  display: block !important;
  margin-top: 8px !important;
  color: var(--dif-gold-bright) !important;
  font-size: var(--dif-cta-text-size) !important;
  line-height: 1.35 !important;
}

.nd-dif-cta-btn {
  flex: 0 0 var(--dif-btn-w) !important;
  margin-left: -150px !important;
  width: var(--dif-btn-w) !important;
  height: var(--dif-btn-h) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  color: var(--dif-gold-bright) !important;
  border: 1px solid rgba(240, 179, 39, 0.66) !important;
  background: transparent !important;
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: background var(--dif-ease), color var(--dif-ease), border-color var(--dif-ease) !important;
}

.nd-dif-cta-btn:hover {
  color: #050505 !important;
  border-color: var(--dif-gold-bright) !important;
  background: var(--dif-gold-bright) !important;
}

.nd-dif-cta-btn-icon,
.nd-dif-cta-btn span {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.nd-dif-cta-btn-icon img,
.nd-dif-cta-btn span img {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  object-fit: contain !important;
}

@media (min-width: 1200px) {
  .nd-dif-inner {
    display: grid !important;
    grid-template-columns: minmax(0, var(--dif-reasons-w)) minmax(0, var(--dif-showcase-w)) !important;
    grid-template-areas:
      "top top"
      "stats stats"
      "reasons showcase"
      "cta cta" !important;
    column-gap: var(--dif-gap) !important;
    row-gap: 0 !important;
  }

  .nd-dif-top {
    grid-area: top !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: var(--dif-gap) !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .nd-dif-top > .elementor-element:first-child,
  .nd-dif-top > .e-con-inner > .elementor-element:first-child {
    flex: 0 0 calc(var(--dif-heading-w) - (var(--dif-gap) / 2)) !important;
    width: calc(var(--dif-heading-w) - (var(--dif-gap) / 2)) !important;
    max-width: calc(var(--dif-heading-w) - (var(--dif-gap) / 2)) !important;
  }

  .nd-dif-top > .elementor-element:last-child,
  .nd-dif-top > .e-con-inner > .elementor-element:last-child {
    flex: 0 0 calc(var(--dif-features-w) - (var(--dif-gap) / 2)) !important;
    width: calc(var(--dif-features-w) - (var(--dif-gap) / 2)) !important;
    max-width: calc(var(--dif-features-w) - (var(--dif-gap) / 2)) !important;
  }

  .nd-dif-heading {
    width: 100% !important;
    max-width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 0 18px 0 16px !important;
  }

  .nd-dif-feature-grid {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--dif-gap) !important;
  }

  /* [10.8.3] STATS - coloca el widget completo en la fila "stats" del grid.
     Estos .elementor-735 .elementor-element.elementor-element-21cd8f2es detectan el widget externo de Elementor que contiene
     el HTML interno .nd-dif-stats. Si quitamos :has(), Elementor puede dejar
     la barra atrapada en la columna izquierda. */
  .nd-dif-stats,
  .nd-dif-inner > .elementor-element:has(.nd-dif-stats),
  .nd-dif-inner > *:has(> .elementor-widget-container > .nd-dif-stats),
  .nd-dif-inner > *:has(.nd-dif-stats) {
    grid-area: stats !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    z-index: 5 !important;
  }

  /* [10.8.4] BODY - elimina la caja intermedia de Elementor para que
     razones y showcase puedan entrar al grid principal como columnas. */
  .nd-dif-body {
    display: contents !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
  }

  /* [10.8.5] BODY INNER - mismo objetivo que arriba, pero aplicado al
     contenedor interno que Elementor suele agregar. */
  .nd-dif-body > .e-con-inner {
    display: contents !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* [10.8.6] RAZONES - ubica las 6 razones en la columna izquierda y
     les da la misma altura visual que la parte inferior del showcase. */
  .nd-dif-body .nd-dif-reasons,
  .nd-dif-reasons {
    grid-area: reasons !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    height: var(--dif-showcase-h) !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 2 !important;
  }

  /* [10.8.7] GRID DE RAZONES - mantiene 3 filas compactas usando la
     variable --dif-reason-card-h. */
  .nd-dif-reasons .nd-dif-reason-grid,
  .nd-dif-body .nd-dif-reason-grid {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    grid-template-rows: repeat(3, var(--dif-reason-card-h)) !important;
    align-content: start !important;
  }

  /* [10.8.8] TARJETAS DE RAZONES - fuerza altura fija para que no se
     estiren y no empujen el CTA. */
  .nd-dif-reasons .nd-dif-reason-card,
  .nd-dif-body .nd-dif-reason-card {
    height: var(--dif-reason-card-h) !important;
    min-height: 0 !important;
  }

  /* [10.8.9] SHOWCASE - hace que la imagen derecha cubra la fila de stats
     y la fila de razones, quedando integrada debajo de la barra. */
  .nd-dif-body .nd-dif-showcase,
  .nd-dif-showcase {
    grid-column: 2 !important;
    grid-row: 2 / 4 !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: calc(var(--dif-showcase-h) + var(--dif-stats-h)) !important;
    min-height: calc(var(--dif-showcase-h) + var(--dif-stats-h)) !important;
    margin: 0 !important;
    border-left: 1px solid var(--dif-border) !important;
    border-top: 1px solid var(--dif-border) !important;
    z-index: 1 !important;
  }

  /* [10.8.10] IMAGEN SHOWCASE - llena todo el alto asignado al showcase. */
  .nd-dif-body .nd-dif-showcase img,
  .nd-dif-showcase img {
    height: 100% !important;
    object-position: center top !important;
  }

  /* [10.8.11] CTA - coloca el widget completo del CTA debajo de razones
     y showcase. El margin-top baja la barra para que no se encime. */
  .nd-dif-cta,
  .nd-dif-inner > .elementor-element:has(.nd-dif-cta),
  .nd-dif-inner > *:has(> .elementor-widget-container > .nd-dif-cta),
  .nd-dif-inner > *:has(.nd-dif-cta) {
    grid-area: cta !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 40px !important;
  }
}

@media (max-width: 1199px) {
  .nd-dif-top,
  .nd-dif-body,
  .nd-dif-body > .e-con-inner,
  .nd-dif-cta {
    display: flex !important;
    flex-direction: column !important;
  }

  /* CTA RESPONSIVO - libera el bloque "OBJETIVO" del ancho fijo de escritorio
     para que no desborde en tablet ni en movil. */
  .nd-dif-cta-objective,
  .nd-dif-cta > :first-child:not(.nd-dif-cta-icon):not(.nd-dif-cta-icon-img) {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 38px !important;
    justify-content: center !important;
    padding: 0 0 14px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(200, 164, 74, 0.32) !important;
    white-space: normal !important;
  }

  /* BOTON CTA RESPONSIVO - asegura que cualquier ajuste horizontal de desktop
     no empuje el boton fuera del contenedor. */
  .nd-dif-cta-btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* COPY CTA RESPONSIVO - fuerza el texto central a ocupar su propia fila
     para que no se apriete junto al icono o al boton. */
  .nd-dif-cta-copy {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .nd-dif-cta-copy strong,
  .nd-dif-cta-copy span {
    overflow-wrap: anywhere !important;
  }

  .nd-dif-cta::before {
    width: 100% !important;
    height: auto !important;
    min-height: 34px !important;
    justify-content: flex-start !important;
    padding: 0 0 14px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(200, 164, 74, 0.32) !important;
    font-size: 18px !important;
  }

  .nd-dif-body,
  .nd-dif-body > .e-con-inner {
    display: flex !important;
    gap: var(--dif-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .nd-dif-top > .elementor-element,
  .nd-dif-top > .e-con-inner > .elementor-element,
  .nd-dif-heading,
  .nd-dif-feature-grid,
  .nd-dif-reasons,
  .nd-dif-showcase {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .nd-dif-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .nd-dif-stats {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .nd-dif-stats-drone {
    display: none !important;
  }

  .nd-dif-stat {
    justify-content: flex-start !important;
  }

  .nd-dif-stat::after {
    display: none !important;
  }

  .nd-dif-showcase {
    order: -1 !important;
  }

  .nd-dif-showcase img {
    height: var(--dif-showcase-h) !important;
  }
}

@media (max-width: 767px) {
  .nd-dif-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .nd-dif-reason-grid,
  .nd-dif-stats {
    grid-template-columns: 1fr !important;
  }

  .nd-dif-cta {
    align-items: stretch !important;
    gap: 18px !important;
    padding: 22px 18px !important;
  }

  .nd-dif-cta-btn {
    flex-basis: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 480px) {
  .nd-dif-wrap {
    --dif-pad-x: 16px;
    --dif-pad-y-top: 44px;
    --dif-pad-y-bot: 46px;
    --dif-panel-pad: 14px;
    --dif-title-size: 42px;
    --dif-kicker-size: 11px;
    --dif-kicker-letter: 2.8px;
    --dif-intro-size: 15px;
    --dif-feature-h: auto;
    --dif-feature-img-h: 105px;
    --dif-feature-title-size: 11px;
    --dif-feature-text-size: 11px;
    --dif-stats-h: auto;
    --dif-stat-icon: 46px;
    --dif-stat-value-size: 24px;
    --dif-stat-label-size: 11px;
    --dif-reason-card-h: auto;
    --dif-reason-pad: 20px;
    --dif-reason-icon: 48px;
    --dif-reason-num-size: 25px;
    --dif-reason-title-size: 18px;
    --dif-reason-text-size: 13px;
    --dif-reasons-kicker-size: 16px;
    --dif-showcase-h: 300px;
    --dif-cta-icon: 54px;
    --dif-cta-title-size: 18px;
    --dif-cta-text-size: 14px;
    --dif-cta-objective-size: 18px;
    --dif-cta-copy-w: 100%;
    --dif-cta-btn-margin: 0px;
    --dif-btn-w: 100%;
    --dif-btn-h: 50px;
  }

  .nd-dif-heading {
    padding: 12px 4px 8px !important;
  }

  .nd-dif-feature-card {
    padding: 12px !important;
  }

  /* TARJETAS SUPERIORES EN MOVIL - una columna evita textos apretados
     en pantallas angostas. */
  .nd-dif-feature-grid {
    grid-template-columns: 1fr !important;
  }

  .nd-dif-feature-head {
    gap: 8px !important;
    min-height: 34px !important;
    margin-bottom: 10px !important;
  }

  .nd-dif-feature-icon {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
  }

  .nd-dif-feature-icon-img img {
    width: 28px !important;
    height: 28px !important;
    transform: scale(1.7) !important;
  }

  .nd-dif-feature-icon-app img {
    transform: scale(1.25) !important;
  }

  .nd-dif-stat {
    padding: 18px 20px !important;
  }

  .nd-dif-reasons-kicker {
    margin: 18px 0 14px 0 !important;
    letter-spacing: 3px !important;
  }

  /* CTA EN MOVIL CHICO - reduce el titulo para mantenerlo legible
     sin salirse del borde. */
  .nd-dif-cta-objective,
  .nd-dif-cta > :first-child:not(.nd-dif-cta-icon):not(.nd-dif-cta-icon-img) {
    font-size: 18px !important;
    line-height: 1.18 !important;
    letter-spacing: 0.03em !important;
  }

  .nd-dif-reason-card {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 16px !important;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .nd-dif-wrap {
    --dif-pad-x: 22px;
    --dif-pad-y-top: 52px;
    --dif-pad-y-bot: 54px;
    --dif-panel-pad: 16px;
    --dif-title-size: 50px;
    --dif-intro-size: 16px;
    --dif-feature-h: auto;
    --dif-feature-img-h: 120px;
    --dif-feature-title-size: 12px;
    --dif-feature-text-size: 12px;
    --dif-reasons-kicker-size: 20px;
    --dif-cta-objective-size: 20px;
    --dif-cta-copy-w: 100%;
    --dif-cta-btn-margin: 0px;
    --dif-showcase-h: 360px;
    --dif-btn-w: 100%;
  }

  .nd-dif-feature-card {
    padding: 14px !important;
  }

  .nd-dif-feature-head {
    gap: 8px !important;
    min-height: 34px !important;
    margin-bottom: 10px !important;
  }

  .nd-dif-feature-icon {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
  }

  .nd-dif-feature-icon-img img {
    width: 30px !important;
    height: 30px !important;
    transform: scale(1.8) !important;
  }

  .nd-dif-feature-icon-app img {
    transform: scale(1.25) !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .nd-dif-wrap {
    --dif-pad-x: 36px;
    --dif-pad-y-top: 62px;
    --dif-pad-y-bot: 62px;
    --dif-panel-pad: 20px;
    --dif-title-size: 58px;
    --dif-intro-size: 17px;
    --dif-feature-img-h: 180px;
    --dif-showcase-h: 460px;
    --dif-reason-card-h: auto;
    --dif-reasons-kicker-size: 22px;
    --dif-cta-objective-size: 22px;
    --dif-cta-copy-w: 100%;
    --dif-cta-btn-margin: 0px;
  }
}

@media (min-width: 1025px) and (max-width: 1199px) {
  .nd-dif-wrap {
    --dif-pad-x: 44px;
    --dif-panel-pad: 20px;
    --dif-title-size: 54px;
    --dif-intro-size: 16px;
    --dif-feature-h: 300px;
    --dif-feature-img-h: 145px;
    --dif-feature-title-size: 15px;
    --dif-feature-text-size: 13px;
    --dif-reason-card-h: 112px;
    --dif-reason-pad: 14px;
    --dif-reason-title-size: 16px;
    --dif-reason-text-size: 11.5px;
    --dif-reasons-kicker-size: 24px;
    --dif-cta-objective-size: 24px;
    --dif-cta-copy-w: 100%;
    --dif-cta-btn-margin: 0px;
    --dif-showcase-h: 486px;
  }
}

@media (min-width: 1200px) and (max-width: 1440px) {
  .nd-dif-wrap {
    --dif-pad-x: 22px;
    --dif-panel-pad: 22px;
    --dif-title-size: 60px;
    --dif-intro-size: 16px;
    --dif-feature-h: 300px;
    --dif-feature-img-h: 150px;
    --dif-feature-title-size: 15px;
    --dif-feature-text-size: 13px;
    --dif-stats-h: 100px;
    --dif-stat-value-size: 28px;
    --dif-stat-label-size: 12px;
    --dif-reason-card-h: 112px;
    --dif-reason-pad: 14px;
    --dif-reason-title-size: 16px;
    --dif-reason-text-size: 11.5px;
    --dif-showcase-h: 486px;
    --dif-cta-objective-w: 340px;
    --dif-cta-objective-size: 20px;
    --dif-cta-copy-w: 440px;
    --dif-cta-btn-margin: 0px;
    --dif-btn-w: 240px;
  }
}

@media (min-width: 1441px) and (max-width: 2000px) {
  .nd-dif-wrap {
    --dif-max-w: 1900px;
  }
}

@media (min-width: 2001px) and (max-width: 2500px) {
  .nd-dif-wrap {
    --dif-max-w: 2300px;
    --dif-pad-x: 42px;
    --dif-pad-y-top: 52px;
    --dif-pad-y-bot: 52px;
    --dif-panel-pad: 36px;
    --dif-gap: 16px;
    --dif-title-size: 98px;
    --dif-kicker-size: 19px;
    --dif-intro-size: 24px;
    --dif-feature-h: 430px;
    --dif-feature-img-h: 225px;
    --dif-feature-title-size: 23px;
    --dif-feature-text-size: 20px;
    --dif-stats-h: 138px;
    --dif-stat-icon: 72px;
    --dif-stat-value-size: 42px;
    --dif-stat-label-size: 18px;
    --dif-reason-card-h: 260px;
    --dif-reason-pad: 34px;
    --dif-reason-icon: 76px;
    --dif-reason-num-size: 42px;
    --dif-reason-title-size: 30px;
    --dif-reason-text-size: 17px;
    --dif-showcase-h: 790px;
    --dif-cta-h: 138px;
    --dif-cta-objective-w: 560px;
    --dif-cta-objective-size: 42px;
    --dif-cta-copy-w: 720px;
    --dif-btn-w: 390px;
    --dif-btn-h: 68px;
  }
}

@media (min-width: 2501px) and (max-width: 3000px) {
  .nd-dif-wrap {
    --dif-max-w: 2780px;
    --dif-pad-x: 60px;
    --dif-panel-pad: 44px;
    --dif-gap: 20px;
    --dif-title-size: 124px;
    --dif-intro-size: 30px;
    --dif-feature-h: 520px;
    --dif-feature-img-h: 275px;
    --dif-feature-title-size: 29px;
    --dif-feature-text-size: 25px;
    --dif-stats-h: 170px;
    --dif-stat-icon: 88px;
    --dif-stat-value-size: 54px;
    --dif-stat-label-size: 22px;
    --dif-reason-card-h: 320px;
    --dif-reason-pad: 44px;
    --dif-reason-icon: 92px;
    --dif-reason-num-size: 54px;
    --dif-reason-title-size: 38px;
    --dif-reason-text-size: 21px;
    --dif-showcase-h: 980px;
    --dif-cta-h: 170px;
    --dif-cta-objective-w: 680px;
    --dif-cta-objective-size: 52px;
    --dif-cta-copy-w: 880px;
    --dif-btn-w: 460px;
    --dif-btn-h: 80px;
  }
}

@media (min-width: 3001px) and (max-width: 3839px) {
  .nd-dif-wrap {
    --dif-max-w: 3400px;
    --dif-pad-x: 90px;
    --dif-panel-pad: 58px;
    --dif-gap: 26px;
    --dif-title-size: 156px;
    --dif-intro-size: 38px;
    --dif-feature-h: 650px;
    --dif-feature-img-h: 345px;
    --dif-feature-title-size: 36px;
    --dif-feature-text-size: 31px;
    --dif-stats-h: 220px;
    --dif-stat-icon: 112px;
    --dif-stat-value-size: 68px;
    --dif-stat-label-size: 28px;
    --dif-reason-card-h: 410px;
    --dif-reason-pad: 56px;
    --dif-reason-icon: 116px;
    --dif-reason-num-size: 68px;
    --dif-reason-title-size: 48px;
    --dif-reason-text-size: 27px;
    --dif-showcase-h: 1250px;
    --dif-cta-h: 220px;
    --dif-cta-objective-w: 840px;
    --dif-cta-objective-size: 66px;
    --dif-cta-copy-w: 1080px;
    --dif-btn-w: 560px;
    --dif-btn-h: 96px;
  }
}

@media (min-width: 3840px) {
  .nd-dif-wrap {
    --dif-max-w: 3600px;
    --dif-pad-x: 120px;
    --dif-panel-pad: 70px;
    --dif-gap: 32px;
    --dif-title-size: 180px;
    --dif-intro-size: 46px;
    --dif-feature-h: 760px;
    --dif-feature-img-h: 405px;
    --dif-feature-title-size: 42px;
    --dif-feature-text-size: 36px;
    --dif-stats-h: 260px;
    --dif-stat-icon: 132px;
    --dif-stat-value-size: 82px;
    --dif-stat-label-size: 34px;
    --dif-reason-card-h: 490px;
    --dif-reason-pad: 68px;
    --dif-reason-icon: 138px;
    --dif-reason-num-size: 82px;
    --dif-reason-title-size: 58px;
    --dif-reason-text-size: 32px;
    --dif-showcase-h: 1480px;
    --dif-cta-h: 260px;
    --dif-cta-objective-w: 1000px;
    --dif-cta-objective-size: 78px;
    --dif-cta-copy-w: 1280px;
    --dif-btn-w: 660px;
    --dif-btn-h: 112px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nd-dif-feature-card,
  .nd-dif-cta-btn {
    transition: none !important;
    transform: none !important;
  }
}/* End custom CSS */