/* Efectos del menú principal. Los enlaces conservan su caja y nombre accesible. */
.nav a { display: inline-block; }
.nav__label { position: relative; display: block; overflow: hidden; line-height: 1.35; }
.nav__label > span { display: block; transition: transform .3s cubic-bezier(.2, .75, .25, 1); }
.nav__label > span + span { position: absolute; inset: 0; transform: translateY(110%); }
.nav a:hover .nav__label > span:first-child,
.nav a:focus-visible .nav__label > span:first-child { transform: translateY(-110%); }
.nav a:hover .nav__label > span + span,
.nav a:focus-visible .nav__label > span + span { transform: translateY(0); }
.nav a:focus-visible { outline: 2px solid var(--lilac-dark); outline-offset: 4px; }

/* Presentación y movimiento de los cuatro bloques de capacidades. */
.intro { padding-block: 84px; text-align: left; background: #f7fbfc; }
.intro .container.intro--redesign { display: block; }
.intro__layout { display: grid; gap: clamp(42px, 6vw, 84px); }
.intro-capability {
  --entry-distance: clamp(60px, 4.5vw, 70px);
  --entry-duration: 620ms;
  --entry-easing: cubic-bezier(.22, 1, .36, 1);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .88fr);
  gap: clamp(36px, 7vw, 104px);
  align-items: center;
  opacity: 1;
  transform: none;
}
.intro-capability--reverse { grid-template-columns: minmax(360px, .88fr) minmax(0, 1fr); }
.intro-capability--reverse .intro-capability__copy { order: 2; }
.intro-capability--reverse .intro-capability__media { order: 1; }
.intro-capability__copy { min-width: 0; }
.intro-capability h3 {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 16px;
  padding-bottom: 12px;
  color: var(--ink);
  font: 700 clamp(1.6rem, 2.3vw, 2.05rem)/1.16 var(--body);
  letter-spacing: -.02em;
}
.intro-capability h3::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: var(--pill);
  content: '';
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
  background: #08a889;
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
}
.intro-capability p { max-width: 650px; margin: 0; color: var(--muted); font-size: 1.25rem; line-height: 1.75; }
.intro-capability__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(6, 59, 97, .16);
  border-radius: 20px;
  background: #dcebed;
  box-shadow: 0 0 0 0 rgba(8, 168, 137, 0);
  transition: border-color .28s ease, box-shadow .28s ease;
}
.intro-capability__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) {
  .intro-capability:hover h3::after,
  .intro-capability:focus-within h3::after { transform: scaleX(1); }
  .intro-capability:hover .intro-capability__media,
  .intro-capability:focus-within .intro-capability__media { border-color: #08a889; box-shadow: 0 0 0 2px rgba(8, 168, 137, .12); }
  .intro-capability:hover .intro-capability__media img,
  .intro-capability:focus-within .intro-capability__media img { transform: scale(1.02); }
}

/* Solo se oculta contenido mientras el observer está activo y puede revelarlo. */
.has-scroll-reveal .intro-capability {
  opacity: 0;
  transform: translateX(calc(-1 * var(--entry-distance)));
  transition: opacity var(--entry-duration) var(--entry-easing), transform var(--entry-duration) var(--entry-easing);
}
.has-scroll-reveal .intro-capability--reverse { transform: translateX(var(--entry-distance)); }
.has-scroll-reveal .intro-capability.is-revealed { opacity: 1; transform: translateX(0); }

@media (max-width: 991px) {
  .intro { padding-block: 76px; }
  .intro-capability, .intro-capability--reverse { --entry-distance: clamp(40px, 5vw, 50px); grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr); gap: 32px; }
}
@media (max-width: 767px) {
  .intro { padding-block: 64px; }
  .intro__layout { gap: 46px; }
  .intro-capability, .intro-capability--reverse { --entry-distance: clamp(24px, 7vw, 32px); grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .intro-capability--reverse .intro-capability__copy { order: 1; }
  .intro-capability--reverse .intro-capability__media { order: 2; }
  .intro-capability h3 { font-size: 1.45rem; }
  .intro-capability p { font-size: 1.1rem; }
}
@media (max-width: 767px) {
  .nav a:hover .nav__label > span:first-child,
  .nav a:focus-visible .nav__label > span:first-child { transform: none; transition: none; }
  .nav__label > span + span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav a:hover .nav__label > span:first-child,
  .nav a:focus-visible .nav__label > span:first-child,
  .nav a:hover .nav__label > span + span,
  .nav a:focus-visible .nav__label > span + span { transform: none; transition: none; }
  .nav__label > span + span { display: none; }
  .intro-capability, .intro-capability--reverse {
    --entry-distance: 45px;
    --entry-duration: 520ms;
    --entry-easing: ease-out;
  }
  .has-scroll-reveal .intro-capability { transition-duration: 520ms !important; }
  .intro-capability__media { transition-duration: 120ms; }
  .intro-capability__media img { transition-duration: 180ms; }
  .intro-capability h3::after {
    transition-duration: 300ms !important;
    transition-timing-function: ease-out;
  }
  @media (hover: hover) and (pointer: fine) {
    .intro-capability:hover .intro-capability__media img,
    .intro-capability:focus-within .intro-capability__media img { transform: scale(1.01); }
  }
}