/* =========================
   HOME - INTRO / QUÉ HACEMOS
========================= */

.home-intro {
  position: relative;
  overflow: hidden;
  padding: 68px 0 74px;
  background:
    radial-gradient(circle at 8% 18%, rgba(80, 213, 255, 0.18), transparent 30%),
    radial-gradient(circle at 48% 22%, rgba(255, 154, 232, 0.17), transparent 30%),
    radial-gradient(circle at 88% 20%, rgba(148, 111, 255, 0.18), transparent 32%),
    radial-gradient(circle at 70% 92%, rgba(132, 103, 255, 0.08), transparent 34%),
    linear-gradient(180deg, #f6fbff 0%, #fbf7ff 52%, #ffffff 100%);
  isolation: isolate;
}

.home-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.34;
  background:
    radial-gradient(circle at 18% 24%, rgba(100, 124, 255, 0.05) 1px, transparent 1.8px),
    radial-gradient(circle at 78% 34%, rgba(196, 122, 255, 0.05) 1px, transparent 1.8px),
    radial-gradient(circle at 52% 74%, rgba(87, 210, 255, 0.035) 1px, transparent 1.8px);
  background-size: 54px 54px, 62px 62px, 70px 70px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.home-intro::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(91, 111, 255, 0.18),
    rgba(209, 112, 255, 0.18),
    transparent
  );
}

.home-intro-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.intro-glow,
.intro-orb {
  position: absolute;
  display: block;
  pointer-events: none;
}

.intro-glow {
  border-radius: 999px;
  filter: blur(32px);
  opacity: 0.68;
}

.intro-glow-one {
  left: -90px;
  top: 26px;
  width: 320px;
  height: 320px;
  background: rgba(85, 214, 255, 0.22);
}

.intro-glow-two {
  left: 42%;
  top: -130px;
  width: 420px;
  height: 420px;
  background: rgba(255, 160, 232, 0.22);
}

.intro-glow-three {
  right: -120px;
  top: -70px;
  width: 420px;
  height: 420px;
  background: rgba(139, 103, 255, 0.20);
}

.intro-orb {
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.14) 46%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.40);
  box-shadow:
    0 18px 38px rgba(108, 111, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.intro-orb-one {
  left: 26px;
  bottom: 36px;
  width: 58px;
  height: 58px;
}

.intro-orb-two {
  right: -18px;
  top: 50px;
  width: 48px;
  height: 48px;
}

/* =========================
   CONTENIDO
========================= */

.home-intro .container.home-intro-inner {
  max-width: 1280px;
}

.home-intro-inner {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  text-align: center;
}

.intro-section-label {
  margin-bottom: 22px;
}

.home-intro h2 {
  max-width: 1080px;
  margin: 0 auto;
  color: #091338;
  font-size: clamp(37px, 4.6vw, 64px);
  line-height: 1.045;
  letter-spacing: -1.9px;
  font-weight: 560;
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.32),
    0 10px 26px rgba(116, 92, 255, 0.06);
}

.home-intro h2 .intro-title-emphasis {
  color: transparent;
  background: linear-gradient(
    135deg,
    #5a6fff 0%,
    #6b63ff 28%,
    #8d5cff 58%,
    #b566ff 82%,
    #cf8dff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 780;
  text-shadow: none;
  filter: saturate(0.94);
}

.home-intro p {
  max-width: 820px;
  margin: 22px auto 0;
  color: rgba(25, 33, 72, 0.70);
  font-size: 16.3px;
  line-height: 1.72;
}

/* =========================
   CHIPS
========================= */

.intro-highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 980px;
  margin: 34px auto 0;
  padding: 0;
  list-style: none;
}

.intro-highlight-item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 17px;
  border-radius: 999px;
  color: #111936;
  font-size: 13.5px;
  line-height: 1;
  letter-spacing: -0.1px;
  font-weight: 800;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.76), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.50));
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow:
    0 14px 30px rgba(82, 88, 170, 0.08),
    0 0 18px rgba(130, 110, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease,
    color 0.24s ease;
}

.intro-highlight-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.56), transparent 34%),
    radial-gradient(circle at 85% 90%, rgba(177, 117, 255, 0.10), transparent 38%),
    linear-gradient(135deg, rgba(93, 111, 255, 0.06), rgba(201, 115, 255, 0.06));
  opacity: 0.9;
}

.intro-highlight-item::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -52%;
  z-index: 1;
  width: 34%;
  height: 320%;
  pointer-events: none;
  opacity: 0;
  transform: rotate(18deg);
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 28%,
    rgba(255, 255, 255, 0.50) 50%,
    rgba(255, 255, 255, 0.08) 70%,
    transparent 100%
  );
  transition:
    left 0.82s ease,
    opacity 0.34s ease 0.36s;
}

