/* "Qué hacemos" (home): tarjetas altas con foto, degradado de marca y descripción que se abre al pasar el mouse.
   Entrada escalonada al hacer scroll (la activa home-services.js; sin JS todo se ve). */
.home-services { background: #FFFFFF; }
.hs__inner { padding: clamp(28px, 3.2vw, 56px) var(--page-gutter, 42px) clamp(48px, 5.5vw, 96px); }
.hs__intro {
  margin: 0 0 clamp(24px, 2.6vw, 40px); max-width: 34ch; position: relative; padding-top: 20px;
  font-size: var(--t-lead-fs, 18px); line-height: var(--t-lead-lh, 1.4); color: #3A3F45;
}
.hs__intro::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 3px; background: #0F172A; transform-origin: left; }
.hs__intro strong { color: #0F172A; font-weight: 600; }

.hs__cards { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; height: clamp(440px, 40vw, 600px); }
.hs-card-wrap { flex: 1 1 0; min-width: 0; transition: flex-grow 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.hs__cards:hover .hs-card-wrap { flex-grow: 0.78; }
.hs__cards:hover .hs-card-wrap:hover, .hs__cards:focus-within .hs-card-wrap:focus-within { flex-grow: 2.6; }

.hs-card { position: relative; display: block; height: 100%; overflow: hidden; border-radius: 4px; color: #FFFFFF; text-decoration: none; background: #0F172A; isolation: isolate; }
.hs-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 900ms cubic-bezier(0.23, 1, 0.32, 1), filter 500ms ease; filter: saturate(0.92); }
.hs-card__shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10, 40, 46, 0.94) 0%, rgba(10, 40, 46, 0.62) 34%, rgba(10, 40, 46, 0.08) 68%, rgba(10, 40, 46, 0) 100%);
  transition: opacity 400ms ease;
}
.hs-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #14B8A6; z-index: 3; transform: scaleX(0); transform-origin: left; transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.hs-card__num { position: absolute; z-index: 2; top: 18px; left: 20px; font-size: var(--t-small-fs, 14px); font-weight: 500; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); }
.hs-card__body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.hs-card__title { margin: 0; font-size: var(--t-title-fs, 24px); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; color: #FFFFFF; }
.hs-card__more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 500ms cubic-bezier(0.23, 1, 0.32, 1), opacity 400ms ease 80ms; }
.hs-card__more > * { overflow: hidden; min-height: 0; }
.hs-card__text { display: block; font-size: var(--t-body-fs, 16px); line-height: 1.4; color: rgba(255, 255, 255, 0.92); max-width: 30ch; }
.hs-card__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--t-small-fs, 14px); font-weight: 600; letter-spacing: 0.02em; color: #FFFFFF; }
.hs-card__cta svg { transition: transform 300ms ease; }

.hs-card-wrap:hover .hs-card__more, .hs-card:focus-visible .hs-card__more, .hs-card-wrap:focus-within .hs-card__more { grid-template-rows: 1fr; opacity: 1; }
.hs-card-wrap:hover .hs-card__img, .hs-card:focus-visible .hs-card__img { transform: scale(1.1); filter: saturate(1.05); }
.hs-card-wrap:hover .hs-card::after, .hs-card:focus-visible::after { transform: scaleX(1); }
.hs-card:hover .hs-card__cta svg { transform: translateX(4px); }
.hs-card:focus-visible { outline: 2px solid #14B8A6; outline-offset: 3px; }

/* Entrada al hacer scroll (solo si el script marcó la sección como lista) */
.hs-ready .hs__intro::before { transform: scaleX(0); transition: transform 800ms cubic-bezier(0.23, 1, 0.32, 1) 150ms; }
.hs-ready .hs__intro, .hs-ready .hs-card-wrap { opacity: 0; transform: translateY(36px); }
.hs-ready.hs-in .hs__intro { opacity: 1; transform: none; transition: opacity 700ms ease, transform 800ms cubic-bezier(0.23, 1, 0.32, 1); }
.hs-ready.hs-in .hs__intro::before { transform: scaleX(1); }
.hs-ready.hs-in .hs-card-wrap { opacity: 1; transform: none; transition: opacity 800ms ease, transform 900ms cubic-bezier(0.23, 1, 0.32, 1), flex-grow 600ms cubic-bezier(0.23, 1, 0.32, 1); transition-delay: calc(var(--i, 0) * 110ms + 150ms), calc(var(--i, 0) * 110ms + 150ms), 0ms; }
.hs-ready.hs-in .hs-card-wrap:hover { transition-delay: 0ms; }

/* Tableta y móvil: tarjetas en fila deslizable con la descripción siempre visible */
@media (max-width: 1099px) {
  .hs__cards { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin: 0 calc(var(--page-gutter, 18px) * -1); padding-left: var(--page-gutter, 18px); padding-right: var(--page-gutter, 18px); scrollbar-width: none; }
  .hs__cards::-webkit-scrollbar { display: none; }
  .hs-card-wrap, .hs__cards:hover .hs-card-wrap, .hs__cards:hover .hs-card-wrap:hover { flex: 0 0 min(72vw, 320px); scroll-snap-align: start; }
  .hs-card { height: clamp(380px, 110vw, 460px); }
  .hs-card__more { grid-template-rows: 1fr; opacity: 1; }
  .hs-card__text { font-size: 14px; }
  .hs-card::after { transform: scaleX(1); height: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-ready .hs__intro, .hs-ready .hs-card-wrap { opacity: 1; transform: none; }
  .hs-ready .hs__intro::before { transform: none; }
  .hs-card-wrap, .hs-card__img, .hs-card__more, .hs-card::after { transition: none; }
}