/* Menú de Servicios: nombres grandes y fotos que aparecen al pasar el mouse (estilo "reveal images") */
.sub__pics { display: none; }

@media (min-width: 901px) {
  .sub__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px calc(var(--gap) * 2); padding: 34px 0 26px; }
  .sub__list li { min-width: 0; }
  .sub__list a { position: relative; display: inline-flex; width: fit-content; max-width: calc(100% - 4rem); padding: 14px 0; }
  .sub__text { display: grid; gap: .45rem; transition: opacity .5s var(--ease); }
  .sub__name { font-size: clamp(1.9rem, 2.7vw, 2.8rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; }
  .sub__desc { max-width: 38ch; }
  .sub__list a:hover .sub__text, .sub__list a:focus-visible .sub__text { opacity: .4; }
  .sub__list a:focus-visible { outline: 2px solid var(--brand, #1a47e0); outline-offset: 6px; border-radius: 4px; }

  .sub__pics { display: block; position: absolute; right: -3rem; top: 0; width: 5rem; height: 6.25rem; z-index: 2; pointer-events: none; }
  .sub__pic {
    position: absolute; inset: 0; overflow: hidden; border-radius: 8px;
    opacity: 0; transform: scale(0);
    transition: transform .5s var(--ease) .1s, opacity .5s .1s, box-shadow .5s .1s;
  }
  .sub__pic img { width: 100%; height: 100%; object-fit: cover; }
  .sub__list a:hover .sub__pic, .sub__list a:focus-visible .sub__pic {
    opacity: 1; transform: scale(1); box-shadow: 0 18px 32px -12px rgba(0,0,0,.7);
  }
  .sub__list a:hover .sub__pic--a, .sub__list a:focus-visible .sub__pic--a {
    transform: translate(1.5rem, 1.5rem) rotate(12deg) scale(1);
    transition-delay: .15s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sub__text, .sub__pic { transition: none !important; }
}