.elementor-24 .elementor-element.elementor-element-d2ed16b{--display:flex;--min-height:100vh;--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:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-24 .elementor-element.elementor-element-d2ed16b:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-d2ed16b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0D1F1B;}.elementor-24 .elementor-element.elementor-element-f25abbc{--display:flex;--min-height:0px;--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-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-24 .elementor-element.elementor-element-e0a8201{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-24 .elementor-element.elementor-element-d721654 .elementor-heading-title{font-family:"DM Sans", Sans-serif;font-size:4.5rem;font-weight:700;color:var( --e-global-color-text );}.elementor-24 .elementor-element.elementor-element-5b342e2{width:var( --container-widget-width, 55% );max-width:55%;margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:55%;--container-widget-flex-grow:0;text-align:center;}.elementor-24 .elementor-element.elementor-element-5b342e2 .elementor-heading-title{font-family:"DM Sans", Sans-serif;font-size:1.25rem;font-weight:400;color:#88918F;}@media(max-width:1024px){.elementor-24 .elementor-element.elementor-element-d721654 .elementor-heading-title{font-size:3.5rem;}.elementor-24 .elementor-element.elementor-element-5b342e2 .elementor-heading-title{font-size:1.1rem;}}@media(max-width:767px){.elementor-24 .elementor-element.elementor-element-d721654{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:center;}.elementor-24 .elementor-element.elementor-element-d721654 .elementor-heading-title{font-size:2.1rem;}.elementor-24 .elementor-element.elementor-element-5b342e2{--container-widget-width:80%;--container-widget-flex-grow:0;width:var( --container-widget-width, 80% );max-width:80%;}.elementor-24 .elementor-element.elementor-element-5b342e2 .elementor-heading-title{font-size:0.9rem;}}/* Start custom CSS *//* =============================================
   IMPORTAR FUENTES
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=DM+Sans:wght@400;500;600&display=swap');

/* =============================================
   FONDO: CUADRÍCULA SUTIL
   ============================================= */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(18, 211, 137, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 211, 137, 0.07) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 0;
  pointer-events: none;
}

/* =============================================
   AURA / GLOW VERDE CENTRAL
   ============================================= */
.hero-section::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 700px;
  height: 500px;
  background: radial-gradient(
    ellipse at center,
    rgba(18, 211, 137, 0.18) 0%,
    rgba(18, 211, 137, 0.08) 35%,
    transparent 70%
  );
  z-index: 0;
  pointer-events: none;
  filter: blur(20px);
}

/* Asegurar que el contenido esté sobre los pseudoelementos */
.hero-section .elementor-container,
.hero-section .elementor-widget-wrap,
.hero-section .e-con-inner,
.hero-section .e-con {
  position: relative;
  z-index: 1;
}

/* =============================================
   BADGE: "• INNOVACIÓN DIGITAL ACTIVA"
   ============================================= */
.badge-innovacion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(18, 211, 137, 0.08);
  border: 1px solid rgba(18, 211, 137, 0.25);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C1C7C6;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  margin-bottom: 24px;
  height: 30px;
  width: 260px;
}

.badge-innovacion::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #12D389;
    box-shadow: 0 0 8px #12D389;
    animation: pulse-dot 2s ease-in-out infinite;
    flex-shrink: 0;
    position: absolute;
    top: 10px;
    left: 15px;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px #12D389; }
  50% { opacity: 0.5; box-shadow: 0 0 3px #12D389; }
}

/* =============================================
   TÍTULO PRINCIPAL
   ============================================= */
.hero-title {
  font-size: clamp(48px, 7vw, 90px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  color: #C1C7C6 !important;
  font-family: 'Sora', sans-serif !important;
  text-align: center;
  margin-bottom: 24px;
}

.hero-title .verde {
  color: #12D389;
}

/* =============================================
   SUBTÍTULO
   ============================================= */
.hero-subtitle {
  font-size: 18px;
  color: #C1C7C6;
  opacity: 0.75;
  max-width: 580px;
  margin: 0 auto 40px;
  line-height: 1.7;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
}

/* =============================================
   BOTONES
   ============================================= */
.btn-primary-hero,
.btn-primary-hero .elementor-button {
  background: #12D389 !important;
  color: #0D1F1B !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 16px 32px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 0 24px rgba(18, 211, 137, 0.3) !important;
}

.btn-primary-hero:hover .elementor-button,
.btn-primary-hero .elementor-button:hover {
  background: #0fb874 !important;
  box-shadow: 0 0 36px rgba(18, 211, 137, 0.5) !important;
  transform: translateY(-2px) !important;
}

.btn-secondary-hero,
.btn-secondary-hero .elementor-button {
  background: transparent !important;
  color: #C1C7C6 !important;
  border: 1px solid rgba(193, 199, 198, 0.3) !important;
  border-radius: 8px !important;
  padding: 16px 32px !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: all 0.25s ease !important;
}

.btn-secondary-hero:hover .elementor-button,
.btn-secondary-hero .elementor-button:hover {
  border-color: rgba(18, 211, 137, 0.5) !important;
  color: #12D389 !important;
  background: rgba(18, 211, 137, 0.05) !important;
}

/* =============================================
   BARRA DE TECNOLOGÍAS
   ============================================= */
.tech-bar {
  display: flex;
  gap: 0;
  justify-content: center;
  align-items: center;
  margin-top: 64px;
  flex-wrap: wrap;
  row-gap: 12px;
}

.tech-bar span {
  font-size: 13px;
  color: #C1C7C6;
  opacity: 0.45;
  letter-spacing: 0.05em;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  transition: opacity 0.2s;
  padding: 0 20px;
}

.tech-bar span:hover {
  opacity: 0.9;
}

.tech-bar span:not(:last-child) {
  border-right: 1px solid rgba(193, 199, 198, 0.15);
}

/* =============================================
   ANIMACIONES DE ENTRADA
   ============================================= */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeup-1 { animation: fadeUp 0.7s ease forwards; }
.animate-fadeup-2 { animation: fadeUp 0.7s ease 0.15s forwards; opacity: 0; }
.animate-fadeup-3 { animation: fadeUp 0.7s ease 0.3s forwards; opacity: 0; }
.animate-fadeup-4 { animation: fadeUp 0.7s ease 0.45s forwards; opacity: 0; }
.animate-fadeup-5 { animation: fadeUp 0.7s ease 0.6s forwards; opacity: 0; }

/* =============================================
   RESPONSIVO MÓVIL
   ============================================= */
@media (max-width: 768px) {
  .hero-title {
    font-size: 38px !important;
    line-height: 1.1 !important;
  }

  .hero-subtitle {
    font-size: 15px !important;
    padding: 0 16px;
  }

  .tech-bar {
    gap: 0;
    margin-top: 40px;
  }

  .tech-bar span {
    padding: 0 12px;
    font-size: 12px;
  }

  .hero-section::after {
    width: 350px;
    height: 300px;
  }
}/* End custom CSS */