/* Refinamientos de UX para la sección de áreas de práctica. */
.site-header {
  background: rgb(246 244 239 / 92%);
  border-bottom: 1px solid rgb(11 13 12 / 7%);
  transition: background-color .45s ease, color .45s ease, border-color .45s ease;
}

body.on-dark-panel .site-header {
  color: #f8f6f1;
  background: rgb(11 13 12 / 88%);
  border-bottom-color: rgb(255 255 255 / 12%);
}

body.on-dark-panel .site-header .brand strong { color: #f8f6f1; }
body.on-dark-panel .site-header .nav-cta { border-color: rgb(255 255 255 / 70%); }
body.on-dark-panel .site-header nav a:not(.nav-cta):hover { border-color: var(--gold); }

.hero-portrait {
  width: min(100%, 430px);
  height: min(68svh, 530px);
  overflow: visible;
}

.hero-portrait img {
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center top;
}

.service-grid article {
  position: relative;
  min-height: 156px;
  padding: 1.25rem 1.35rem;
  cursor: pointer !important;
  transition: background-color .25s ease, box-shadow .25s ease;
}

.service-grid article,
.service-grid article * {
  cursor: pointer !important;
}

.service-grid article:hover {
  background: rgb(196 154 69 / 7%);
  box-shadow: inset 0 3px 0 var(--gold);
}

.service-grid article h3 {
  transition: color .25s ease, transform .25s ease;
}

.service-grid article:hover h3 {
  color: #e2c27e;
  transform: translateX(4px);
}

.service-grid article::after {
  content: "Solicitar asesoría  →";
  position: absolute;
  right: 1.2rem;
  bottom: .8rem;
  color: var(--gold);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}

.service-grid article:hover::after,
.service-grid article:focus-visible::after {
  opacity: 1;
  transform: none;
}

.service-grid article:focus-visible {
  z-index: 1;
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.services.is-active .service-grid article {
  animation: service-card-enter .55s both cubic-bezier(.16, 1, .3, 1);
}

.services.is-active .service-grid article:nth-child(1) { animation-delay: .18s; }
.services.is-active .service-grid article:nth-child(2) { animation-delay: .25s; }
.services.is-active .service-grid article:nth-child(3) { animation-delay: .32s; }
.services.is-active .service-grid article:nth-child(4) { animation-delay: .39s; }
.services.is-active .service-grid article:nth-child(5) { animation-delay: .46s; }
.services.is-active .service-grid article:nth-child(6) { animation-delay: .53s; }
.services.is-active .service-grid article:nth-child(7) { animation-delay: .60s; }

@keyframes service-card-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .service-grid article, .service-grid article h3 { transition: none; }
  .services.is-active .service-grid article { animation: none; }
}

@media (max-width: 850px) {
  .hero-portrait { width: min(100%, 500px); height: auto; }
  .hero-portrait img { height: auto !important; aspect-ratio: 1 !important; object-fit: cover !important; }
}