.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;}.elementor-735 .elementor-element.elementor-element-aedf430{--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-8d29bbf{--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-89416a6{--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-df6ca9f{--display:flex;}.elementor-735 .elementor-element.elementor-element-1d4b341 .elementor-heading-title{color:var( --e-global-color-3935be0 );}.elementor-735 .elementor-element.elementor-element-88a190e .elementor-heading-title{color:var( --e-global-color-3935be0 );}.elementor-735 .elementor-element.elementor-element-485651b{--display:flex;}.elementor-735 .elementor-element.elementor-element-449356c .elementor-heading-title{color:var( --e-global-color-3935be0 );}.elementor-735 .elementor-element.elementor-element-c7e5bac .elementor-heading-title{color:var( --e-global-color-3935be0 );}.elementor-735 .elementor-element.elementor-element-1d067f1{--display:flex;}.elementor-735 .elementor-element.elementor-element-904b849 .elementor-heading-title{color:var( --e-global-color-3935be0 );}.elementor-735 .elementor-element.elementor-element-2e27e6b .elementor-heading-title{color:var( --e-global-color-3935be0 );}.elementor-735 .elementor-element.elementor-element-969fb62{--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-90b5609{width:100%;max-width:100%;}: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%;}.elementor-735 .elementor-element.elementor-element-8d29bbf{--width:50%;}.elementor-735 .elementor-element.elementor-element-89416a6{--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.3 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: var(--nd-bg, #050505); /* Fondo base negro profundo */
  --why-gold: var(--nd-gold, #c8a44a); /* Dorado principal */
  --why-gold-soft: var(--nd-gold-soft, #d7b670); /* Dorado claro para hovers (antes #d8b866) */
  --why-text: var(--nd-cream, #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;
  /* Reserva siempre el ultimo 25% real de la barra para el dron.
     Al usar porcentaje depende del ancho del componente, no del monitor. */
  --dif-stats-drone-w: 40%;
  --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: 20px;
  --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: 20px;
  --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: contain !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) 50%,
      rgba(5, 7, 7, 0.62) 60%,
      rgba(5, 7, 7, 0.28) 70%,
      rgba(5, 7, 7, 0.08) 75%,
      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: 60.2% !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: 32px !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: var(--dif-cta-btn-margin) !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;
}

/* DISEÑO DE ESCRITORIO AMPLIO.
   Antes comenzaba en 1200px, pero ese ancho no permite acomodar correctamente
   las estadísticas, las seis razones y la imagen en dos columnas.
   Ahora la composición completa comienza cuando existen al menos 1441px. */
@media (min-width: 1441px) {
  .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: 1 1 auto !important;
    min-height: 0 !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    align-content: stretch !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: 100% !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: 5px !important;
  }
}

/* DISEÑO COMPACTO PARA LAPTOP Y TABLET.
   Se mantiene activo hasta 1440px para evitar que el contenido se encime
   exactamente al cruzar de 1199px a 1200px. */
@media (max-width: 1440px) {
  .nd-dif-top,
  .nd-dif-body,
  .nd-dif-body > .e-con-inner,
  .nd-dif-cta {
    display: flex !important;
    flex-direction: column !important;
  }

  /* CENTRADO GENERAL DEL CTA COMPACTO.
     Alinea objetivo, logotipo, texto y botón sobre un mismo eje central. */
  .nd-dif-cta {
    /* Centra horizontalmente todos los elementos hijos. */
    align-items: center !important;
    /* Mantiene el conjunto centrado dentro del espacio vertical. */
    justify-content: center !important;
    /* Aplica alineación centrada al texto heredado. */
    text-align: center !important;
    /* Conserva una separación uniforme entre sus elementos. */
    gap: 20px !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 {
    /* En una columna, flex-basis controla la ALTURA y no el ancho.
       Se usa auto para impedir que los 280px del escritorio creen un cuadro. */
    flex: 0 0 auto !important;
    /* Conserva el ancho normal del botón de escritorio. */
    width: var(--dif-btn-w) !important;
    /* Impide que el widget de Elementor se estire horizontalmente. */
    max-width: 100% !important;
    /* Mantiene la altura compacta definida para el botón. */
    height: var(--dif-btn-h) !important;
    /* Asegura que la altura mínima no sea mayor que la altura deseada. */
    min-height: var(--dif-btn-h) !important;
    /* Evita que Elementor agregue una altura máxima heredada. */
    max-height: var(--dif-btn-h) !important;
    /* Centra el botón dentro del CTA vertical. */
    align-self: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Si la clase está asignada al widget de Elementor, ajusta su wrapper. */
  .nd-dif-cta-btn > .elementor-widget-container {
    /* Hace que el wrapper use el ancho del botón. */
    width: 100% !important;
    /* Mantiene la altura compacta del botón. */
    height: 100% !important;
    /* Elimina márgenes que podrían desplazarlo. */
    margin: 0 !important;
    /* Elimina rellenos que podrían aumentar su altura. */
    padding: 0 !important;
  }

  /* Controla el enlace real cuando nd-dif-cta-btn está colocado en el widget. */
  .nd-dif-cta-btn a,
  .nd-dif-cta-btn .elementor-button {
    /* Coloca texto e icono en una misma fila centrada. */
    display: inline-flex !important;
    /* Centra verticalmente el contenido. */
    align-items: center !important;
    /* Centra horizontalmente el contenido. */
    justify-content: center !important;
    /* Mantiene la separación entre texto e icono. */
    gap: 14px !important;
    /* Hace que el enlace llene el ancho del widget. */
    width: 100% !important;
    /* Hace que el enlace llene solamente los 48px de altura. */
    height: 100% !important;
    /* Elimina alturas mínimas del tema o del widget. */
    min-height: 0 !important;
    /* Elimina rellenos verticales que agrandarían el enlace. */
    padding-top: 0 !important;
    /* Elimina rellenos verticales que agrandarían el enlace. */
    padding-bottom: 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;
    /* Permite centrar el bloque sin ocupar innecesariamente todo el CTA. */
    width: min(100%, 760px) !important;
    /* Limita la longitud de las líneas para conservar una composición limpia. */
    max-width: 760px !important;
    /* Centra el propio widget dentro del CTA. */
    margin-left: auto !important;
    /* Centra el propio widget dentro del CTA. */
    margin-right: auto !important;
    /* Centra el título y la descripción. */
    text-align: center !important;
  }

  .nd-dif-cta-copy strong,
  .nd-dif-cta-copy span {
    /* Convierte cada texto en bloque para centrarlo correctamente. */
    display: block !important;
    /* Hace que cada línea utilice el ancho disponible del bloque. */
    width: 100% !important;
    /* Centra el contenido textual. */
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  /* Centra el widget o contenedor utilizado para el logotipo. */
  .nd-dif-cta-icon,
  .nd-dif-cta-icon-img {
    /* Evita desplazamientos causados por márgenes del constructor. */
    margin-left: auto !important;
    /* Evita desplazamientos causados por márgenes del constructor. */
    margin-right: auto !important;
    /* Mantiene el logotipo centrado dentro de su caja. */
    align-self: center !important;
  }

  /* Centra también el wrapper automático de la imagen en Elementor. */
  .nd-dif-cta-icon-img .elementor-widget-container {
    /* Activa Flexbox para centrar la imagen. */
    display: flex !important;
    /* Centra horizontalmente el logotipo. */
    justify-content: center !important;
    /* Centra verticalmente el logotipo. */
    align-items: center !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 {
    /* En dirección vertical, 100% como flex-basis se convierte en altura.
       Se mantiene auto para evitar un botón gigantesco. */
    flex: 0 0 auto !important;
    /* El botón sí ocupa todo el ancho disponible en teléfono. */
    width: 100% !important;
    /* Mantiene la altura móvil definida en la variable. */
    height: var(--dif-btn-h) !important;
    /* Impide que el constructor aumente la altura mínima. */
    min-height: var(--dif-btn-h) !important;
    /* Impide que el constructor aumente la altura máxima. */
    max-height: var(--dif-btn-h) !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-icon: 40px;
    --dif-stat-value-size: 22px;
    --dif-stat-label-size: 9px;
    --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;
  }

  /* STATS COMPACTOS PARA LAPTOP
     Mantiene los cuatro datos en una sola fila sin encimarlos. */
  .nd-dif-stats {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .nd-dif-stat {
    gap: 6px !important;
    padding: 10px 4px !important;
    justify-content: center !important;
  }

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

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

  .nd-dif-stat em {
    margin-top: 3px !important;
    line-height: 1.12 !important;
  }

  .nd-dif-stat:not(:last-child)::after {
    height: 52px !important;
  }
}
/* STATS EN MONITORES INTERMEDIOS - elimina el salto brusco que ocurria
   exactamente al pasar de 1440px a 1441px. */
@media (min-width: 1441px) and (max-width: 1849px) {
  .nd-dif-wrap {
    --dif-stats-h: 100px;
    --dif-stat-icon: 44px;
    --dif-stat-value-size: 24px;
    --dif-stat-label-size: 10px;
  }

  .nd-dif-stats {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .nd-dif-stat {
    gap: 7px !important;
    padding: 11px 6px !important;
    justify-content: center !important;
  }

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

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

  .nd-dif-stat em {
    margin-top: 3px !important;
    line-height: 1.12 !important;
  }

  .nd-dif-stat:not(:last-child)::after {
    height: 52px !important;
  }
}

@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;
    /* Stats con escala moderada: evita el salto brusco al pasar 2000px. */
    --dif-stats-h: 112px;
    --dif-stat-icon: 58px;
    --dif-stat-value-size: 33px;
    --dif-stat-label-size: 13px;
    --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;
    /* La barra crece suavemente sin invadir la zona reservada al dron. */
    --dif-stats-h: 124px;
    --dif-stat-icon: 64px;
    --dif-stat-value-size: 36px;
    --dif-stat-label-size: 14px;
    --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: 142px;
    --dif-stat-icon: 72px;
    --dif-stat-value-size: 42px;
    --dif-stat-label-size: 16px;
    --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: 158px;
    --dif-stat-icon: 82px;
    --dif-stat-value-size: 48px;
    --dif-stat-label-size: 18px;
    --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;
  }
}

/* ==============================================================================
   ESCALA ESTABLE PARA MONITORES GRANDES
   Evita que al cruzar 2001px, 2501px o 3001px toda la seccion aumente de
   golpe. El contenido conserva proporciones legibles y se centra en pantalla.
   ============================================================================== */
@media (min-width: 2001px) {
  .nd-dif-wrap {
    --dif-max-w: 1900px;
    --dif-pad-x: 30px;
    --dif-panel-pad: 0px;
    --dif-gap: 10px;

    --dif-title-size: 72px;
    --dif-kicker-size: 13px;
    --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: 106px;
    --dif-stat-icon: 58px;
    --dif-stat-value-size: 33px;
    --dif-stat-label-size: 13px;

    --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: 20px;
    --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: 20px;
    --dif-cta-copy-w: 560px;
    --dif-cta-btn-margin: 0px;
    --dif-btn-w: 280px;
    --dif-btn-h: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nd-dif-feature-card,
  .nd-dif-cta-btn {
    transition: none !important;
    transform: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aedf430 *//* Variables generales: permiten cambiar los colores desde un solo lugar. */
:root {
  /* Dorado principal usado en iconos, subtítulos y etiquetas. */
  --nd-gold: #d6a638;
  /* Dorado oscuro utilizado principalmente en los bordes. */
  --nd-gold-dark: #77591e;
  /* Blanco ligeramente cálido para los títulos. */
  --nd-white: #f5f5f3;
  /* Gris claro para los párrafos secundarios. */
  --nd-muted: #b2b2b2;
  /* Color negro base de toda la sección. */
  --nd-black: #050708;
}

/* Reduce la separación inferior entre la sección del mapa y Diferenciadores. */
.nd-map-wrap {
  /* Sube únicamente la sección ND MAP exactamente veinte píxeles. */
  margin-top: -17px !important;
  /* Elimina cualquier margen inferior añadido por estilos anteriores. */
  margin-bottom: 0 !important;
  /* Agrega quince píxeles de espacio en el lado izquierdo y derecho. */
  padding-left: 30px !important;
  /* Agrega quince píxeles de espacio en el lado derecho. */
  padding-right: 30px !important;
}

/* Aplica un cálculo de tamaño predecible a todos los elementos. */
* {
  /* Incluye padding y borde dentro del ancho y alto declarados. */
  box-sizing: border-box;
}

/* Contenedor principal con la imagen a la izquierda y las tarjetas a la derecha. */
.nd-map-wrap {
  /* Activa CSS Grid para crear las dos columnas principales. */
  display: grid;
  /* La columna del mapa es un poco más ancha que la de las tarjetas. */
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr);
  /* Separación entre la imagen principal y las tarjetas. */
  gap: 10px;
  /* Hace que la sección ocupe todo el ancho disponible. */
  width: 100%;
  /* Evita que el diseño se estire demasiado en monitores grandes. */
  max-width: 1600px;
  /* Mantiene una altura visual similar a la referencia. */
  min-height: 880px;
  /* Centra horizontalmente la sección. */
  margin-inline: auto;
  /* Añade espacio interior alrededor del contenido. */
  padding: 10px;
  /* Aplica el fondo negro general. */
  background: var(--nd-black);
}

/* Evita que los elementos de Grid se desborden por contenido ancho. */
.nd-map-image,
.nd-map-cards,
.nd-map-card {
  /* Permite que cada contenedor se reduzca correctamente. */
  min-width: 0;
}

/* Contenedor de la imagen grande del mapa. */
.nd-map-image {
  /* Oculta cualquier parte de la imagen que salga de los bordes. */
  overflow: hidden;
  /* Añade un borde dorado muy sutil. */
  border: 1px solid rgba(214, 166, 56, 0.2);
  /* Redondea las esquinas. */
  border-radius: 12px;
  /* Color mostrado mientras carga la imagen. */
  background: #080b0d;
}

/* Imagen que se encuentra dentro del contenedor del mapa. */
.nd-map-image img {
  /* Elimina el pequeño espacio inferior propio de las imágenes inline. */
  display: block;
  /* Hace que la imagen ocupe todo el ancho del contenedor. */
  width: 100%;
  /* Hace que la imagen ocupe toda la altura del contenedor. */
  height: 100%;
  /* Recorta la imagen sin deformarla. */
  object-fit: cover;
  /* Mantiene el recorte centrado. */
  object-position: center;
}

/* Contenedor que organiza verticalmente las tres tarjetas. */
.nd-map-cards {
  /* Activa Grid dentro de la columna derecha. */
  display: grid;
  /* Crea tres filas de la misma altura. */
  grid-template-rows: repeat(3, minmax(0, 1fr));
  /* Separación vertical entre tarjetas. */
  gap: 10px;
}

/* Estilo base compartido por cada tarjeta de ciudad. */
.nd-map-card {
  /* Permite posicionar la imagen y el degradado de forma absoluta. */
  position: relative;
  /* Crea un contexto de capas independiente para controlar los z-index. */
  isolation: isolate;
  /* Oculta la imagen fuera de las esquinas redondeadas. */
  overflow: hidden;
  /* Evita que una tarjeta quede demasiado baja. */
  min-height: 280px;
  /* Añade el borde dorado tenue. */
  border: 1px solid rgba(214, 166, 56, 0.24);
  /* Redondea las esquinas de la tarjeta. */
  border-radius: 12px;
  /* Fondo de respaldo si la fotografía no carga. */
  background: #090c0e;
}

/* Reglas compartidas por la imagen y la capa oscura. */
.nd-map-card__image,
.nd-map-card__overlay {
  /* Coloca ambos elementos respecto a la tarjeta. */
  position: absolute;
  /* Equivale a top, right, bottom y left con valor cero. */
  inset: 0;
  /* Ocupa todo el ancho de la tarjeta. */
  width: 100%;
  /* Ocupa toda la altura de la tarjeta. */
  height: 100%;
}

/* Fotografía de fondo de cada tarjeta. */
.nd-map-card__image {
  /* Coloca la imagen detrás del degradado y del contenido. */
  z-index: -2;
  /* Recorta la fotografía sin deformarla. */
  object-fit: cover;
  /* Prioriza la parte derecha de la fotografía. */
  object-position: center right;
}

/* Capa de degradados superpuesta a la fotografía. */
.nd-map-card__overlay {
  /* La coloca encima de la imagen y debajo del contenido. */
  z-index: -1;
  /* Oscurece especialmente la zona izquierda donde aparece el texto. */
  background:
    linear-gradient(
      90deg,
      rgba(3, 5, 6, 0.98) 0%,
      rgba(3, 5, 6, 0.92) 38%,
      rgba(3, 5, 6, 0.5) 70%,
      rgba(3, 5, 6, 0.18) 100%
    ),
    linear-gradient(0deg, rgba(3, 5, 6, 0.38), rgba(3, 5, 6, 0.06));
}

/* Contenedor interno de títulos, descripción y etiquetas. */
.nd-map-card__content {
  /* Activa Flexbox para ordenar el contenido verticalmente. */
  display: flex;
  /* Coloca los elementos uno debajo de otro. */
  flex-direction: column;
  /* Alinea los elementos al borde izquierdo. */
  align-items: flex-start;
  /* Centra verticalmente el contenido en la tarjeta. */
  justify-content: center;
  /* Limita el texto para que la imagen siga siendo visible a la derecha. */
  width: min(64%, 520px);
  /* Hace que el contenido pueda ocupar toda la altura disponible. */
  min-height: 100%;
  /* Añade aire interior alrededor del contenido. */
  padding: 28px 34px;
}

/* Encabezado principal de cada tarjeta. */
.nd-map-card__title {
  /* Coloca el pin y el nombre en una misma fila. */
  display: flex;
  /* Centra verticalmente el pin respecto al texto. */
  align-items: center;
  /* Separa el pin del nombre de la ciudad. */
  gap: 14px;
  /* Elimina el margen predeterminado del encabezado. */
  margin: 0;
  /* Aplica el color blanco definido en las variables. */
  color: var(--nd-white);
  /* Define peso, tamaño adaptable, interlineado y tipografía. */
  font: 500 clamp(1.75rem, 2.5vw, 2.35rem)/1.05 Arial, sans-serif;
}

/* Crea el cuerpo dorado del icono de ubicación sin usar una imagen. */
.nd-map-card__pin {
  /* Permite posicionar el círculo interior del pin. */
  position: relative;
  /* Define el ancho del icono. */
  width: 20px;
  /* Define la altura del icono. */
  height: 27px;
  /* Impide que Flexbox reduzca el icono. */
  flex: 0 0 20px;
  /* Convierte el rectángulo en una forma de marcador. */
  border-radius: 50% 50% 50% 0;
  /* Oculta el carácter usado dentro del span. */
  color: transparent;
  /* Aplica el fondo dorado. */
  background: var(--nd-gold);
  /* Gira la forma para que apunte hacia abajo. */
  transform: rotate(-45deg);
}

/* Dibuja el círculo oscuro que aparece dentro del pin. */
.nd-map-card__pin::after {
  /* Posiciona el círculo respecto al cuerpo del pin. */
  position: absolute;
  /* Separa el círculo siete píxeles del borde superior. */
  top: 7px;
  /* Separa el círculo siete píxeles del borde izquierdo. */
  left: 7px;
  /* Define el ancho del círculo. */
  width: 6px;
  /* Define la altura del círculo. */
  height: 6px;
  /* Convierte el elemento en un círculo perfecto. */
  border-radius: 50%;
  /* Aplica el color oscuro interior. */
  background: #15120b;
  /* Hace que el pseudoelemento exista visualmente. */
  content: "";
}

/* Segundo encabezado: estado de la ciudad. */
.nd-map-card__subtitle {
  /* Separa el subtítulo del título y del párrafo. */
  margin: 8px 0 24px 36px;
  /* Aplica el color dorado. */
  color: var(--nd-gold);
  /* Define tipografía compacta y en negritas. */
  font: 700 0.9rem/1.2 Arial, sans-serif;
  /* Aumenta ligeramente el espacio entre letras. */
  letter-spacing: 0.08em;
  /* Convierte automáticamente el texto a mayúsculas. */
  text-transform: uppercase;
}

/* Línea decorativa dorada debajo del subtítulo. */
.nd-map-card__subtitle::after {
  /* Hace que la línea comience en una fila nueva. */
  display: block;
  /* Define el largo de la línea. */
  width: 42px;
  /* Define el grosor de la línea. */
  height: 2px;
  /* Separa la línea del subtítulo. */
  margin-top: 15px;
  /* Desvanece el dorado hacia la derecha. */
  background: linear-gradient(90deg, var(--nd-gold), transparent);
  /* Crea el pseudoelemento. */
  content: "";
}

/* Párrafo descriptivo de cada tarjeta. */
.nd-map-card__text {
  /* Limita el largo de las líneas para facilitar la lectura. */
  max-width: 430px;
  /* Elimina márgenes superiores y deja espacio debajo. */
  margin: 0 0 24px;
  /* Aplica el color gris secundario. */
  color: var(--nd-muted);
  /* Define tamaño, peso, interlineado y familia tipográfica. */
  font: 400 1rem/1.55 Arial, sans-serif;
}

/* Contenedor de etiquetas ubicado al final de cada tarjeta. */
.nd-map-card__html {
  /* Coloca las etiquetas horizontalmente. */
  display: flex;
  /* Permite que bajen de línea cuando no hay espacio. */
  flex-wrap: wrap;
  /* Añade separación uniforme entre etiquetas. */
  gap: 10px;
}

/* Estilo individual de cada etiqueta. */
.nd-map-card__html span {
  /* Añade espacio dentro de la etiqueta. */
  padding: 10px 16px;
  /* Dibuja el borde dorado oscuro. */
  border: 1px solid var(--nd-gold-dark);
  /* Redondea ligeramente sus esquinas. */
  border-radius: 4px;
  /* Aplica color dorado al texto. */
  color: var(--nd-gold);
  /* Añade un fondo negro semitransparente. */
  background: rgba(7, 8, 8, 0.65);
  /* Define una tipografía pequeña y en negritas. */
  font: 700 0.78rem/1 Arial, sans-serif;
  /* Separa ligeramente las letras. */
  letter-spacing: 0.025em;
  /* Convierte el contenido a mayúsculas. */
  text-transform: uppercase;
}

/* Adaptación para tablets y pantallas menores a 1050 píxeles. */
@media (max-width: 1050px) {
  /* Convierte las dos columnas principales en una sola columna. */
  .nd-map-wrap {
    /* El mapa aparece arriba y las tarjetas debajo. */
    grid-template-columns: 1fr;
    /* Deja que la altura dependa del contenido. */
    min-height: auto;
  }

  /* Ajusta la altura del mapa en tablets. */
  .nd-map-image {
    /* Mantiene una imagen principal suficientemente visible. */
    min-height: 620px;
  }

  /* Elimina las tres filas forzadas de la versión de escritorio. */
  .nd-map-cards {
    /* Permite que cada tarjeta determine su propia altura. */
    grid-template-rows: none;
  }

  /* Aumenta un poco la altura de cada tarjeta en una sola columna. */
  .nd-map-card {
    /* Altura mínima para conservar la composición. */
    min-height: 320px;
  }
}

/* Adaptación para teléfonos y pantallas menores a 620 píxeles. */
@media (max-width: 620px) {
  /* Reduce el espacio exterior para aprovechar mejor la pantalla. */
  .nd-map-wrap {
    /* Usa un padding más compacto. */
    padding: 10px;
  }

  /* Reduce la altura de la imagen principal en teléfonos. */
  .nd-map-image {
    /* Evita que el mapa ocupe demasiada pantalla vertical. */
    min-height: 460px;
  }

  /* Da más altura a las tarjetas para acomodar el texto y etiquetas. */
  .nd-map-card {
    /* Previene que el contenido se vea apretado. */
    min-height: 380px;
  }

  /* Oscurece una zona mayor de la foto para mejorar la lectura en móvil. */
  .nd-map-card__overlay {
    /* Usa un degradado más uniforme en pantallas estrechas. */
    background:
      linear-gradient(
        90deg,
        rgba(3, 5, 6, 0.96) 0%,
        rgba(3, 5, 6, 0.82) 72%,
        rgba(3, 5, 6, 0.55) 100%
      );
  }

  /* El contenido puede usar todo el ancho de la tarjeta en móvil. */
  .nd-map-card__content {
    /* Elimina la limitación del 64% aplicada en escritorio. */
    width: 100%;
    /* Reduce ligeramente el espacio interior lateral. */
    padding: 26px 22px;
  }

  /* Reduce el encabezado para evitar saltos incómodos. */
  .nd-map-card__title {
    /* Tamaño adecuado para teléfonos. */
    font-size: 1.75rem;
  }

  /* Reduce ligeramente el párrafo descriptivo. */
  .nd-map-card__text {
    /* Mantiene una lectura cómoda sin ocupar espacio excesivo. */
    font-size: 0.95rem;
  }
}

/* ====================================================================== */
/* CORRECCIÓN EXACTA PARA LA ESTRUCTURA MOSTRADA EN ELEMENTOR              */
/* Este bloque usa medidas fijas para impedir que el tema agrande la tarjeta. */
/* ====================================================================== */

/* Controla la columna que contiene las tres tarjetas. */
.nd-map-wrap .nd-map-cards {
  /* Organiza las tarjetas verticalmente. */
  display: grid !important;
  /* Da exactamente 285 píxeles de altura a cada tarjeta en escritorio. */
  grid-template-rows: repeat(3, 285px) !important;
  /* Mantiene una única columna de tarjetas. */
  grid-template-columns: minmax(0, 1fr) !important;
  /* Separa las tarjetas doce píxeles entre sí. */
  gap: 12px !important;
  /* Coloca las tarjetas desde la parte superior. */
  align-content: start !important;
  /* Permite usar todo el ancho de la columna derecha. */
  width: 100% !important;
  /* Deja que la altura dependa de las tres filas y sus separaciones. */
  height: auto !important;
}

/* Fija las dimensiones definitivas de cada tarjeta. */
.nd-map-wrap .nd-map-cards .nd-map-card {
  /* Mantiene la tarjeta como referencia para los elementos superpuestos. */
  position: relative !important;
  /* Activa Flexbox para ordenar su contenido. */
  display: flex !important;
  /* Apila los widgets verticalmente. */
  flex-direction: column !important;
  /* Alinea todos los widgets al lado izquierdo. */
  align-items: flex-start !important;
  /* Coloca el contenido desde arriba. */
  justify-content: flex-start !important;
  /* Ocupa todo el ancho de la columna derecha. */
  width: 100% !important;
  /* Fija la altura igual a la imagen de referencia. */
  height: 285px !important;
  /* Evita alturas mínimas superiores creadas por Elementor. */
  min-height: 285px !important;
  /* Desactiva la proporción anterior para que no aumente la altura. */
  aspect-ratio: auto !important;
  /* Añade el espacio interior de la referencia. */
  padding: 30px 35px 20px !important;
  /* Elimina márgenes externos. */
  margin: 0 !important;
  /* Impide que un widget haga crecer la tarjeta. */
  overflow: hidden !important;
}

/* Evita que los contenedores internos de Elementor estiren la tarjeta. */
.nd-map-wrap .nd-map-card > .e-con-inner {
  /* Mantiene el contenedor interno encima del fondo. */
  position: relative !important;
  /* Coloca el contenido por encima del degradado. */
  z-index: 2 !important;
  /* Activa Flexbox dentro del contenedor automático. */
  display: flex !important;
  /* Apila los widgets verticalmente. */
  flex-direction: column !important;
  /* Alinea el contenido a la izquierda. */
  align-items: flex-start !important;
  /* Coloca el contenido desde la parte superior. */
  justify-content: flex-start !important;
  /* Ocupa todo el ancho disponible. */
  width: 100% !important;
  /* Ocupa toda la altura interior de la tarjeta. */
  height: 100% !important;
  /* Elimina límites de ancho del tema. */
  max-width: none !important;
  /* Elimina rellenos duplicados. */
  padding: 0 !important;
  /* Elimina márgenes duplicados. */
  margin: 0 !important;
  /* Usa una separación pequeña entre widgets. */
  gap: 0 !important;
}

/* Coloca cualquier widget de imagen marcado como fondo detrás del contenido. */
.nd-map-wrap .nd-map-card .nd-map-card__image {
  /* Saca por completo la imagen de la distribución de widgets. */
  position: absolute !important;
  /* La extiende a los cuatro bordes de la tarjeta. */
  inset: 0 !important;
  /* La coloca detrás de todo el contenido. */
  z-index: 0 !important;
  /* Hace que ocupe todo el ancho. */
  width: 100% !important;
  /* Hace que ocupe los 285 píxeles de alto. */
  height: 100% !important;
  /* Elimina mínimos impuestos por el widget. */
  min-height: 0 !important;
  /* Elimina máximos impuestos por el tema. */
  max-width: none !important;
  /* Elimina espacios del widget. */
  margin: 0 !important;
  /* Elimina espacios interiores del widget. */
  padding: 0 !important;
}

/* Obliga a todas las capas internas del widget de imagen a llenar la tarjeta. */
.nd-map-wrap .nd-map-card .nd-map-card__image *,
.nd-map-wrap .nd-map-card .nd-map-card__image .elementor-widget-container {
  /* Hace que cada wrapper use todo el ancho disponible. */
  width: 100% !important;
  /* Hace que cada wrapper use toda la altura disponible. */
  height: 100% !important;
  /* Elimina límites máximos de anchura. */
  max-width: none !important;
  /* Elimina márgenes internos. */
  margin: 0 !important;
  /* Elimina rellenos internos. */
  padding: 0 !important;
}

/* Ajusta específicamente la fotografía. */
.nd-map-wrap .nd-map-card .nd-map-card__image img,
.nd-map-wrap .nd-map-card img.nd-map-card__image {
  /* Convierte la fotografía en bloque. */
  display: block !important;
  /* Hace que cubra toda la anchura de la tarjeta. */
  width: 100% !important;
  /* Hace que cubra toda la altura de la tarjeta. */
  height: 100% !important;
  /* Recorta la imagen sin deformarla. */
  object-fit: cover !important;
  /* Muestra principalmente la zona derecha de la fotografía. */
  object-position: center right !important;
}

/* Limita el ancho visual de todos los bloques de contenido. */
.nd-map-wrap .nd-map-card .nd-map-card__title,
.nd-map-wrap .nd-map-card .nd-map-card__subtitle,
.nd-map-wrap .nd-map-card .nd-map-card__text,
.nd-map-wrap .nd-map-card .nd-map-card__html {
  /* Mantiene cada bloque por encima de imagen y degradado. */
  position: relative !important;
  /* Coloca cada bloque en la capa superior. */
  z-index: 3 !important;
  /* Evita transformaciones o desplazamientos del tema. */
  transform: none !important;
}

/* Corrige el widget completo del título. */
.nd-map-wrap .nd-map-card .nd-map-card__title {
  /* Coloca el icono y el título en la misma línea. */
  display: flex !important;
  /* Centra verticalmente ambos elementos. */
  align-items: center !important;
  /* Separa el icono del texto. */
  gap: 15px !important;
  /* Permite que el título use el ancho necesario. */
  width: auto !important;
  /* Evita que el widget tenga una altura exagerada. */
  min-height: 0 !important;
  /* Elimina espacios interiores del widget. */
  padding: 0 !important;
  /* Deja únicamente tres píxeles debajo. */
  margin: 0 0 3px !important;
  /* Fija la tipografía del widget. */
  font-family: Arial, Helvetica, sans-serif !important;
  /* Fija el peso visual. */
  font-weight: 500 !important;
  /* Fija el tamaño como en la tarjeta de referencia. */
  font-size: 30px !important;
  /* Mantiene compacta la línea. */
  line-height: 1.08 !important;
  /* Conserva la capitalización normal. */
  text-transform: none !important;
  /* Elimina separación adicional entre caracteres. */
  letter-spacing: 0 !important;
  /* Aplica color blanco. */
  color: #f5f5f3 !important;
}

/* Obliga a cualquier elemento interior del título a respetar el mismo estilo. */
.nd-map-wrap .nd-map-card .nd-map-card__title * {
  /* Usa Arial aunque el tema aplique otra fuente al encabezado. */
  font-family: Arial, Helvetica, sans-serif !important;
  /* Usa peso medio. */
  font-weight: 500 !important;
  /* Mantiene el tamaño exacto de treinta píxeles. */
  font-size: 30px !important;
  /* Mantiene la altura de línea compacta. */
  line-height: 1.08 !important;
  /* Conserva mayúsculas y minúsculas normales. */
  text-transform: none !important;
  /* Elimina el espacio entre letras heredado. */
  letter-spacing: 0 !important;
  /* Aplica el color blanco. */
  color: #f5f5f3 !important;
  /* Elimina márgenes propios de h1, h2 o h3. */
  margin: 0 !important;
  /* Elimina rellenos internos inesperados. */
  padding: 0 !important;
}

/* Reduce el marcador dorado al tamaño de la referencia. */
.nd-map-wrap .nd-map-card .nd-map-card__title::before,
.nd-map-wrap .nd-map-card .nd-map-card__pin {
  /* Define el ancho exacto del marcador. */
  width: 17px !important;
  /* Define la altura exacta del marcador. */
  height: 23px !important;
  /* Impide que el marcador crezca o se reduzca. */
  flex: 0 0 17px !important;
  /* Conserva su forma de pin. */
  border-radius: 50% 50% 50% 0 !important;
  /* Aplica el dorado del diseño. */
  background: #d6a638 !important;
  /* Elimina bordes adicionales. */
  border: 0 !important;
  /* Gira la forma hacia abajo. */
  transform: rotate(-45deg) !important;
}

/* Corrige el widget completo del estado. */
.nd-map-wrap .nd-map-card .nd-map-card__subtitle {
  /* Permite que el estado use solamente su ancho necesario. */
  width: auto !important;
  /* Elimina alturas mínimas de Elementor. */
  min-height: 0 !important;
  /* Elimina rellenos del widget. */
  padding: 0 !important;
  /* Lo alinea debajo del texto del título. */
  margin: 3px 0 0 36px !important;
  /* Fija la tipografía limpia. */
  font-family: Arial, Helvetica, sans-serif !important;
  /* Mantiene el texto en negritas. */
  font-weight: 700 !important;
  /* Fija el tamaño del estado. */
  font-size: 13px !important;
  /* Mantiene una línea compacta. */
  line-height: 1.2 !important;
  /* Convierte el texto a mayúsculas. */
  text-transform: uppercase !important;
  /* Separa ligeramente las letras. */
  letter-spacing: 1px !important;
  /* Aplica el dorado. */
  color: #d6a638 !important;
}

/* Obliga a cualquier encabezado interior del estado a respetar su tamaño. */
.nd-map-wrap .nd-map-card .nd-map-card__subtitle * {
  /* Utiliza Arial. */
  font-family: Arial, Helvetica, sans-serif !important;
  /* Aplica negritas. */
  font-weight: 700 !important;
  /* Conserva el tamaño de trece píxeles. */
  font-size: 13px !important;
  /* Conserva la altura de línea. */
  line-height: 1.2 !important;
  /* Convierte el texto a mayúsculas. */
  text-transform: uppercase !important;
  /* Conserva el espaciado de letras. */
  letter-spacing: 1px !important;
  /* Aplica el color dorado. */
  color: #d6a638 !important;
  /* Elimina márgenes internos. */
  margin: 0 !important;
  /* Elimina rellenos internos. */
  padding: 0 !important;
}

/* Ajusta la línea decorativa debajo del estado. */
.nd-map-wrap .nd-map-card .nd-map-card__subtitle::after {
  /* Crea la línea. */
  content: "" !important;
  /* Coloca la línea debajo del texto. */
  display: block !important;
  /* Fija su longitud. */
  width: 43px !important;
  /* Fija su grosor. */
  height: 2px !important;
  /* Separa la línea del estado. */
  margin-top: 13px !important;
  /* Aplica el degradado dorado. */
  background: linear-gradient(90deg, #f0bd42, transparent) !important;
}

/* Corrige el widget completo del párrafo. */
.nd-map-wrap .nd-map-card .nd-map-card__text {
  /* Limita el texto a la zona izquierda de la tarjeta. */
  width: 52% !important;
  /* Impide que el párrafo invada toda la fotografía. */
  max-width: 410px !important;
  /* Elimina alturas mínimas heredadas. */
  min-height: 0 !important;
  /* Elimina rellenos del widget. */
  padding: 0 !important;
  /* Separa el texto de la línea decorativa. */
  margin: 17px 0 0 !important;
  /* Cambia la fuente monoespaciada por Arial. */
  font-family: Arial, Helvetica, sans-serif !important;
  /* Utiliza peso regular. */
  font-weight: 400 !important;
  /* Fija el tamaño de lectura. */
  font-size: 15px !important;
  /* Define la separación vertical de las líneas. */
  line-height: 1.48 !important;
  /* Elimina transformaciones de texto. */
  text-transform: none !important;
  /* Elimina el espacio exagerado entre letras. */
  letter-spacing: 0 !important;
  /* Aplica el gris claro. */
  color: #b4b4b4 !important;
}

/* Obliga a todos los elementos internos del texto a usar la misma tipografía. */
.nd-map-wrap .nd-map-card .nd-map-card__text * {
  /* Cambia cualquier fuente heredada por Arial. */
  font-family: Arial, Helvetica, sans-serif !important;
  /* Conserva peso regular. */
  font-weight: 400 !important;
  /* Conserva el tamaño de quince píxeles. */
  font-size: 15px !important;
  /* Conserva la altura de línea legible. */
  line-height: 1.48 !important;
  /* Evita mayúsculas automáticas. */
  text-transform: none !important;
  /* Elimina separación extra entre letras. */
  letter-spacing: 0 !important;
  /* Aplica el color gris. */
  color: #b4b4b4 !important;
  /* Elimina márgenes internos del párrafo. */
  margin: 0 !important;
  /* Elimina rellenos internos. */
  padding: 0 !important;
}

/* Coloca el widget HTML de etiquetas al fondo de la tarjeta. */
.nd-map-wrap .nd-map-card .nd-map-card__html {
  /* Empuja el widget hasta la zona inferior disponible. */
  margin: auto 0 0 !important;
  /* Elimina rellenos del widget. */
  padding: 0 !important;
  /* Mantiene el widget en una sola fila. */
  display: flex !important;
  /* Permite bajar de línea únicamente si falta espacio. */
  flex-wrap: wrap !important;
  /* Separa las etiquetas. */
  gap: 9px !important;
  /* Utiliza todo el ancho interior. */
  width: 100% !important;
  /* Elimina alturas mínimas del constructor. */
  min-height: 0 !important;
}

/* Corrige el wrapper automático del widget HTML. */
.nd-map-wrap .nd-map-card .nd-map-card__html .elementor-widget-container {
  /* Coloca las etiquetas horizontalmente. */
  display: flex !important;
  /* Permite ajustar la fila cuando sea necesario. */
  flex-wrap: wrap !important;
  /* Separa las etiquetas. */
  gap: 9px !important;
  /* Utiliza todo el ancho disponible. */
  width: 100% !important;
  /* Elimina márgenes del wrapper. */
  margin: 0 !important;
  /* Elimina rellenos del wrapper. */
  padding: 0 !important;
}

/* Ajusta las tarjetas en pantallas más angostas. */
@media (max-width: 1050px) {
  /* Deja que cada tarjeta tenga más altura en tablet. */
  .nd-map-wrap .nd-map-cards {
    /* Crea tres filas de 320 píxeles. */
    grid-template-rows: repeat(3, 320px) !important;
  }

  /* Actualiza la altura de cada tarjeta en tablet. */
  .nd-map-wrap .nd-map-cards .nd-map-card {
    /* Fija la altura de tablet. */
    height: 320px !important;
    /* Conserva la misma altura mínima. */
    min-height: 320px !important;
  }
}

/* Ajusta las tarjetas en teléfonos. */
@media (max-width: 620px) {
  /* Permite tarjetas más altas para acomodar el contenido. */
  .nd-map-wrap .nd-map-cards {
    /* Crea tres filas de 390 píxeles. */
    grid-template-rows: repeat(3, 390px) !important;
  }

  /* Actualiza la altura y el espacio interior móvil. */
  .nd-map-wrap .nd-map-cards .nd-map-card {
    /* Fija la altura móvil. */
    height: 390px !important;
    /* Conserva la misma altura mínima. */
    min-height: 390px !important;
    /* Reduce el espacio interior lateral. */
    padding: 27px 22px 20px !important;
  }

  /* Permite que el texto use todo el ancho en móvil. */
  .nd-map-wrap .nd-map-card .nd-map-card__text {
    /* Utiliza todo el ancho disponible. */
    width: 100% !important;
    /* Elimina el máximo de escritorio. */
    max-width: none !important;
  }
}

/* =================================================================== */
/* DISEÑO FINAL DE CADA TARJETA                                         */
/* Estas reglas reproducen la tarjeta de la última imagen de referencia. */
/* Al estar al final del archivo, tienen prioridad sobre reglas previas.  */
/* =================================================================== */

/* Define el tamaño, fondo y distribución final de cada tarjeta. */
.nd-map-wrap .nd-map-card {
  /* Crea el punto de referencia para la fotografía y el degradado. */
  position: relative !important;
  /* Activa Flexbox para ordenar verticalmente el contenido. */
  display: flex !important;
  /* Coloca título, subtítulo, texto y etiquetas uno debajo de otro. */
  flex-direction: column !important;
  /* Alinea todo el contenido hacia el lado izquierdo. */
  align-items: flex-start !important;
  /* Mantiene el contenido comenzando desde la parte superior. */
  justify-content: flex-start !important;
  /* Hace que la tarjeta ocupe todo el ancho de su columna. */
  width: 100% !important;
  /* Establece una proporción horizontal similar a la referencia. */
  aspect-ratio: 2.32 / 1 !important;
  /* Evita que la tarjeta sea más baja de lo necesario. */
  min-height: 285px !important;
  /* Permite que la altura se adapte cuando el texto necesita más espacio. */
  height: auto !important;
  /* Agrega espacio interior alrededor del contenido. */
  padding: 34px 35px 20px !important;
  /* Elimina cualquier margen aplicado por el tema. */
  margin: 0 !important;
  /* Dibuja el borde gris oscuro y delgado de la referencia. */
  border: 1px solid rgba(177, 177, 177, 0.22) !important;
  /* Redondea las cuatro esquinas. */
  border-radius: 13px !important;
  /* Oculta cualquier parte de la fotografía fuera de las esquinas. */
  overflow: hidden !important;
  /* Utiliza negro como respaldo mientras carga la fotografía. */
  background-color: #060809 !important;
  /* Crea un contexto independiente para las capas internas. */
  isolation: isolate !important;
}

/* Genera automáticamente el degradado aunque no exista un widget overlay. */
.nd-map-wrap .nd-map-card::before {
  /* Crea una capa independiente dentro de la tarjeta. */
  content: "" !important;
  /* Coloca la capa respecto a los bordes de la tarjeta. */
  position: absolute !important;
  /* Extiende la capa por todo el espacio disponible. */
  inset: 0 !important;
  /* Coloca el degradado encima de la fotografía. */
  z-index: 1 !important;
  /* Oscurece la izquierda y permite ver más imagen hacia la derecha. */
  background:
    linear-gradient(
      90deg,
      rgba(2, 4, 5, 0.99) 0%,
      rgba(2, 4, 5, 0.96) 27%,
      rgba(2, 4, 5, 0.78) 49%,
      rgba(2, 4, 5, 0.30) 76%,
      rgba(2, 4, 5, 0.12) 100%
    ),
    linear-gradient(
      0deg,
      rgba(2, 4, 5, 0.30) 0%,
      rgba(2, 4, 5, 0.03) 58%,
      rgba(2, 4, 5, 0.20) 100%
    ) !important;
  /* Evita que la capa interfiera con enlaces o botones. */
  pointer-events: none !important;
}

/* Oculta el overlay HTML porque el degradado ya se genera con CSS. */
.nd-map-wrap .nd-map-card .nd-map-card__overlay {
  /* Evita que dos degradados superpuestos oscurezcan demasiado la imagen. */
  display: none !important;
}

/* Convierte el elemento o widget de imagen en el fondo completo. */
.nd-map-wrap .nd-map-card .nd-map-card__image {
  /* Saca la imagen del flujo normal del contenido. */
  position: absolute !important;
  /* La extiende hasta los cuatro bordes de la tarjeta. */
  inset: 0 !important;
  /* La coloca detrás del degradado y del contenido. */
  z-index: 0 !important;
  /* Obliga al elemento a llenar todo el ancho. */
  width: 100% !important;
  /* Obliga al elemento a llenar toda la altura. */
  height: 100% !important;
  /* Elimina límites de tamaño aplicados por el tema. */
  max-width: none !important;
  /* Elimina márgenes exteriores. */
  margin: 0 !important;
  /* Elimina rellenos interiores. */
  padding: 0 !important;
  /* Oculta cualquier parte sobrante de la fotografía. */
  overflow: hidden !important;
}

/* Hace que el contenedor automático del widget de imagen llene la tarjeta. */
.nd-map-wrap .nd-map-card .nd-map-card__image .elementor-widget-container {
  /* Utiliza todo el ancho del widget padre. */
  width: 100% !important;
  /* Utiliza toda la altura del widget padre. */
  height: 100% !important;
}

/* Controla la fotografía real, sea una imagen directa o de Elementor. */
.nd-map-wrap .nd-map-card img.nd-map-card__image,
.nd-map-wrap .nd-map-card .nd-map-card__image img {
  /* Elimina el espacio inferior propio de las imágenes inline. */
  display: block !important;
  /* Hace que la imagen cubra toda la anchura. */
  width: 100% !important;
  /* Hace que la imagen cubra toda la altura. */
  height: 100% !important;
  /* Elimina el límite global de anchura de WordPress. */
  max-width: none !important;
  /* Recorta la fotografía sin estirarla ni deformarla. */
  object-fit: cover !important;
  /* Prioriza la zona derecha, donde aparecen edificios y playa. */
  object-position: center right !important;
}

/* Si existe nd-map-card__content, lo vuelve transparente para no alterar la tarjeta. */
.nd-map-wrap .nd-map-card .nd-map-card__content {
  /* Mantiene el bloque por encima de la imagen. */
  position: relative !important;
  /* Coloca todo su contenido encima del degradado. */
  z-index: 2 !important;
  /* Ordena sus hijos verticalmente. */
  display: flex !important;
  /* Apila los elementos uno debajo de otro. */
  flex-direction: column !important;
  /* Alinea todo hacia la izquierda. */
  align-items: flex-start !important;
  /* Comienza desde la parte superior del bloque. */
  justify-content: flex-start !important;
  /* Permite que el contenido use el ancho disponible de la tarjeta. */
  width: 100% !important;
  /* Elimina el máximo de ancho anterior. */
  max-width: none !important;
  /* Permite que la altura dependa de sus elementos. */
  height: 100% !important;
  /* Elimina el relleno porque ahora lo controla la tarjeta. */
  padding: 0 !important;
  /* Elimina márgenes que desplazarían el contenido. */
  margin: 0 !important;
  /* No agrega un fondo que tape la fotografía. */
  background: transparent !important;
}

/* Asegura que los widgets directos siempre queden encima del degradado. */
.nd-map-wrap .nd-map-card > .nd-map-card__title,
.nd-map-wrap .nd-map-card > .nd-map-card__subtitle,
.nd-map-wrap .nd-map-card > .nd-map-card__text,
.nd-map-wrap .nd-map-card > .nd-map-card__html {
  /* Permite controlar la posición de cada bloque. */
  position: relative !important;
  /* Coloca el bloque encima del degradado. */
  z-index: 2 !important;
}

/* Define la apariencia final del título de la ciudad. */
.nd-map-wrap .nd-map-card__title {
  /* Coloca el pin y el nombre de la ciudad en la misma fila. */
  display: flex !important;
  /* Centra verticalmente el pin y el texto. */
  align-items: center !important;
  /* Separa el pin del nombre de la ciudad. */
  gap: 15px !important;
  /* Elimina márgenes globales y agrega un espacio inferior pequeño. */
  margin: 0 0 3px !important;
  /* Usa una tipografía limpia como en la referencia. */
  font-family: Arial, sans-serif !important;
  /* Aplica un peso medio, no condensado. */
  font-weight: 500 !important;
  /* Define un tamaño adaptable para el encabezado. */
  font-size: clamp(27px, 2.15vw, 36px) !important;
  /* Mantiene la altura de línea compacta. */
  line-height: 1.1 !important;
  /* Conserva mayúsculas y minúsculas originales. */
  text-transform: none !important;
  /* Elimina separación adicional entre letras. */
  letter-spacing: 0 !important;
  /* Aplica el color blanco del diseño. */
  color: #f5f5f3 !important;
}

/* Aplica el mismo estilo si la clase está colocada en un widget de encabezado. */
.nd-map-wrap .nd-map-card__title .elementor-heading-title {
  /* Hereda el tipo de letra definido en el widget padre. */
  font-family: inherit !important;
  /* Hereda el peso del encabezado padre. */
  font-weight: inherit !important;
  /* Hereda el tamaño del encabezado padre. */
  font-size: inherit !important;
  /* Hereda la altura de línea del encabezado padre. */
  line-height: inherit !important;
  /* Conserva la capitalización original. */
  text-transform: none !important;
  /* Elimina el espaciado de letras heredado del tema. */
  letter-spacing: 0 !important;
  /* Utiliza el color blanco del encabezado. */
  color: inherit !important;
  /* Elimina los márgenes predeterminados del elemento h2. */
  margin: 0 !important;
}

/* Dibuja el icono de ubicación cuando el título no contiene un pin HTML. */
.nd-map-wrap .nd-map-card__title:not(:has(.nd-map-card__pin))::before {
  /* Crea el cuerpo visible del marcador. */
  content: "" !important;
  /* Evita que el marcador se reduzca dentro de Flexbox. */
  flex: 0 0 18px !important;
  /* Define el ancho del marcador. */
  width: 18px !important;
  /* Define la altura del marcador. */
  height: 24px !important;
  /* Redondea el marcador y deja una esquina puntiaguda. */
  border-radius: 50% 50% 50% 0 !important;
  /* Aplica el color dorado. */
  background: #d6a638 !important;
  /* Gira la forma para que apunte hacia abajo. */
  transform: rotate(-45deg) !important;
  /* Agrega una sombra suave similar a la referencia. */
  box-shadow: 0 0 5px rgba(214, 166, 56, 0.20) !important;
}

/* Ajusta el pin HTML existente para que coincida con la referencia. */
.nd-map-wrap .nd-map-card__pin {
  /* Define el ancho visible del marcador. */
  width: 18px !important;
  /* Define la altura visible del marcador. */
  height: 24px !important;
  /* Evita que Flexbox reduzca el icono. */
  flex: 0 0 18px !important;
  /* Mantiene la forma redondeada con una esquina puntiaguda. */
  border-radius: 50% 50% 50% 0 !important;
  /* Aplica el dorado principal. */
  background: #d6a638 !important;
}

/* Coloca y dimensiona el círculo interior del marcador. */
.nd-map-wrap .nd-map-card__pin::after {
  /* Sitúa el círculo desde la parte superior. */
  top: 6px !important;
  /* Sitúa el círculo desde la parte izquierda. */
  left: 6px !important;
  /* Define el ancho del círculo. */
  width: 6px !important;
  /* Define la altura del círculo. */
  height: 6px !important;
}

/* Define la apariencia final del estado. */
.nd-map-wrap .nd-map-card__subtitle {
  /* Alinea el estado debajo del texto del título y no debajo del pin. */
  margin: 2px 0 0 36px !important;
  /* Usa Arial para evitar la tipografía condensada de la captura anterior. */
  font-family: Arial, sans-serif !important;
  /* Mantiene el estado destacado en negritas. */
  font-weight: 700 !important;
  /* Define el tamaño compacto del subtítulo. */
  font-size: 14px !important;
  /* Mantiene la altura de línea controlada. */
  line-height: 1.2 !important;
  /* Convierte el estado a mayúsculas. */
  text-transform: uppercase !important;
  /* Agrega separación moderada entre letras. */
  letter-spacing: 1px !important;
  /* Aplica el color dorado. */
  color: #d6a638 !important;
}

/* Aplica el estilo del estado a su encabezado interno de Elementor. */
.nd-map-wrap .nd-map-card__subtitle .elementor-heading-title {
  /* Hereda la fuente del widget padre. */
  font-family: inherit !important;
  /* Hereda el peso del widget padre. */
  font-weight: inherit !important;
  /* Hereda el tamaño del widget padre. */
  font-size: inherit !important;
  /* Hereda la altura de línea. */
  line-height: inherit !important;
  /* Mantiene las mayúsculas del diseño. */
  text-transform: inherit !important;
  /* Mantiene el espacio entre letras. */
  letter-spacing: inherit !important;
  /* Hereda el color dorado. */
  color: inherit !important;
  /* Elimina márgenes propios del encabezado. */
  margin: 0 !important;
}

/* Crea la pequeña línea dorada debajo del estado. */
.nd-map-wrap .nd-map-card__subtitle::after {
  /* Crea el elemento decorativo. */
  content: "" !important;
  /* Coloca la línea en su propia fila. */
  display: block !important;
  /* Define la longitud de la línea. */
  width: 44px !important;
  /* Define el grosor de la línea. */
  height: 2px !important;
  /* Separa la línea del texto del estado. */
  margin-top: 14px !important;
  /* Desvanece el dorado hacia la derecha. */
  background: linear-gradient(90deg, #f0bd42, transparent) !important;
  /* Añade un brillo sutil. */
  box-shadow: 0 0 5px rgba(240, 189, 66, 0.40) !important;
}

/* Define la apariencia y colocación del párrafo. */
.nd-map-wrap .nd-map-card__text {
  /* Limita el ancho para que la fotografía permanezca visible a la derecha. */
  width: min(54%, 420px) !important;
  /* Elimina cualquier límite incompatible del tema. */
  max-width: 420px !important;
  /* Separa el párrafo de la línea y de las etiquetas. */
  margin: 18px 0 0 !important;
  /* Usa Arial para una apariencia limpia. */
  font-family: Arial, sans-serif !important;
  /* Aplica un peso regular. */
  font-weight: 400 !important;
  /* Define un tamaño similar al de la referencia. */
  font-size: 15px !important;
  /* Mantiene una lectura cómoda en varias líneas. */
  line-height: 1.48 !important;
  /* Conserva la capitalización original. */
  text-transform: none !important;
  /* Elimina el espaciado de fuente monoespaciada. */
  letter-spacing: 0 !important;
  /* Aplica un gris claro. */
  color: #b4b4b4 !important;
}

/* Corrige los párrafos internos de un widget de editor de texto. */
.nd-map-wrap .nd-map-card__text p {
  /* Hereda la tipografía del contenedor. */
  font-family: inherit !important;
  /* Hereda el peso de fuente. */
  font-weight: inherit !important;
  /* Hereda el tamaño definido para el texto. */
  font-size: inherit !important;
  /* Hereda la altura de línea. */
  line-height: inherit !important;
  /* Hereda el color gris. */
  color: inherit !important;
  /* Elimina márgenes que crearían espacios irregulares. */
  margin: 0 !important;
}

/* Coloca las etiquetas en la zona inferior de la tarjeta. */
.nd-map-wrap .nd-map-card__html {
  /* Empuja las etiquetas hacia el borde inferior de la tarjeta. */
  margin-top: auto !important;
  /* Coloca las etiquetas horizontalmente. */
  display: flex !important;
  /* Permite ajustar las etiquetas si el ancho disminuye. */
  flex-wrap: wrap !important;
  /* Separa cada etiqueta de la siguiente. */
  gap: 9px !important;
  /* Permite que el bloque use todo el ancho disponible. */
  width: 100% !important;
}

/* Mantiene la misma distribución dentro de un widget HTML de Elementor. */
.nd-map-wrap .nd-map-card__html .elementor-widget-container {
  /* Activa Flexbox en el contenedor automático. */
  display: flex !important;
  /* Mantiene las etiquetas en una fila cuando hay espacio. */
  flex-wrap: wrap !important;
  /* Separa uniformemente las etiquetas. */
  gap: 9px !important;
  /* Permite que el widget use todo el ancho. */
  width: 100% !important;
}

/* Define la apariencia individual de cada etiqueta. */
.nd-map-wrap .nd-map-card__html span,
.nd-map-wrap .nd-map-card__html a {
  /* Añade espacio interno horizontal y vertical. */
  padding: 9px 14px !important;
  /* Dibuja el borde dorado oscuro. */
  border: 1px solid rgba(174, 126, 28, 0.65) !important;
  /* Redondea ligeramente las esquinas. */
  border-radius: 4px !important;
  /* Utiliza un fondo oscuro semitransparente. */
  background: rgba(5, 7, 8, 0.72) !important;
  /* Aplica Arial en negritas. */
  font-family: Arial, sans-serif !important;
  /* Destaca el texto de la etiqueta. */
  font-weight: 700 !important;
  /* Define un tamaño pequeño y legible. */
  font-size: 12px !important;
  /* Controla la altura interna de la etiqueta. */
  line-height: 1 !important;
  /* Convierte el contenido a mayúsculas. */
  text-transform: uppercase !important;
  /* Agrega una separación muy ligera. */
  letter-spacing: 0.2px !important;
  /* Aplica el color dorado. */
  color: #d6a638 !important;
  /* Elimina subrayados si la etiqueta es un enlace. */
  text-decoration: none !important;
  /* Evita que una etiqueta se divida en dos líneas. */
  white-space: nowrap !important;
}

/* Ajusta la tarjeta para pantallas medianas. */
@media (max-width: 1250px) {
  /* Reduce ligeramente el espacio interior. */
  .nd-map-wrap .nd-map-card {
    /* Aprovecha mejor el ancho disponible. */
    padding: 27px 28px 18px !important;
    /* Permite una tarjeta algo más alta cuando disminuye el ancho. */
    aspect-ratio: 2.05 / 1 !important;
  }

  /* Permite que el párrafo use más espacio en pantallas medianas. */
  .nd-map-wrap .nd-map-card__text {
    /* Aumenta la zona del texto sin tapar completamente la fotografía. */
    width: min(64%, 420px) !important;
  }
}

/* Ajusta cada tarjeta para teléfonos. */
@media (max-width: 620px) {
  /* Hace la tarjeta más alta para acomodar todo el contenido. */
  .nd-map-wrap .nd-map-card {
    /* Desactiva la proporción horizontal de escritorio. */
    aspect-ratio: auto !important;
    /* Da suficiente altura al contenido móvil. */
    min-height: 390px !important;
    /* Reduce el espacio interior lateral. */
    padding: 27px 22px 20px !important;
  }

  /* Oscurece más la fotografía para mantener legible el texto móvil. */
  .nd-map-wrap .nd-map-card::before {
    /* Utiliza un degradado más fuerte y uniforme. */
    background:
      linear-gradient(
        90deg,
        rgba(2, 4, 5, 0.97) 0%,
        rgba(2, 4, 5, 0.88) 70%,
        rgba(2, 4, 5, 0.50) 100%
      ) !important;
  }

  /* Permite que el párrafo utilice todo el ancho en móvil. */
  .nd-map-wrap .nd-map-card__text {
    /* Elimina la limitación horizontal de escritorio. */
    width: 100% !important;
    /* Permite usar todo el ancho disponible. */
    max-width: none !important;
  }
}

/* ================================================================ */
/* COMPATIBILIDAD CON ELEMENTOR Y OTROS CONSTRUCTORES VISUALES       */
/* Estas reglas corrigen los estilos globales que muestra la captura. */
/* ================================================================ */

/* Si nd-map-wrap está colocado en un contenedor de Elementor, esta regla */
/* convierte el contenedor interior automático en la cuadrícula principal. */
.nd-map-wrap > .e-con-inner {
  /* Activa la distribución en columnas dentro del wrapper de Elementor. */
  display: grid !important;
  /* Crea una columna para el mapa y otra columna para las tres tarjetas. */
  grid-template-columns: minmax(0, 1.08fr) minmax(500px, 0.92fr) !important;
  /* Mantiene una separación pequeña entre las dos columnas. */
  gap: 12px !important;
  /* Permite que el contenido utilice todo el ancho disponible. */
  width: 100% !important;
  /* Elimina el límite de ancho predeterminado de Elementor. */
  max-width: none !important;
  /* Establece la altura visual de la composición de escritorio. */
  min-height: 860px !important;
  /* Elimina márgenes que puedan descentrar la cuadrícula. */
  margin: 0 !important;
  /* Elimina rellenos automáticos porque nd-map-wrap ya controla el espacio. */
  padding: 0 !important;
}

/* Fuerza al contenedor del mapa a llenar toda su celda de la cuadrícula. */
.nd-map-wrap .nd-map-image {
  /* Hace que el mapa se estire de arriba a abajo. */
  align-self: stretch !important;
  /* Garantiza que ocupe todo el ancho de su columna. */
  width: 100% !important;
  /* Garantiza que ocupe toda la altura disponible. */
  height: 100% !important;
  /* Evita alturas mínimas heredadas del constructor. */
  min-height: 0 !important;
  /* Elimina espacios exteriores inesperados. */
  margin: 0 !important;
  /* Elimina espacios interiores inesperados. */
  padding: 0 !important;
}

/* Convierte el wrapper interno del widget de imagen en un elemento de altura completa. */
.nd-map-wrap .nd-map-image .elementor-widget-container {
  /* Hace que el wrapper ocupe toda la anchura del mapa. */
  width: 100% !important;
  /* Hace que el wrapper ocupe toda la altura del mapa. */
  height: 100% !important;
}

/* Controla tanto imágenes HTML normales como imágenes insertadas por Elementor. */
.nd-map-wrap .nd-map-image img,
.nd-map-wrap .nd-map-image .elementor-widget-container img {
  /* Convierte la imagen en bloque para eliminar espacios inferiores. */
  display: block !important;
  /* Obliga a la imagen a llenar todo el ancho de su contenedor. */
  width: 100% !important;
  /* Obliga a la imagen a llenar toda la altura de su contenedor. */
  height: 100% !important;
  /* Elimina el límite de ancho que algunos temas aplican a las imágenes. */
  max-width: none !important;
  /* Recorta la imagen manteniendo sus proporciones originales. */
  object-fit: cover !important;
  /* Mantiene centrada la parte importante del mapa. */
  object-position: center center !important;
  /* Elimina márgenes añadidos por el tema. */
  margin: 0 !important;
}

/* Obliga al contenedor derecho a apilar exactamente tres tarjetas iguales. */
.nd-map-wrap .nd-map-cards {
  /* Activa Grid aunque el constructor haya configurado Flexbox. */
  display: grid !important;
  /* Divide la altura disponible en tres filas iguales. */
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  /* Coloca todas las tarjetas en una sola columna. */
  grid-template-columns: minmax(0, 1fr) !important;
  /* Añade separación vertical entre las tarjetas. */
  gap: 12px !important;
  /* Utiliza todo el ancho de la columna derecha. */
  width: 100% !important;
  /* Utiliza toda la altura del mapa. */
  height: 100% !important;
  /* Evita márgenes externos del constructor. */
  margin: 0 !important;
  /* Evita rellenos internos del constructor. */
  padding: 0 !important;
}

/* Corrige cada tarjeta cuando también es un contenedor de Elementor. */
.nd-map-wrap .nd-map-card {
  /* Permite colocar imagen, degradado y contenido uno encima de otro. */
  position: relative !important;
  /* Hace que el contenido se mantenga dentro de los bordes redondeados. */
  overflow: hidden !important;
  /* Obliga a la tarjeta a llenar toda su fila. */
  width: 100% !important;
  /* Obliga a la tarjeta a llenar toda su fila verticalmente. */
  height: 100% !important;
  /* Elimina la altura mínima definida por el tema. */
  min-height: 0 !important;
  /* Elimina separaciones exteriores inesperadas. */
  margin: 0 !important;
  /* Elimina rellenos añadidos por el constructor. */
  padding: 0 !important;
  /* Asegura que las tarjetas estén apiladas verticalmente y no en fila. */
  flex-direction: column !important;
}

/* Si la clase de imagen está en un widget, coloca todo el widget como fondo. */
.nd-map-wrap .nd-map-card .nd-map-card__image {
  /* Saca el widget del flujo normal para evitar la imagen pequeña de la captura. */
  position: absolute !important;
  /* Extiende el widget por los cuatro lados de la tarjeta. */
  inset: 0 !important;
  /* Hace que el widget llene toda la anchura. */
  width: 100% !important;
  /* Hace que el widget llene toda la altura. */
  height: 100% !important;
  /* Elimina máximos de anchura heredados. */
  max-width: none !important;
  /* Coloca la imagen detrás del degradado y del texto. */
  z-index: 0 !important;
  /* Elimina márgenes del widget. */
  margin: 0 !important;
  /* Elimina rellenos del widget. */
  padding: 0 !important;
}

/* Hace que el wrapper interno del widget de imagen también ocupe toda la tarjeta. */
.nd-map-wrap .nd-map-card .nd-map-card__image .elementor-widget-container {
  /* Utiliza toda la anchura disponible. */
  width: 100% !important;
  /* Utiliza toda la altura disponible. */
  height: 100% !important;
}

/* Controla la fotografía real cuando nd-map-card__image está en el widget padre. */
.nd-map-wrap .nd-map-card .nd-map-card__image img {
  /* Elimina el comportamiento inline de la imagen. */
  display: block !important;
  /* Hace que la fotografía cubra todo el ancho. */
  width: 100% !important;
  /* Hace que la fotografía cubra toda la altura. */
  height: 100% !important;
  /* Elimina límites de anchura del tema. */
  max-width: none !important;
  /* Recorta la fotografía sin deformarla. */
  object-fit: cover !important;
  /* Conserva visible principalmente el lado derecho de la escena. */
  object-position: center right !important;
}

/* Coloca el degradado sobre la fotografía cuando existe como elemento separado. */
.nd-map-wrap .nd-map-card .nd-map-card__overlay {
  /* Extiende la capa por toda la tarjeta. */
  position: absolute !important;
  /* Equivale a top, right, bottom y left en cero. */
  inset: 0 !important;
  /* La coloca encima de la fotografía. */
  z-index: 1 !important;
  /* Evita que esta capa invisible bloquee clics. */
  pointer-events: none !important;
}

/* Mantiene todo el texto encima de la fotografía y del degradado. */
.nd-map-wrap .nd-map-card .nd-map-card__content {
  /* Conserva el contenido dentro del flujo de la tarjeta. */
  position: relative !important;
  /* Coloca el contenido por encima de las otras capas. */
  z-index: 2 !important;
  /* Activa Flexbox para ordenar títulos, texto y etiquetas. */
  display: flex !important;
  /* Apila todos los elementos verticalmente. */
  flex-direction: column !important;
  /* Alinea todo el contenido a la izquierda. */
  align-items: flex-start !important;
  /* Centra verticalmente el bloque de información. */
  justify-content: center !important;
  /* Limita el texto a la zona izquierda para revelar la fotografía. */
  width: 68% !important;
  /* Hace que el contenido utilice toda la altura de la tarjeta. */
  height: 100% !important;
  /* Elimina cualquier máximo de ancho establecido por el tema. */
  max-width: 540px !important;
  /* Añade espacio uniforme alrededor del contenido. */
  padding: 24px 34px !important;
  /* Elimina márgenes externos heredados. */
  margin: 0 !important;
}

/* Corrige el widget o encabezado principal de cada ciudad. */
.nd-map-wrap .nd-map-card__title,
.nd-map-wrap .nd-map-card__title h1,
.nd-map-wrap .nd-map-card__title h2,
.nd-map-wrap .nd-map-card__title h3,
.nd-map-wrap .nd-map-card__title .elementor-heading-title {
  /* Utiliza Arial en lugar de la fuente condensada mostrada en la captura. */
  font-family: Arial, sans-serif !important;
  /* Aplica un peso medio, similar a la referencia. */
  font-weight: 500 !important;
  /* Define un tamaño adaptable pero controlado. */
  font-size: clamp(28px, 2.2vw, 38px) !important;
  /* Mantiene compactas las líneas del encabezado. */
  line-height: 1.08 !important;
  /* Evita que el constructor convierta el título a mayúsculas. */
  text-transform: none !important;
  /* Elimina el espacio excesivo entre letras. */
  letter-spacing: 0 !important;
  /* Aplica el color blanco del diseño. */
  color: var(--nd-white) !important;
  /* Elimina márgenes globales de los encabezados. */
  margin: 0 !important;
}

/* Corrige el widget o encabezado secundario que contiene el estado. */
.nd-map-wrap .nd-map-card__subtitle,
.nd-map-wrap .nd-map-card__subtitle h1,
.nd-map-wrap .nd-map-card__subtitle h2,
.nd-map-wrap .nd-map-card__subtitle h3,
.nd-map-wrap .nd-map-card__subtitle .elementor-heading-title {
  /* Utiliza una tipografía limpia y legible. */
  font-family: Arial, sans-serif !important;
  /* Mantiene el texto en negritas. */
  font-weight: 700 !important;
  /* Reduce el tamaño para crear jerarquía visual. */
  font-size: 14px !important;
  /* Controla la altura de la línea. */
  line-height: 1.2 !important;
  /* Convierte el nombre del estado a mayúsculas. */
  text-transform: uppercase !important;
  /* Añade separación sutil entre letras. */
  letter-spacing: 1.2px !important;
  /* Aplica el color dorado. */
  color: var(--nd-gold) !important;
}

/* Corrige tanto un párrafo directo como un widget de editor de texto. */
.nd-map-wrap .nd-map-card__text,
.nd-map-wrap .nd-map-card__text p,
.nd-map-wrap .nd-map-card__text .elementor-widget-container {
  /* Utiliza una fuente normal y no monoespaciada. */
  font-family: Arial, sans-serif !important;
  /* Usa un peso regular para facilitar la lectura. */
  font-weight: 400 !important;
  /* Define el tamaño de lectura de escritorio. */
  font-size: 16px !important;
  /* Genera líneas compactas y fáciles de leer. */
  line-height: 1.5 !important;
  /* Evita transformaciones globales del tema. */
  text-transform: none !important;
  /* Elimina el espaciado excesivo entre caracteres. */
  letter-spacing: 0 !important;
  /* Aplica el color gris claro. */
  color: var(--nd-muted) !important;
}

/* Asegura que las etiquetas del bloque HTML se mantengan en una fila flexible. */
.nd-map-wrap .nd-map-card__html,
.nd-map-wrap .nd-map-card__html .elementor-widget-container {
  /* Coloca las etiquetas una al lado de la otra. */
  display: flex !important;
  /* Permite que bajen de línea solamente cuando falte espacio. */
  flex-wrap: wrap !important;
  /* Separa uniformemente las etiquetas. */
  gap: 10px !important;
  /* Evita columnas heredadas del constructor. */
  width: 100% !important;
}

/* Adaptación especial de la estructura de Elementor para tablets. */
@media (max-width: 1050px) {
  /* Convierte el wrapper automático de Elementor en una sola columna. */
  .nd-map-wrap > .e-con-inner {
    /* Coloca primero el mapa y después las tarjetas. */
    grid-template-columns: minmax(0, 1fr) !important;
    /* Deja que el contenido determine su altura total. */
    min-height: auto !important;
  }

  /* Da una altura visible al mapa cuando queda encima de las tarjetas. */
  .nd-map-wrap .nd-map-image {
    /* Mantiene el mapa grande y legible en tablet. */
    min-height: 620px !important;
  }

  /* Permite que las tarjetas determinen su altura individual. */
  .nd-map-wrap .nd-map-cards {
    /* Elimina el reparto forzado de altura de escritorio. */
    grid-template-rows: repeat(3, minmax(300px, auto)) !important;
  }
}

/* Adaptación especial para teléfonos. */
@media (max-width: 620px) {
  /* Reduce la altura del mapa en pantallas pequeñas. */
  .nd-map-wrap .nd-map-image {
    /* Mantiene una proporción práctica para móvil. */
    min-height: 440px !important;
  }

  /* Permite que las tarjetas tengan suficiente espacio vertical. */
  .nd-map-wrap .nd-map-cards {
    /* Cada tarjeta tendrá como mínimo 380 píxeles de alto. */
    grid-template-rows: repeat(3, minmax(380px, auto)) !important;
  }

  /* Permite que el texto ocupe el ancho completo sobre la fotografía. */
  .nd-map-wrap .nd-map-card .nd-map-card__content {
    /* Usa todo el ancho disponible de la tarjeta. */
    width: 100% !important;
    /* Elimina el máximo utilizado en escritorio. */
    max-width: none !important;
    /* Reduce el espacio interior para pantallas angostas. */
    padding: 24px 22px !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-969fb62 *//* ==========================================================================
   NIVEL DELTA EN NUMEROS
   Seccion independiente y responsiva.
   ========================================================================== */

.nd-num-wrap {
  --nd-num-bg: #cbae70;
  --nd-num-text: #050505;
  --nd-num-line: rgba(5, 5, 5, 0.14);
  --nd-num-ghost: rgba(5, 5, 5, 0.07);
  --nd-num-max-w: 1900px;

  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  isolation: isolate !important;
  padding: 25px 20px 15px !important;
  color: var(--nd-num-text) !important;
  background: var(--nd-num-bg) !important;
}

/* Texto decorativo gigante del fondo. */
.nd-num-wrap::before {
  content: "NIVEL DELTA" !important;
  position: absolute !important;
  z-index: -1 !important;
  top: 50% !important;
  left: 50% !important;
  width: max-content !important;
  color: var(--nd-num-ghost) !important;
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: clamp(110px, 13vw, 245px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

.nd-num-inner {
  width: 100% !important;
  max-width: var(--nd-num-max-w) !important;
  margin: 0 auto !important;
}

.nd-num-heading {
  margin: 0 0 48px !important;
  text-align: center !important;
}

.nd-num-kicker {
  display: block !important;
  margin: 0 0 16px !important;
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.38em !important;
  text-transform: uppercase !important;
  opacity: 0.58 !important;
}

.nd-num-heading h2 {
  margin: 0 !important;
  color: var(--nd-num-text) !important;
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: clamp(32px, 3vw, 48px) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.nd-num-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
}

.nd-num-stat {
  position: relative !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 118px !important;
  padding: 8px 28px !important;
  text-align: center !important;
}

.nd-num-stat:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  width: 1px !important;
  height: 92px !important;
  background: var(--nd-num-line) !important;
  transform: translateY(-50%) !important;
}

.nd-num-stat strong {
  display: block !important;
  margin: 0 0 14px !important;
  color: var(--nd-num-text) !important;
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: clamp(54px, 5vw, 76px) !important;
  font-weight: 400 !important;
  line-height: 0.9 !important;
  letter-spacing: 0 !important;
}

.nd-num-stat span {
  display: block !important;
  color: var(--nd-num-text) !important;
  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  opacity: 0.62 !important;
}

/* Tablet: dos columnas. */
@media (max-width: 1024px) {
  .nd-num-wrap {
    padding: 52px 26px !important;
  }

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

  .nd-num-stat {
    min-height: 140px !important;
  }

  .nd-num-stat:nth-child(2)::after {
    display: none !important;
  }

  .nd-num-stat:nth-child(-n + 2) {
    border-bottom: 1px solid var(--nd-num-line) !important;
  }
}

/* Movil: una columna y separadores horizontales. */
@media (max-width: 560px) {
  .nd-num-wrap {
    padding: 44px 18px !important;
  }

  .nd-num-wrap::before {
    font-size: 145px !important;
    line-height: 0.9 !important;
    white-space: nowrap !important;
    transform: translate(-50%, -48%) rotate(-90deg) !important;
  }

  .nd-num-heading {
    margin-bottom: 30px !important;
  }

  .nd-num-heading h2 {
    font-size: 28px !important;
    letter-spacing: 0.05em !important;
  }

  .nd-num-grid {
    grid-template-columns: 1fr !important;
  }

  .nd-num-stat {
    min-height: 116px !important;
    border-bottom: 1px solid var(--nd-num-line) !important;
  }

  .nd-num-stat:last-child {
    border-bottom: 0 !important;
  }

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

  .nd-num-stat strong {
    font-size: 54px !important;
  }
}/* End custom CSS */