/* Segunda dobra da v5. Todas as regras ficam restritas a #experiencia. */
#experiencia.mix-services {
  position: relative;
  isolation: isolate;
  padding: 46px 0 42px;
  background: #02070b;
  color: #f5f7fa;
}

#experiencia::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, #02070b 30%, #02070be0 64%, #02070b88),
    url("assets/plans-earth-horizon.webp") center 32% / cover no-repeat;
  pointer-events: none;
}

#experiencia .mix-services-inner {
  width: min(1520px, calc(100% - 80px));
  margin-inline: auto;
}

#experiencia .mix-services-heading {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  margin-bottom: 28px;
}

#experiencia .mix-services-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: #a8c6e5;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 1.4px;
}

#experiencia .mix-services-eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--green, #9bd100);
}

#experiencia h2 {
  font-size: clamp(1.65rem, 2.4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.9px;
}

#experiencia h2 span { color: var(--blue, #00aff5); }

#experiencia .mix-services-intro {
  max-width: 370px;
  color: #b9cde0;
  font-size: 1rem;
  line-height: 1.65;
}

#experiencia .mix-services-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 14px;
}

#experiencia .mix-service-card {
  --service-accent: #00baf7;
  --service-glow: #00aff51a;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 19px 16px 49px;
  border: 1px solid #163044;
  border-radius: 13px;
  background: linear-gradient(145deg, #07121bea, #02070bf5);
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

#experiencia .mix-service-fiber { border-color: #00aff5; box-shadow: inset 0 1px 0 #00aff520; }
#experiencia .mix-service-landline,
#experiencia .mix-service-tv { --service-accent: #c78bff; --service-glow: #9752ff20; }
#experiencia .mix-service-tracking { --service-accent: #d4e82b; --service-glow: #9bd10018; }
#experiencia .mix-service-doorbell { --service-accent: #00d797; --service-glow: #00d7971a; }

#experiencia .mix-service-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 13px;
  border-radius: 50%;
  background: var(--service-glow);
  color: var(--service-accent);
}

#experiencia .mix-service-icon .icon {
  width: 27px;
  height: 27px;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 7px var(--service-glow));
}

#experiencia .mix-service-fiber .mix-service-icon { background: transparent; }
#experiencia .mix-service-fiber .mix-service-icon .icon { width: 34px; height: 34px; }

#experiencia .mix-service-card h3 {
  margin: 0 0 8px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.2px;
  overflow-wrap: break-word;
}

#experiencia .mix-service-detail { display: block; font-size: .8125rem; }

#experiencia .mix-service-card p {
  margin: 0;
  color: #b9cde0;
  font-size: .875rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

/* O cartão inteiro é clicável; a seta mantém a indicação visual da referência. */
#experiencia .mix-service-action {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--service-accent);
}

#experiencia .mix-service-arrow {
  position: absolute;
  right: 13px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .9;
}

#experiencia .mix-service-arrow .icon { width: 16px; height: 16px; }
#experiencia .mix-service-card:focus-within { border-color: var(--service-accent); }
#experiencia .mix-service-action:focus-visible { outline: 2px solid var(--service-accent); outline-offset: 4px; }

@media (hover: hover) {
  #experiencia .mix-service-card:hover {
    transform: translateY(-4px);
    border-color: var(--service-accent);
    background-color: var(--service-glow);
  }
}

@media (max-width: 1199px) {
  #experiencia .mix-services-inner { width: calc(100% - 64px); }
  #experiencia .mix-services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  #experiencia .mix-service-card { padding: 21px 20px 50px; }
  #experiencia .mix-services-intro { max-width: 340px; }
}

@media (max-width: 700px) {
  #experiencia.mix-services { padding: 36px 0; }
  #experiencia .mix-services-inner { width: calc(100% - 40px); }
  #experiencia .mix-services-heading { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 24px; }
  #experiencia h2 { font-size: clamp(1.6rem, 5.8vw, 2rem); letter-spacing: -.7px; }
  #experiencia .mix-services-intro { max-width: 460px; }
  #experiencia .mix-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #experiencia .mix-service-card { padding: 18px 16px 49px; }
}

@media (max-width: 359px) {
  #experiencia .mix-services-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #experiencia .mix-service-card { transition: none; }
  #experiencia .mix-service-card:hover { transform: none; }
}