.tj-hero--id42498 {
  position: relative;
  width: 100%;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: center / cover no-repeat var(--background-img);
  object-fit: cover;
}

.tj-hero--id42498 .tj-hero__container {
  position: relative;
  width: 90.25rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin-top: 6rem;
  margin-right: auto;
  margin-bottom: 2rem;
  margin-left: auto;
}

.tj-hero--id42498 .tj-hero__background {
  position: relative;
  width: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  padding-top: 7.5rem;
  padding-right: 3rem;
  padding-bottom: 7.5rem;
  padding-left: 3rem;
  overflow: hidden;
}

.tj-hero--id42498 .tj-hero__content {
  position: relative;
  width: 100%;
  max-width: 35.81rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 3.12rem 0;
  margin-left: 3.25rem;
}

.tj-hero--id42498 .tj-hero__text {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.87rem 0;
}

.tj-hero--id42498 .tj-hero__upper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.62rem 0;
}

.tj-hero--id42498 .tj-hero__advise {
  position: relative;
  width: 100%;
  max-width: 3.87rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.43rem 20%;
  padding-top: 0.43rem;
  padding-right: 0.81rem;
  padding-bottom: 0.43rem;
  padding-left: 0.81rem;
  border-radius: 17px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(249, 126, 43, 0.6);
  background: linear-gradient(90.44249deg, rgba(60, 23, 130, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

.tj-hero--id42498 .tj-hero__badges {
  position: relative;
  width: 100%;
  max-width: 2.12rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.62rem 0;
  padding-top: 0.03rem;
  padding-right: 0.31rem;
  padding-bottom: 0.03rem;
  padding-left: 0.31rem;
  border-radius: 9px;
  background: linear-gradient(0deg, rgba(249, 126, 43, 1) 0%, rgba(249, 126, 43, 1) 100%);
}

.tj-hero--id42498 .tj-hero__new {
  position: relative;
  width: 1.5rem;
  font-size: 0.62rem;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: -0.01em;
  text-decoration: none;
  text-transform: none;
  text-align: left;
  color: rgba(12, 12, 12, 1);
  display: block;
  white-space: nowrap;
}

.tj-hero--id42498 .tj-hero__title {
  position: relative;
  width: 100%;
  display: block;
}

.tj-hero--id42498 .tj-hero__heading {
  position: relative;
  width: 100%;
  font-size: 3rem;
  font-family: 'Century Gothic', sans-serif;
  font-weight: 700;
  letter-spacing: 0em;
  text-decoration: none;
  text-transform: none;
  text-align: left;
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.tj-hero--id42498 .tj-hero__heading-white {
  color: rgba(250, 250, 250, 1);
}

.tj-hero--id42498 .tj-hero__heading-accent {
  color: rgba(249, 126, 43, 1);
}

.tj-hero--id42498 .tj-hero__description {
  position: relative;
  width: 100%;
  font-size: 1.62rem;
  font-family: 'Century Gothic', sans-serif;
  font-weight: 400;
  letter-spacing: 0em;
  text-decoration: none;
  text-transform: none;
  text-align: left;
  color: rgba(250, 250, 250, 1);
  display: block;
  line-height: 1.5;
}

.tj-hero--id42498 .tj-hero__boxes {
  position: relative;
  width: 100%;
  max-width: 21.87rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 1.87rem 8%;
}

.tj-hero--id42498 .tj-hero__cta {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 5%;
  padding-top: 0.25rem;
  padding-right: 0.87rem;
  padding-bottom: 0.25rem;
  padding-left: 0.87rem;
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
  font-size: 1rem;
  font-family: 'Century Gothic', sans-serif;
  font-weight: 400;
  letter-spacing: 0em;
  text-decoration: none;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}

.tj-hero--id42498 .tj-hero__cta--primary {
  padding: 0 0.87rem !important; 
  height: 2.8rem !important;
  border-color: rgba(249, 126, 43, 0.8);
  background: linear-gradient(93.15206deg, rgba(255, 142, 24, 0.2) 0%, rgba(153, 153, 153, 0) 100%);
  color: rgba(249, 126, 43, 1);
}

.tj-hero--id42498 .tj-hero__cta--secondary {
  padding: 0 0.87rem !important; 
  height: 2.8rem !important;
  border-color: rgba(255, 255, 255, 0.3);
  background: linear-gradient(94.19442deg, rgba(25, 13, 46, 0.5) 0%, rgba(86, 41, 157, 0.2) 95.19%);
  color: rgba(250, 250, 250, 1);
}

/* Hover states */
.tj-hero--id42498 .tj-hero__cta--primary:hover {
  background: linear-gradient(93.15206deg, rgba(255, 142, 24, 0.35) 0%, rgba(153, 153, 153, 0.1) 100%);
  border-color: rgba(249, 126, 43, 1);
}

.tj-hero--id42498 .tj-hero__cta--secondary:hover {
  background: linear-gradient(94.19442deg, rgba(25, 13, 46, 0.7) 0%, rgba(86, 41, 157, 0.35) 95.19%);
  border-color: rgba(255, 255, 255, 1);
}

/* Responsive */
@media (max-width: 1099px) {
  .tj-hero--id42498 .tj-hero__background {
    width: 100%;
  }

  .tj-hero--id42498 .tj-hero__content {
    gap: 3.12rem 0;
  }

  .tj-hero--id42498 .tj-hero__text {
    gap: 1.87rem 0;
    width: 100%;
  }

  .tj-hero--id42498 .tj-hero__upper {
    gap: 0.62rem 0;
    width: 100%;
  }

  .tj-hero--id42498 .tj-hero__advise {
    gap: 0.43rem 5%;
  }

  .tj-hero--id42498 .tj-hero__badges {
    gap: 0.62rem 0;
    width: 100%;
  }

  .tj-hero--id42498 .tj-hero__new {
    width: 100%;
  }

  .tj-hero--id42498 .tj-hero__title {
    width: 100%;
  }

  .tj-hero--id42498 .tj-hero__heading {
    width: 100%;
    font-size: 2.56rem;
  }

  .tj-hero--id42498 .tj-hero__description {
    width: 100%;
  }

  .tj-hero--id42498 .tj-hero__boxes {
    gap: 1.87rem 5%;
  }

  .tj-hero--id42498 .tj-hero__cta--primary {
    gap: 0.5rem 4%;
    width: 52.43%;
  }

  .tj-hero--id42498 .tj-hero__cta--secondary {
    gap: 0.5rem 5%;
    width: calc(42.56% - 0.78rem);
  }
}

@media (max-width: 1023px) {
  .tj-hero--id42498 .tj-hero__background {
    padding-right: 2.12rem;
    padding-left: 2.12rem;
    width: 100%;
    max-width: 100%;
  }

  .tj-hero--id42498 .tj-hero__content {
    gap: 3.12rem 0;
  }

  .tj-hero--id42498 .tj-hero__text {
    gap: 1.87rem 0;
    width: 100%;
  }

  .tj-hero--id42498 .tj-hero__upper {
    gap: 0.62rem 0;
    width: 100%;
  }

  .tj-hero--id42498 .tj-hero__advise {
    gap: 0.43rem 5%;
  }

  .tj-hero--id42498 .tj-hero__badges {
    gap: 0.62rem 0;
    width: 100%;
  }

  .tj-hero--id42498 .tj-hero__new {
    width: 100%;
  }

  .tj-hero--id42498 .tj-hero__title {
    width: 100%;
  }

  .tj-hero--id42498 .tj-hero__heading {
    width: 100%;
  }

  .tj-hero--id42498 .tj-hero__description {
    width: 100%;
  }

  .tj-hero--id42498 .tj-hero__boxes {
    gap: 1.87rem 5%;
  }

  .tj-hero--id42498 .tj-hero__cta--primary {
    gap: 0.5rem 4%;
    width: 52.43%;
  }

  .tj-hero--id42498 .tj-hero__cta--secondary {
    gap: 0.5rem 5%;
    width: calc(42.56% - 0.78rem);
  }
}

/* ============================================================
   TJ Hero Signal — Responsive Único (767px)
   ============================================================ */

@media (max-width: 767px) {

/* 1. ELIMINACIÓN DE LA FRANJA (Reseteo de márgenes externos) */
  .tj-hero--id42498,
  .tj-hero--id42498 .tj-hero__container {
    margin-top: 0 !important;
    margin-bottom: 0 !important; /* CLAVE: Quita el espacio de abajo */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }


  /* 1. BLINDAJE DE FONDO Y OVERLAY PARA LEGUIBILIDAD */
  .tj-hero--id42498 .tj-hero__background {
    position: relative;
    padding: 6rem 1.5rem 5rem !important; /* Aire vertical equilibrado */
    background-position: center !important; /* Centramos las ondas púrpuras */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
   min-height: auto; /* Evita que fuerce una altura extra */
  }

  /* Capa oscura (Overlay) para que el texto blanco sea legible */
  .tj-hero--id42498 .tj-hero__background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Degradado oscuro para que el texto blanco resalte */
    background: linear-gradient(180deg, rgba(7, 0, 18, 0.4) 0%, rgba(7, 0, 18, 0.7) 100%);
    z-index: 1;
  }

  /* 2. CONTENIDO CENTRADO: Eliminamos el margen de escritorio */
  .tj-hero--id42498 .tj-hero__content {
    position: relative;
    z-index: 2;
    margin-left: 0 !important; /* Quitamos el empuje lateral de 3.25rem */
    width: 100% !important;
    max-width: 100% !important;
    padding-top:4rem;
    padding-bottom;2rem;
    align-items: center !important; /* Centramos el badge y textos */
    gap: 3rem; /* Espacio general entre textos y botones */
  }

  /* Centramos todos los bloques internos */
  .tj-hero--id42498 .tj-hero__text,
  .tj-hero--id42498 .tj-hero__upper,
  .tj-hero--id42498 .tj-hero__title {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* 3. TIPOGRAFÍA (Ajuste de tamaño): Bajamos el tamaño para móvil */
  .tj-hero--id42498 .tj-hero__heading {
    /* CAMBIO: Bajamos de 2.1rem a 1.8rem (o 1.9rem si lo prefieres) */
    font-size: 2.2rem !important; 
    line-height: 1.2;
    text-align: center !important; /* Justificado al centro */
  }

  .tj-hero--id42498 .tj-hero__description {
    /* CAMBIO: Bajamos de 1.1rem a 0.95rem para que respire más */
    font-size: 1.1rem !important; 
    line-height: 1.5;
    padding: 0 5%; /* Margen para que el texto respire */
    text-align: center !important; /* Justificado al centro */
  }

  /* 4. BOTONES: APILADOS Y CENTRADOS (Como el otro servicio) */
  .tj-hero--id42498 .tj-hero__boxes {
    flex-direction: column !important; /* Uno sobre otro */
    width: 100%;
    /* CLAVE: Ancho controlado para que no sean infinitos */
    max-width: 280px; 
    gap: 1.2rem; /* Espacio vertical entre los botones */
    margin: 2rem auto 0; /* Aseguramos el centrado y espacio arriba */
  }

  .tj-hero--id42498 .tj-hero__cta {
    width: 100% !important; /* Ocupan todo el ancho del contenedor center */
    min-width: 0;
    justify-content: center; /* Texto centrado dentro del botón */
  }

  /* Ajuste de color del botón secondary para que se lea mejor sobre oscuro */
  .tj-hero--id42498 .tj-hero__cta--secondary {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: rgba(250, 250, 250, 0.9) !important;
  }
}