/* Home service cards: visual layer only. The rail and slide animation remain in main.js. */

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__slide--design {
  --home-service-accent: #695bd3;
  --slide-accent: #695bd3;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__slide--events-card {
  --home-service-accent: #d40c36;
  --slide-accent: #d40c36;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__slide--marketing {
  --home-service-accent: #ffc836;
  --slide-accent: #ffc836;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__slide--brand {
  --home-service-accent: #00b8c5;
  --slide-accent: #00b8c5;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__slide--advisory {
  --home-service-accent: #ff6a1b;
  --slide-accent: #ff6a1b;
}

/* Keep the home rail mechanics intact while giving the new artwork more presence. */
html body[data-page="inicio"] main section#servicios.services-preview {
  /* Extra breathing room keeps pagination clear of the outgoing curve. */
  padding-bottom: clamp(7.5rem, 9vw, 10rem) !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__stage {
  height: clamp(29rem, 58vh, 35rem) !important;
  min-height: 29rem !important;
  touch-action: pan-y pinch-zoom !important;
  overscroll-behavior: auto !important;
  overscroll-behavior-x: contain !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__rail,
html body[data-page="inicio"] main section#servicios.services-preview .services-drift__slide,
html body[data-page="inicio"] main section#servicios.services-preview .services-drift__card,
html body[data-page="inicio"] main section#servicios.services-preview .services-drift__link {
  touch-action: pan-y pinch-zoom !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__frame,
html body[data-page="inicio"] main section#servicios.services-preview .services-drift__photo {
  -webkit-user-drag: none !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__slide {
  width: clamp(20rem, 23vw, 25rem) !important;
  top: 50% !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 4265 / 5733 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  isolation: isolate !important;
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__frame {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__card-inner {
  position: absolute;
  z-index: 1;
  inset: 10% 10.6% 13%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__media {
  position: relative;
  flex: 0 0 39%;
  width: 100%;
  height: 39%;
  border-radius: clamp(14px, 1.4vw, 24px);
  overflow: hidden;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(1.045);
  transform-origin: center;
  user-select: none;
  pointer-events: none;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__card-copy {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  align-self: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  text-align: center !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__card h3,
html body[data-page="inicio"] main section#servicios.services-preview .services-drift__slide--events-card .services-drift__card h3 {
  width: 100% !important;
  max-width: 11ch !important;
  margin: 4.5% auto 0 !important;
  color: #fff !important;
  font-family: "FigtreeHeroLocal", "Figtree", sans-serif !important;
  font-size: clamp(1.75rem, 2vw, 2.4rem) !important;
  font-weight: 700 !important;
  line-height: .95 !important;
  letter-spacing: -.04em !important;
  text-align: center !important;
  text-wrap: balance;
  text-shadow: 0 3px 14px rgba(0, 47, 66, .14);
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__card h3.services-drift__card-title--compact {
  max-width: 17ch !important;
  font-size: clamp(1.65rem, 1.8vw, 2.15rem) !important;
  line-height: .96 !important;
  letter-spacing: -.035em !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__slide--events-card .services-drift__card h3.services-drift__card-title--compact {
  width: 92% !important;
  max-width: 92% !important;
  font-size: clamp(1.3rem, 1.5vw, 1.75rem) !important;
  line-height: .98 !important;
  letter-spacing: -.025em !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__slide--events-card .services-drift__card h3.services-drift__card-title--compact span,
html body[data-page="inicio"] main section#servicios.services-preview .services-drift__slide--events-card .services-drift__card h3.services-drift__card-title--compact strong {
  width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__card h3 span,
html body[data-page="inicio"] main section#servicios.services-preview .services-drift__card h3 strong {
  display: block !important;
  color: inherit !important;
  font: inherit !important;
  font-weight: 700 !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__card-copy > p {
  width: 94% !important;
  max-width: 94% !important;
  margin: 6% auto 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, .95) !important;
  font-family: "FigtreeHeroLocal", "Figtree", sans-serif !important;
  font-size: clamp(1rem, 1.15vw, 1.18rem) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  text-wrap: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__link {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 2.6rem !important;
  grid-template-rows: 2.6rem !important;
  align-items: stretch !important;
  align-self: auto !important;
  justify-self: center !important;
  gap: .18rem !important;
  width: 90% !important;
  min-height: 2.6rem !important;
  margin: auto auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: "FigtreeBoldLocal", "Figtree", sans-serif !important;
  font-size: clamp(.9rem, .95vw, 1.05rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  overflow: visible !important;
  transition: transform 220ms ease !important;
  cursor: pointer !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__link::before {
  content: "";
  z-index: 0;
  grid-column: 1;
  grid-row: 1;
  border-radius: 999px;
  background: var(--home-service-accent);
  transition: all 220ms ease !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__link::after {
  content: "\2192";
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 50%;
  color: var(--home-service-accent);
  background: #fff;
  font-family: "FigtreeBoldLocal", "Figtree", sans-serif;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 700;
  transition: all 220ms ease !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__link-copy {
  position: relative !important;
  z-index: 1 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  width: 100% !important;
  height: 1.02em !important;
  padding: 0 .65rem !important;
  line-height: 1 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  color: #fff !important;
  font-weight: 700 !important;
  transition: all 220ms ease !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__link:hover,
html body[data-page="inicio"] main section#servicios.services-preview .services-drift__link:focus-visible {
  color: #fff !important;
  background: transparent !important;
  transform: translateY(-2px) !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__link:hover::after,
html body[data-page="inicio"] main section#servicios.services-preview .services-drift__link:focus-visible::after {
  transform: scale(1.08) !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__meta {
  position: relative !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .75rem !important;
  width: max-content !important;
  max-width: calc(100% - 2rem) !important;
  margin: clamp(.7rem, 1.3vw, 1rem) auto 0 !important;
  padding: .45rem .55rem !important;
  border: 1px solid rgba(0, 71, 98, .1) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .68) !important;
  box-shadow: 0 10px 26px rgba(0, 71, 98, .08) !important;
  backdrop-filter: blur(12px) !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__dots {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .42rem !important;
  margin: 0 !important;
  padding: .25rem .35rem !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__dot {
  display: block !important;
  flex: 0 0 auto !important;
  width: .55rem !important;
  height: .55rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 71, 98, .2) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: width 260ms cubic-bezier(.22, 1, .36, 1), background-color 260ms ease, transform 220ms ease !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__dot.is-active {
  width: 1.6rem !important;
  background: var(--services-active-accent, #00b8c5) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 71, 98, .12) !important;
  transform: none !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__dot:hover {
  background: rgba(0, 71, 98, .42) !important;
  transform: scale(1.12) !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__dot:focus-visible {
  outline: 2px solid var(--services-active-accent, #00b8c5) !important;
  outline-offset: 3px !important;
}

@media (min-width: 761px) and (max-width: 1180px) {
  html body[data-page="inicio"] main section#servicios.services-preview {
    padding-bottom: clamp(6rem, 9vw, 7rem) !important;
  }

  html body[data-page="inicio"] main section#servicios.services-preview .services-drift__stage {
    height: clamp(27rem, 49vw, 31rem) !important;
    min-height: 27rem !important;
  }

  html body[data-page="inicio"] main section#servicios.services-preview .services-drift__slide {
    width: clamp(19rem, 34vw, 22rem) !important;
  }
}

@media (max-width: 760px) {
  html body[data-page="inicio"] main section#servicios.services-preview {
    padding-bottom: clamp(5.5rem, 20vw, 6.5rem) !important;
  }

  html body[data-page="inicio"] main section#servicios.services-preview .services-drift__stage {
    height: clamp(23rem, 108vw, 27rem) !important;
    min-height: 23rem !important;
  }

  html body[data-page="inicio"] main section#servicios.services-preview .services-drift__slide {
    width: min(82vw, 19.5rem) !important;
  }

  html body[data-page="inicio"] main section#servicios.services-preview .services-drift__meta {
    gap: .55rem !important;
    margin-top: .55rem !important;
    padding: .4rem .48rem !important;
  }

  html body[data-page="inicio"] main section#servicios.services-preview .services-drift__dots {
    gap: .36rem !important;
    padding-inline: .28rem !important;
  }

  html body[data-page="inicio"] main section#servicios.services-preview .services-drift__dot {
    width: .5rem !important;
    height: .5rem !important;
  }

  html body[data-page="inicio"] main section#servicios.services-preview .services-drift__dot.is-active {
    width: 1.35rem !important;
  }

  html body[data-page="inicio"] main section#servicios.services-preview .services-drift__media {
    border-radius: clamp(12px, 5vw, 19px);
  }

  html body[data-page="inicio"] main section#servicios.services-preview .services-drift__card h3,
  html body[data-page="inicio"] main section#servicios.services-preview .services-drift__slide--events-card .services-drift__card h3 {
    margin-top: 4% !important;
    font-size: clamp(1.55rem, 7.4vw, 1.95rem) !important;
    line-height: .96 !important;
  }

  html body[data-page="inicio"] main section#servicios.services-preview .services-drift__card h3.services-drift__card-title--compact {
    max-width: 17ch !important;
    font-size: clamp(1.35rem, 6.3vw, 1.65rem) !important;
    line-height: .96 !important;
  }

  html body[data-page="inicio"] main section#servicios.services-preview .services-drift__slide--events-card .services-drift__card h3.services-drift__card-title--compact {
    width: 94% !important;
    max-width: 94% !important;
    font-size: clamp(1.12rem, 5.2vw, 1.4rem) !important;
    line-height: 1 !important;
  }

  html body[data-page="inicio"] main section#servicios.services-preview .services-drift__card-copy > p {
    width: 94% !important;
    max-width: 94% !important;
    margin-top: 5.5% !important;

    font-size: clamp(1rem, 3.9vw, 1.18rem) !important;
    line-height: 1.4 !important;

    white-space: normal !important;
    text-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html body[data-page="inicio"] main section#servicios.services-preview .services-drift__link {
    grid-template-columns: minmax(0, 1fr) 2.45rem !important;
    grid-template-rows: 2.45rem !important;
    min-height: 2.45rem !important;
    font-size: clamp(.88rem, 3.5vw, .96rem) !important;
  }

  html body[data-page="inicio"] main section#servicios.services-preview .services-drift__link::after {
    width: 2.45rem !important;
    height: 2.45rem !important;
    font-size: 1.1rem !important;
  }
}

/* Final rail refinement: compact heading rhythm, fully legible cards and
   service-specific pagination without the numeric counter pill. */
html body[data-page="inicio"] main section#servicios.services-preview {
  padding-top: clamp(1.35rem, 2.4vw, 2.25rem) !important;
}

html body[data-page="inicio"] main section#servicios.services-preview > .section-heading {
  margin-bottom: clamp(.65rem, 1.2vw, 1rem) !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift {
  margin-top: clamp(.65rem, 1.2vw, 1rem) !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__slide {
  opacity: 1 !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__meta {
  gap: 0 !important;
  margin: .55rem auto 0 !important;
  padding: .25rem .35rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__dots {
  gap: .5rem !important;
  padding: .25rem .35rem !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__dot {
  background: var(--home-service-accent, #00b8c5) !important;
  opacity: .42 !important;
  transition:
    width 260ms cubic-bezier(.22, 1, .36, 1),
    opacity 220ms ease,
    transform 220ms ease !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__dot.is-active {
  width: 1.6rem !important;
  background: var(--home-service-accent, #00b8c5) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__dot:hover {
  background: var(--home-service-accent, #00b8c5) !important;
  opacity: 1 !important;
}

html body[data-page="inicio"] main section#servicios.services-preview .services-drift__dot:focus-visible {
  outline-color: var(--home-service-accent, #00b8c5) !important;
}

@media (max-width: 760px) {
  html body[data-page="inicio"] main section#servicios.services-preview {
    padding-top: 1.15rem !important;
  }

  html body[data-page="inicio"] main section#servicios.services-preview > .section-heading {
    margin-bottom: .45rem !important;
  }

  html body[data-page="inicio"] main section#servicios.services-preview .services-drift {
    margin-top: .4rem !important;
  }

  html body[data-page="inicio"] main section#servicios.services-preview .services-drift__meta {
    margin-top: .35rem !important;
    padding: .2rem .3rem !important;
  }
}


/* ==================================================
   SERVICES CARDS — TAMAÑO RESPONSIVE
   ================================================== */

/* DESKTOP */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__stage {
  height: clamp(32rem, 62vh, 39rem) !important;
  min-height: 32rem !important;
}

html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__slide {
  width: clamp(22rem, 26vw, 28rem) !important;
  top: 50% !important;
}


/* TABLET */
@media (min-width: 761px) and (max-width: 1180px) {

  html body[data-page="inicio"]
  main section#servicios.services-preview
  .services-drift__slide {
    width: clamp(21rem, 37vw, 24rem) !important;
  }
}


/* MOBILE */
@media (max-width: 760px) {

  html body[data-page="inicio"]
  main section#servicios.services-preview
  .services-drift__slide {
    width: min(88vw, 23rem) !important;
  }
}

/* ==================================================
   SERVICES CARDS — CTA DEFINITIVO
   ================================================== */

html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link {
  position: relative !important;
  z-index: 5 !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 2.6rem !important;
  grid-template-rows: 2.6rem !important;

  align-items: stretch !important;
  justify-items: stretch !important;

  gap: .22rem !important;

  width: 90% !important;
  min-height: 2.6rem !important;

  margin: auto auto 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;

  color: #fff !important;

  font-family: "FigtreeBoldLocal", "Figtree", sans-serif !important;
  font-size: clamp(.8rem, .82vw, .96rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  text-decoration: none !important;
  cursor: pointer !important;

  overflow: visible !important;

  transition:
    transform 240ms cubic-bezier(.22, 1, .36, 1) !important;
}


/* PILL DE COLOR */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link::before {
  content: "" !important;

  position: relative !important;
  z-index: 0 !important;

  grid-column: 1 !important;
  grid-row: 1 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 2.6rem !important;

  border-radius: 999px !important;

  background: var(--home-service-accent) !important;

  transform: scale(1) !important;

  transition:
    transform 250ms cubic-bezier(.22, 1, .36, 1),
    filter 250ms ease !important;
}


/* TEXTO */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link-copy {
  position: relative !important;
  z-index: 2 !important;

  grid-column: 1 !important;
  grid-row: 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  padding: 0 .7rem !important;

  color: #fff !important;

  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;

  overflow: hidden !important;

  pointer-events: none !important;

  transform: none !important;
  opacity: 1 !important;

  transition:
    transform 250ms cubic-bezier(.22, 1, .36, 1) !important;
}




/* CÍRCULO + FLECHA */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link::after {
  content: "\2192" !important;

  position: relative !important;
  z-index: 2 !important;

  grid-column: 2 !important;
  grid-row: 1 !important;

  display: grid !important;
  place-items: center !important;

  width: 2.6rem !important;
  height: 2.6rem !important;

  border: 3px solid var(--home-service-accent) !important;
  border-radius: 50% !important;

  color: var(--home-service-accent) !important;
  background: #fff !important;

  font-size: 1.08rem !important;
  line-height: 1 !important;

  transition:
    transform 250ms cubic-bezier(.22, 1, .36, 1),
    color 220ms ease,
    background-color 220ms ease !important;
}


/* HOVER */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link:hover {
  transform: translateY(-3px) !important;
}

html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link:hover::before {
  transform: scaleX(1.025) !important;
  filter: brightness(1.04) !important;
}

html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link:hover::after {
  transform: translateX(4px) !important;
}

html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link:hover
.services-drift__link-copy {
  transform: translateX(2px) !important;
}


/* MOBILE */
@media (max-width: 760px) {

  html body[data-page="inicio"]
  main section#servicios.services-preview
  .services-drift__link {
    width: 92% !important;

    grid-template-columns: minmax(0, 1fr) 2.5rem !important;
    grid-template-rows: 2.5rem !important;

    min-height: 2.5rem !important;

    font-size: clamp(.76rem, 3vw, .86rem) !important;
  }

  html body[data-page="inicio"]
  main section#servicios.services-preview
  .services-drift__link::before {
    min-height: 2.5rem !important;
  }

  html body[data-page="inicio"]
  main section#servicios.services-preview
  .services-drift__link::after {
    width: 2.5rem !important;
    height: 2.5rem !important;

    border-width: 2px !important;
    font-size: 1rem !important;
  }
}

/* ==================================================
   SERVICES CTA — ROLL DEFINITIVO
   ================================================== */

html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link-copy {
  position: relative !important;
  z-index: 2 !important;

  grid-column: 1 !important;
  grid-row: 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 1em !important;

  padding: 0 .55rem !important;

  overflow: hidden !important;
  white-space: nowrap !important;

  line-height: 1 !important;

  pointer-events: none !important;
}


/* VENTANA DE CADA LETRA */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link-char {
  display: inline-block !important;
  position: relative !important;

  height: 1.2em !important;
  overflow: hidden !important;

  line-height: 1.2em !important;
  vertical-align: middle !important;

  flex: 0 0 auto !important;
}


/* La ventana del texto baja ligeramente mientras ocurre el roll */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link:hover
.services-drift__link-copy,
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link:focus-visible
.services-drift__link-copy {
  transform: translate3d(0, 12px, 0) !important;
}


/* CLICK */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link:active {
  transform: translateY(0) scale(.97) !important;
}

/* =========================================
   CTA — EVITAR QUE EL BOTÓN SUBA EN HOVER
   ========================================= */

html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link:hover,
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link:focus-visible {
  transform: none !important;
}

/* ==================================================
   SERVICES CTA — ROLL DEFINITIVO
   EL BOTÓN NO SE MUEVE
   ================================================== */

/* El botón permanece fijo */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link,
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link:hover,
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link:focus-visible {
  transform: none !important;
}


/* El pill permanece fijo */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link::before,
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link:hover::before {
  transform: none !important;
}


/* La flecha permanece fija */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link::after,
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link:hover::after {
  transform: none !important;
}


/* CONTENEDOR GENERAL DEL TEXTO */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link-copy {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 1em !important;

  padding: 0 .55rem !important;

  overflow: hidden !important;
  white-space: nowrap !important;

  line-height: 1 !important;

  transform: none !important;
}


/* VENTANA DE CADA LETRA */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__link-char {
  position: relative !important;

  display: inline-block !important;

  height: 1em !important;
  line-height: 1em !important;

  overflow: hidden !important;

  flex: 0 0 auto !important;
}


/* ==================================================
   SERVICES — INDICADORES DEL CARRUSEL
   ORDEN DE COLOR FIJO SEGÚN CARD
   ================================================== */

html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: .5rem !important;
  padding: .25rem .35rem !important;
}


/* COLORES EN EL MISMO ORDEN DE LAS CARDS */

/* 1 — Consultoría / Naranja */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__dot:nth-child(1) {
  --dot-color: #FF6A1B;
}

/* 2 — Branding / Azul claro */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__dot:nth-child(2) {
  --dot-color: #00B8C5;
}

/* 3 — Marketing / Amarillo */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__dot:nth-child(3) {
  --dot-color: #FFC43D;
}

/* 4 — Diseño / Morado */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__dot:nth-child(4) {
  --dot-color: #6C5CE7;
}

/* 5 — Eventos / Rojo */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__dot:nth-child(5) {
  --dot-color: #E4003A;
}


/* PUNTOS NORMALES */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__dot {
  flex: 0 0 auto !important;

  width: .55rem !important;
  height: .55rem !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 999px !important;

  background: var(--dot-color) !important;

  opacity: .35 !important;
  box-shadow: none !important;

  transform: none !important;

  transition:
    width 260ms cubic-bezier(.22, 1, .36, 1),
    background-color 260ms ease,
    opacity 220ms ease !important;
}


/* INDICADOR ACTIVO */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__dot.is-active {
  width: 1.6rem !important;
  height: .55rem !important;

  background: var(--dot-color) !important;

  opacity: 1 !important;

  transform: none !important;
  box-shadow: none !important;
}


/* HOVER */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__dot:hover {
  opacity: 1 !important;
}


/* ACTIVO NO CAMBIA DE FORMA AL HOVER */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__dot.is-active:hover {
  transform: none !important;
}


/* ACCESIBILIDAD */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__dot:focus-visible {
  outline: 2px solid var(--dot-color) !important;
  outline-offset: 3px !important;
}

/* ==================================================
   CONTACTO FINAL — MOBILE SIN ESPACIO SUPERIOR
   ================================================== */

@media (max-width: 900px) {

  /* SECCIÓN AZUL */
  html body[data-page="inicio"]
  main section#contacto.final-contact-section.final-contact-section--editorial {
    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 7.5rem 0 6.8rem !important;

    align-items: initial !important;
    justify-content: initial !important;
    align-content: initial !important;
    place-items: initial !important;
    place-content: initial !important;
  }


  /* CONTENEDOR PRINCIPAL */
  html body[data-page="inicio"]
  main section#contacto
  .final-contact-editorial {
    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    grid-template-columns: none !important;
    grid-template-rows: none !important;

    align-content: flex-start !important;
    place-content: start center !important;
  }


  /* QUITAMOS LA ILUSTRACIÓN */
  html body[data-page="inicio"]
  main section#contacto
  .final-contact-editorial__art,
  html body[data-page="inicio"]
  main section#contacto
  .final-contact-editorial__illustration {
    display: none !important;
  }


  /* CONTENIDO — ARRANCA DESDE ARRIBA */
  html body[data-page="inicio"]
  main section#contacto
  .final-contact-editorial__content {
    position: static !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: flex-start !important;

    width: min(calc(100% - 2rem), 34rem) !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 0 !important;

    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;

    transform: none !important;

    align-self: flex-start !important;
  }


  /* TÍTULO */
  html body[data-page="inicio"]
  main section#contacto
  .final-contact-editorial__hero {
    position: static !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
  }
}

/* ==================================================
   SERVICIOS — TEXTO INTRO RESPONSIVE DEFINITIVO
   ================================================== */

@media (max-width: 760px) {

  /*
   * Este selector es deliberadamente más específico porque
   * home-section-headings.css se carga después de este archivo.
   * Así evitamos que vuelva a estrechar el párrafo en móvil.
   */
  html body[data-page="inicio"]
  main section#servicios#servicios.services-preview.services-preview
  > div.section-heading.section-heading
  > p.services-preview__intro.services-preview__intro {
    display: block !important;

    position: relative !important;
    left: 50% !important;

    width: 96vw !important;
    min-width: 0 !important;
    max-width: none !important;

    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;

    padding: 0 1rem !important;
    box-sizing: border-box !important;

    transform: translateX(-50%) !important;

    font-size: clamp(.9rem, 2.8vw, 1rem) !important;
    line-height: 1.48 !important;

    text-align: center !important;
    white-space: normal !important;
    text-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

/* TEXTO INTERIOR DE LAS CARDS — RESPONSIVE */

html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__card-copy > p {
  width: 94% !important;
  max-width: 94% !important;

  margin: 5.5% auto 0 !important;
  padding: 0 !important;

  font-size: clamp(1rem, 1.15vw, 1.2rem) !important;
  line-height: 1.4 !important;

  white-space: normal !important;
  text-wrap: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;

  text-align: center !important;
}

@media (max-width: 760px) {
  html body[data-page="inicio"]
  main section#servicios.services-preview
  .services-drift__card-copy > p {
    width: 95% !important;
    max-width: 95% !important;

    font-size: clamp(1rem, 4vw, 1.15rem) !important;
    line-height: 1.4 !important;
  }
}

/* ==================================================
   HOME SERVICES — DESCRIPTIVOS DESKTOP
   ================================================== */
@media (min-width: 761px) {
  html body[data-page="inicio"]
  main section#servicios.services-preview
  .services-drift__card
  .services-drift__card-copy > h3 + p {
    width: 82% !important;
    max-width: 25ch !important;

    margin: 4.5% auto 0 !important;
    padding: 0 !important;

    font-size: clamp(.88rem, .78vw, 1rem) !important;
    line-height: 1.38 !important;
    font-weight: 500 !important;

    text-align: center !important;
    white-space: normal !important;
    text-wrap: balance !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}
/* ==================================================
   SERVICES — SCROLL VERTICAL NATIVO Y STAGE ESTABLE
   Mantiene drag horizontal, click y hover
   ================================================== */

html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__stage {
  position: relative !important;

  /* Evita que la altura cambie con el viewport durante el scroll */
  height: clamp(32rem, 42vw, 39rem) !important;
  min-height: 32rem !important;

  overflow: hidden !important;
  overflow-y: hidden !important;

  touch-action: pan-y pinch-zoom !important;

  overscroll-behavior-y: auto !important;
  overscroll-behavior-x: contain !important;

  -webkit-user-select: none !important;
  user-select: none !important;
}


/* El rail queda fijo dentro del stage.
   El movimiento horizontal sigue ocurriendo en cada slide. */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__rail {
  position: absolute !important;
  inset: 0 !important;

  overflow: visible !important;

  transform: none !important;

  touch-action: pan-y pinch-zoom !important;
}


/* Mantiene la posición vertical estable.
   NO eliminamos el transform porque ahí funciona el drag horizontal. */
html body[data-page="inicio"]
main section#servicios.services-preview
.services-drift__slide {
  top: 50% !important;
  margin-top: 0 !important;
}


/* TABLET */
@media (min-width: 761px) and (max-width: 1180px) {
  html body[data-page="inicio"]
  main section#servicios.services-preview
  .services-drift__stage {
    height: clamp(30rem, 55vw, 35rem) !important;
    min-height: 30rem !important;
  }
}


/* MOBILE */
@media (max-width: 760px) {
  html body[data-page="inicio"]
  main section#servicios.services-preview
  .services-drift__stage {
    height: clamp(27rem, 120vw, 32rem) !important;
    min-height: 27rem !important;
  }
}

/* ==================================================
   SERVICIOS — TEXTO DESCRIPTIVO EN 2 LÍNEAS DESKTOP
   ================================================== */

@media (min-width: 761px) {
  html body[data-page="inicio"]
  main section#servicios.services-preview
  > .section-heading
  > p.services-preview__intro {
    width: min(90vw, 52ch) !important;
    max-width: 52ch !important;
    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
    text-wrap: balance !important;
  }
}