/* Kroma Living — mobile-only (≤640px) horizontal scroll for the tech and
   team sections. Both are plain, non-blocking native horizontal scroll
   rows with two arrow buttons as the only affordance: nothing here ever
   captures vertical scroll, so either section can be scrolled straight
   past without seeing every card (an earlier scroll-locking version of
   the tech carousel — freezing <body> with position:fixed to step through
   cards one at a time — kept misfiring in real use and was dropped).
   On tablet and desktop (>640px) both revert to the plain responsive grid
   they had before — same column logic as the other .grid-sym-N blocks. */

.hscroll-outer { position: relative; }
/* mobile-only role line under each team name (see .k-flip-back, which
   already reveals the role on desktop's hover-flip) — hidden by default,
   shown back in the ≤640px block below */
.k-role-mobile { display: none; }

/* ---------- Mobile (≤640px): free horizontal scroll + arrows ---------- */
@media (max-width: 640px) {
  .hscroll-outer-tech, .hscroll-outer-team { padding-bottom: 6px; }

  .hscroll-track-tech, .hscroll-track-team {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 6px 8px 10px;
    scrollbar-width: none;
  }
  .hscroll-track-tech::-webkit-scrollbar, .hscroll-track-team::-webkit-scrollbar { display: none; }

  .hscroll-track-tech { gap: 14px; }
  .hscroll-slide-tech {
    flex: 0 0 auto;
    width: 84vw;
    max-width: 340px;
    scroll-snap-align: start;
    box-sizing: border-box;
  }
  /* equalized to a common min-height by carousel.js (equalizeCards), so
     every tech card reads as the same size regardless of how much text
     its bullet list holds */
  .hscroll-slide-tech > .k-tech { max-width: none; width: 100%; margin: 0; height: 100%; box-sizing: border-box; }

  .hscroll-track-team { gap: 14px; }
  .hscroll-slide-team {
    flex: 0 0 auto;
    width: 58vw;
    max-width: 210px;
    scroll-snap-align: start;
    box-sizing: border-box;
  }
  .hscroll-slide-team > .k-flip { max-width: none; width: 100%; margin: 0; }

  .k-role-mobile {
    display: block;
    margin-top: 3px;
    font-size: .8125rem;
    font-weight: 200;
    line-height: 1.4;
    color: var(--petroleo-500);
  }

  .hscroll-arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(29,28,59,.18);
    background: rgba(250,248,244,.92);
    color: var(--kroma-petroleo);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: opacity 200ms ease-out;
  }
  .hscroll-arrow[disabled] { opacity: .35; cursor: default; }
  .hscroll-arrow.hscroll-arrow--prev { left: -2px; }
  .hscroll-arrow.hscroll-arrow--next { right: -2px; }
}

/* ---------- Tablet & desktop (>640px): plain responsive grid, as before ---------- */
@media (min-width: 641px) {
  .hscroll-track-tech {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    transform: none !important;
  }
  .hscroll-track-team {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr);
    gap: 20px 16px;
    transform: none !important;
  }
  .hscroll-dots, .hscroll-arrow { display: none !important; }
  .hscroll-slide {
    flex: none;
    width: auto;
    height: auto;
    display: block;
  }
  .hscroll-slide-tech > .k-tech,
  .hscroll-slide-team > .k-flip {
    max-width: none;
    margin: 0;
  }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .hscroll-track-tech { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 641px) and (max-width: 1500px) {
  .hscroll-track-team { grid-template-columns: 1fr !important; }
}