/* Refinamiento de la base oscura: sin reemplazar su identidad visual. */
.site-nav { transition: top .65s cubic-bezier(.22, 1, .36, 1), padding .65s cubic-bezier(.22, 1, .36, 1); }
.nav-shell {
  width: 100%;
  max-width: 100%;
  transition: max-width .65s cubic-bezier(.22, 1, .36, 1), padding .65s ease,
    border-radius .65s ease, border-color .65s ease, background .65s ease,
    box-shadow .65s ease, opacity .36s ease, transform .36s ease, visibility .36s;
}
.nav-group { gap: clamp(14px, 1.6vw, 24px); }
.nav-group a { white-space: nowrap; }
.nav-group a:last-child { margin-left: auto; }

.clients, .services, .real-cases, .about { padding-block: clamp(64px, 7.5vw, 96px); }
.clients-intro, .services-head, .real-cases-head { margin-bottom: 36px; }
.hero-media-image { animation-duration: 24s; }
.film-frame::after { animation-duration: 16s; }

.service-card { min-height: 510px; transition: border-color .5s ease, transform .6s ease; }
.service-card-content { display: grid; grid-template-rows: 76px 126px auto; width: 100%; }
.service-card h3 { margin: 0; align-self: end; padding-bottom: 14px; font-size: 1.85rem; line-height: 1.05; }
.service-card p { margin: 0; line-height: 1.5; color: rgba(236, 239, 221, .8); }
.service-card .tags { align-content: start; margin-top: 0; min-height: 76px; }
.service-visual { transition: opacity .8s ease, filter .8s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.service-card:hover { transform: translateY(-2px); }
.service-card:hover .service-visual { transform: scale(1.045); }

.case-feature { width: min(960px, 100%); height: 460px; border-radius: 22px; }
.case-feature-copy { padding: 32px; }
.case-feature h3 { max-width: 13ch; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1.02; }
.case-feature-copy > p { max-width: 46%; margin-bottom: 0; font-size: 1rem; line-height: 1.5; }
.case-avatar { width: 300px; right: 6%; transition: transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.case-feature:hover .case-avatar { transform: translateY(-50%) rotate(0); }
.case-open { display: none; }

@media (max-width: 767px) {
  .service-card { min-height: 510px; }
  .case-feature { height: auto; }
  .case-feature-copy { padding: 300px 22px 28px; }
  .case-card-top { position: absolute; top: 20px; left: 22px; width: calc(100% - 44px); }
  .case-brand { max-width: 100%; }
  .case-feature h3 { max-width: 100%; margin-top: 0; font-size: clamp(2rem, 9vw, 3rem); }
  .case-feature-copy > p { max-width: 100%; font-size: .94rem; }
  .case-avatar { top: 164px; right: 50%; width: 208px; }
  .case-feature:hover .case-avatar { transform: translate(50%, -50%) rotate(0); }
}

@media screen {
  .hero-media-image, .service-visual, .case-avatar, .team-portrait img {
    translate: var(--motion-x, 0px) var(--motion-y, 0px);
    transition: translate 1s cubic-bezier(.22, 1, .36, 1), transform 1.2s cubic-bezier(.22, 1, .36, 1), filter .8s ease, opacity .8s ease;
  }
  .team-portrait { overflow: hidden; }
  .team-portrait img { scale: 1.025; }
  .button { position: relative; overflow: hidden; isolation: isolate; transition: box-shadow .5s ease, border-color .5s ease, transform .5s ease; }
  .button::after {
    content: ''; position: absolute; inset: -60% -30%; pointer-events: none;
    background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
    transform: translateX(-100%); transition: transform .9s cubic-bezier(.22, 1, .36, 1);
  }
  .button:hover::after, .button:focus-visible::after { transform: translateX(100%); }
  .button:hover { transform: translateY(-2px); }
  .nav-group a:not(:last-child) { position: relative; }
  .nav-group a:not(:last-child)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: right;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  }
  .nav-group a:hover::after, .nav-group a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
}