.intro-highlight-item:hover {
  transform: translateY(-3px);
  color: #0b1438;
  border-color: rgba(126, 111, 255, 0.24);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.90), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.58));
  box-shadow:
    0 18px 42px rgba(82, 88, 170, 0.12),
    0 0 24px rgba(177, 117, 255, 0.13),
    0 0 12px rgba(91, 111, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.intro-highlight-item:hover::after {
  left: 124%;
  opacity: 0.78;
  transition:
    left 0.82s ease,
    opacity 0.18s ease;
}

.intro-highlight-icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #101936;
  transition:
    transform 0.24s ease,
    color 0.24s ease,
    filter 0.24s ease;
}

.intro-highlight-item:hover .intro-highlight-icon {
  transform: scale(1.04);
  color: #5a5cff;
  filter:
    drop-shadow(0 0 8px rgba(91, 111, 255, 0.18))
    drop-shadow(0 0 10px rgba(186, 105, 255, 0.12));
}

.intro-highlight-item > span:last-child {
  position: relative;
  z-index: 2;
}

.intro-highlight-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================
   BOTÓN
========================= */

.intro-about-action {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

.intro-about-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 28px;
  overflow: hidden;
  border-radius: 999px;
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 850;
  text-decoration: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.28), transparent 30%),
    linear-gradient(135deg, #4f6bff 0%, #7a4dff 54%, #b84cff 100%);
  box-shadow:
    0 18px 38px rgba(104, 97, 255, 0.24),
    0 0 28px rgba(197, 108, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.intro-about-link::before {
  content: "";
  position: absolute;
  top: -90%;
  left: -42%;
  width: 34%;
  height: 260%;
  pointer-events: none;
  opacity: 0;
  transform: rotate(18deg);
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 30%,
    rgba(255, 255, 255, 0.34) 50%,
    rgba(255, 255, 255, 0.06) 70%,
    transparent 100%
  );
  transition:
    left 0.72s ease,
    opacity 0.34s ease 0.28s;
}

.intro-about-link:hover {
  transform: translateY(-3px);
  box-shadow:
    0 24px 48px rgba(104, 97, 255, 0.30),
    0 0 34px rgba(197, 108, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.intro-about-link:hover::before {
  left: 124%;
  opacity: 1;
  transition:
    left 0.72s ease,
    opacity 0.18s ease;
}

/* =========================
   PANTALLAS GRANDES
========================= */

@media (min-width: 1500px) {
  .home-intro .container.home-intro-inner {
    max-width: 1380px;
  }

  .home-intro h2 {
    max-width: 1160px;
  }

  .home-intro p {
    max-width: 860px;
  }

  .intro-highlights {
    max-width: 1060px;
  }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 980px) {
  .home-intro {
    padding: 62px 0 68px;
  }

  .home-intro .container.home-intro-inner {
    max-width: 840px;
  }

  .home-intro h2 {
    max-width: 740px;
    font-size: clamp(36px, 6vw, 58px);
    letter-spacing: -1.65px;
  }

  .home-intro p {
    max-width: 650px;
  }
}

@media (max-width: 720px) {
  .home-intro {
    padding: 54px 0 60px;
  }

  .intro-section-label {
    margin-bottom: 18px;
  }

  .home-intro h2 {
    max-width: 520px;
    font-size: clamp(32px, 8vw, 44px);
    line-height: 1.06;
    letter-spacing: -1.1px;
    font-weight: 560;
  }

  .home-intro h2 .intro-title-emphasis {
    font-weight: 760;
  }

  .home-intro p {
    max-width: 430px;
    margin-top: 20px;
    font-size: 15.5px;
    line-height: 1.68;
  }

  .intro-highlights {
    max-width: 460px;
    gap: 10px;
    margin-top: 28px;
  }

  .intro-highlight-item {
    min-height: 42px;
    padding: 0 14px;
    font-size: 13px;
  }

  .intro-about-action {
    margin-top: 30px;
  }

  .intro-about-link {
    min-height: 52px;
    padding: 0 24px;
  }
}

@media (max-width: 480px) {
  .home-intro {
    padding: 48px 0 54px;
  }

  .home-intro h2 {
    max-width: 350px;
    font-size: clamp(29px, 8.2vw, 36px);
    letter-spacing: -0.9px;
  }

  .home-intro p {
    max-width: 340px;
    font-size: 15px;
  }

  .intro-highlights {
    max-width: 340px;
  }

  .intro-highlight-item {
    min-height: 40px;
    padding: 0 13px;
  }

  .intro-highlight-icon,
  .intro-highlight-icon svg {
    width: 17px;
    height: 17px;
  }

  .intro-about-link {
    width: min(100%, 230px);
  }
}