.elementor-kit-8{--e-global-color-primary:#0A0A0A;--e-global-color-secondary:#C8A96E;--e-global-color-text:#F5F5F0;--e-global-color-accent:#1A1A1A;--e-global-color-fd7bfb6:#0A0A0A;--e-global-color-7686d2f:#111111;--e-global-color-dcae2cd:#1A1A1A;--e-global-color-d43d70d:#C8A96E;--e-global-color-340d615:#DFC08A;--e-global-color-3935be0:#F5F5F0;--e-global-color-2c93b05:#888888;--e-global-typography-primary-font-family:"Bebas Neue";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Outfit";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Outfit";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Bebas Neue";--e-global-typography-accent-font-weight:500;--e-global-typography-bc04874-font-family:"Bebas Neue";--e-global-typography-bc04874-font-weight:400;--e-global-typography-ce3dc36-font-family:"Outfit";--e-global-typography-ce3dc36-font-weight:300;background-color:#0A0A0A;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==============================================================================
   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 */