/* Amergent Partners — Nuestro equipo: hero, team groups and the full-profile side panel.
   Loaded after site.css. Mobile-first (breakpoints in css/tokens.css); at 1440px it renders
   exactly as the original desktop design. */

/* ── Hero (variant of the shared .page-hero: taller, full-strength photo, wide gutters) ── */

.page-hero--team { --hero-h: 70vh; --hero-min: 480px; margin-bottom: clamp(56px, 3.756vw + 41.92px, 96px); }
@supports (height: 1svh) {
  .page-hero--team { --hero-h: 70svh; }
}
.page-hero--team .page-hero__media { opacity: 1; }
.page-hero--team .page-hero__shade {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-text) 78%, transparent) 0%,
      color-mix(in srgb, var(--color-text) 30%, transparent) 38%,
      color-mix(in srgb, var(--color-text) 90%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--color-text) 70%, transparent) 0%, transparent 60%);
}
.page-hero--team .crumbs { left: var(--pad-x-wide); right: var(--pad-x-wide); color: var(--color-neutral-300); }
.page-hero--team .crumbs a { color: var(--color-neutral-300); }
.page-hero--team .page-hero__body { padding-left: var(--pad-x-wide); padding-right: var(--pad-x-wide); }
.page-hero--team .page-hero__title { font-size: clamp(38px, 1.849vw + 31.07px, 50px); line-height: 1.02; }
.page-hero--team .page-hero__aside { min-width: 0; }
.page-hero--team .page-hero__aside p { line-height: 1.6; }

@media (min-width: 1024px) {
  .page-hero--team { --hero-min: 560px; }
  .page-hero--team .crumbs { right: auto; }
  .page-hero--team .page-hero__body { grid-template-columns: minmax(0,1fr) minmax(0,360px); }
  .page-hero--team .page-hero__title { font-size: clamp(50px, 4.8vw, 80px); }
}

/* Each title line stays on one line once there is room for it beside the aside. */
@media (min-width: 1280px) {
  .page-hero--team .page-hero__title > span { white-space: nowrap; }
}

@media (hover: hover) {
  .page-hero--team .crumbs a:hover { color: var(--color-bg); }
}

/* ── Team groups ────────────────────────────────────────────────────── */

.team {
  display: flex; flex-direction: column; gap: clamp(48px, 2.254vw + 39.55px, 72px);
  padding: 0 var(--pad-x-wide) clamp(64px, 6.009vw + 41.48px, 128px);
}
.team-group { display: flex; flex-direction: column; gap: clamp(20px, 0.751vw + 17.19px, 28px); }
.team-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px;
  padding-top: 18px; border-top: 2px solid var(--color-text);
}
.team-group__title { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.team-group__num { font-size: 12px; letter-spacing: 0.08em; color: var(--color-neutral-700); }
.team-group__title h2 { margin: 0; font-size: clamp(22px, 0.376vw + 20.59px, 26px); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; }
.team-group__count { font-size: var(--fs-14); color: var(--color-neutral-700); }

/* 1 column on small phones → 2 (sm/md) → 3 (lg) → 4 (xl+, the original). */
.team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }

@media (min-width: 480px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 768px) {
  .team-grid { gap: 24px; }
}

@media (min-width: 1024px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (min-width: 1280px) {
  .team-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Member card: portrait with name; the whole card (or its "+" button) opens the profile. */
.member {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; cursor: pointer;
  background: var(--color-neutral-900); color: var(--color-bg);
}
.member__photo { position: absolute; inset: 0; transition: transform 900ms cubic-bezier(.2,.7,.2,1); }
.member__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--color-text) 88%, transparent) 0%,
    color-mix(in srgb, var(--color-text) 45%, transparent) 26%, transparent 50%);
}
.member__id {
  position: absolute; left: clamp(16px, 0.563vw + 13.9px, 22px); right: clamp(16px, 0.563vw + 13.9px, 22px); bottom: 20px;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.member__name { font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
.member__role { font-size: var(--fs-13); line-height: 1.4; color: var(--color-neutral-200); }
/* 44px touch target; the visible 34px square is drawn by ::before (same spot as the design). */
.member__open {
  position: absolute; top: 13px; right: 13px; width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--color-text); cursor: pointer;
}
.member__open::before { content: ""; position: absolute; inset: 5px; background: var(--color-bg); }
.member__open .ic { position: relative; }

/* Contact card: full row while the grid has 1–2 columns, two cells from lg (fills the last row). */
.team-cta-cell { grid-column: 1 / -1; display: flex; min-height: 240px; }
.team-cta {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: clamp(24px, 0.751vw + 21.19px, 32px);
  text-decoration: none; background: var(--color-text); color: var(--color-bg);
}
.team-cta__k { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-400); }
.team-cta__body { display: flex; flex-direction: column; gap: 24px; }
.team-cta__t { max-width: 420px; font-size: clamp(26px, 0.939vw + 22.48px, 36px); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.team-cta__l { display: flex; align-items: center; gap: 12px; font-size: var(--fs-15); font-weight: 600; }

@media (min-width: 1024px) {
  .team-cta-cell { grid-column: span 2; min-height: 0; }
  .team-cta { gap: 0; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .member:hover .member__photo { transform: scale(1.04); }
}

@media (hover: hover) {
  .member__open:hover::before { background: var(--color-neutral-300); }
  .team-cta:hover { background: var(--color-neutral-800); color: var(--color-bg); }
}

/* ── Full profile: side panel ───────────────────────────────────────── */

/* Phones and short screens: a full-screen sheet that scrolls as one piece; the counter and the
   prev / next / close buttons stay pinned on top (solid once the text scrolls under them).
   From md with enough height: the original 560px side panel whose text scrolls under a fixed photo. */
.tm { font-family: var(--font-body); }
.tm[hidden] { display: none; }
.tm__backdrop {
  position: fixed; inset: 0; z-index: 8; overscroll-behavior: contain;
  background: color-mix(in srgb, var(--color-text) 35%, transparent);
  backdrop-filter: blur(10px) saturate(0.8); -webkit-backdrop-filter: blur(10px) saturate(0.8);
}
.tm__panel {
  --tm-bar: 68px;
  position: fixed; inset: 0; z-index: 9;
  display: flex; flex-direction: column; background: var(--color-text); color: var(--color-bg);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--color-neutral-700) transparent;
}
.tm__panel:focus { outline: none; }

.tm__top {
  position: sticky; top: 0; z-index: 2; flex: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  height: calc(var(--tm-bar) + var(--safe-top)); margin-bottom: calc(-1 * (var(--tm-bar) + var(--safe-top)));
  padding: var(--safe-top) max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px));
  transition: background-color 300ms ease;
}
.tm__panel.is-scrolled .tm__top {
  background: color-mix(in srgb, var(--color-text) 94%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.tm__counter { font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.tm__ctrls { display: flex; gap: 6px; }
.tm__btn {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-bg) 18%, transparent); background: transparent; color: var(--color-bg);
  font-family: inherit; cursor: pointer; transition: background 250ms, border-color 250ms;
}
.tm__btn--close { margin-left: 10px; }

.tm__media {
  position: relative; flex: none; overflow: hidden; background: var(--color-neutral-900);
  height: 46vh; height: 46svh; min-height: 260px; max-height: 440px;
}
.tm__photo { position: absolute; inset: 0; }
.tm__video { position: absolute; inset: 0; overflow: hidden; container-type: size; pointer-events: none; }
.tm__video-frame {
  position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(56.25cqw, 100cqh);
  transform: translate(-50%, -50%) scale(1.2); opacity: 0; transition: opacity 900ms ease;
}
.tm__video-frame.is-playing { opacity: 1; }
.tm__video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.tm__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, var(--color-text) 0%, color-mix(in srgb, var(--color-text) 60%, transparent) 22%, transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-text) 55%, transparent) 0%, transparent 22%);
}

.tm__body {
  position: relative; flex: none; margin-top: -92px;
  padding: 0 max(20px, env(safe-area-inset-right, 0px)) 32px max(20px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: 24px;
}
.tm__head { display: flex; flex-direction: column; gap: 10px; }
.tm__section {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-300);
}
.tm__section-rule { display: block; width: 28px; height: 1px; background: currentColor; }
.tm__name { margin: 0 0 0 -0.03em; font-size: clamp(32px, 1.127vw + 27.78px, 44px); font-weight: 400; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.tm__role { font-size: 16px; line-height: 1.4; color: var(--color-neutral-400); }
.tm__bio { margin: 0; font-size: var(--fs-15); line-height: 1.75; color: var(--color-neutral-300); text-wrap: pretty; }

.tm__facts { margin: 0; display: flex; flex-direction: column; }
.tm__row {
  display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; padding: 18px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-bg) 12%, transparent);
}
.tm__row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color-bg) 12%, transparent); }
.tm__row dt { padding-top: 3px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-500); }
.tm__row dd { margin: 0; min-width: 0; }
.tm__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tm__list li { display: flex; flex-direction: column; gap: 2px; }
.tm__item-t { font-size: var(--fs-14); line-height: 1.4; }
.tm__item-s { font-size: 12px; line-height: 1.45; color: var(--color-neutral-400); }
.tm__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tm__chip {
  padding: 7px 10px; font-size: 12px; line-height: 1; color: var(--color-neutral-300);
  border: 1px solid color-mix(in srgb, var(--color-bg) 18%, transparent);
}
.tm__chips-note { flex-basis: 100%; font-size: 12px; line-height: 1.5; color: var(--color-neutral-500); }
.tm__links { display: flex; flex-wrap: wrap; gap: 0 24px; font-size: 14px; }
.tm__links a { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--color-bg); }

.tm__next {
  flex: none; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 16px;
  margin-top: auto;
  padding: 16px max(20px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  border: 0; border-top: 1px solid color-mix(in srgb, var(--color-bg) 12%, transparent);
  background: transparent; color: var(--color-bg); font-family: inherit; text-align: left; cursor: pointer;
  transition: background 300ms;
}
.tm__next:focus-visible { outline-offset: -4px; }
.tm__next-thumb { display: block; width: 48px; height: 56px; background-color: var(--color-neutral-800); }
.tm__next-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 15px; }
.tm__next-k { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-500); }

@media (min-width: 480px) {
  .tm__row { grid-template-columns: 112px minmax(0,1fr); gap: 20px; }
}

/* md: the side panel keeps the design's width. */
@media (min-width: 768px) {
  .tm__panel { left: auto; width: 560px; }
  .tm__name { font-size: 44px; }
}

/* md with room in height: the original layout (photo fixed on top, the text scrolls below it). */
@media (min-width: 768px) and (min-height: 600px) {
  .tm__panel { overflow: visible; }
  .tm__top { position: absolute; top: 0; left: 0; right: 0; height: auto; margin: 0; padding: 24px 32px; }
  .tm__media { height: 42vh; height: 42svh; min-height: 320px; max-height: 480px; }
  .tm__body {
    flex: 1; min-height: 0; padding: 0 40px 28px;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--color-neutral-700) transparent;
  }
  .tm__next { margin-top: 0; padding: 16px 40px; }
}

@media (min-width: 1024px) {
  .tm__btn { width: 40px; height: 40px; }
  .tm__links a { min-height: 0; }
}

@media (hover: hover) {
  .tm__btn:hover { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); }
  .tm__links a:hover { color: var(--color-neutral-400); }
  .tm__next:hover { background: color-mix(in srgb, var(--color-bg) 6%, transparent); }
}

/* Entrance (re-runs every time the panel is shown). */
@keyframes tm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tm-slide { from { transform: translateX(100%); } to { transform: none; } }
@keyframes tm-zoom { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes tm-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.tm__backdrop { animation: tm-fade 900ms cubic-bezier(.4,0,.2,1) both; }
.tm__panel { animation: tm-slide 1000ms cubic-bezier(.22,1,.36,1) both; }
.tm__photo { animation: tm-zoom 1600ms cubic-bezier(.22,1,.36,1) 250ms both; }
.tm__top { animation: tm-up 900ms cubic-bezier(.22,1,.36,1) 500ms both; }
.tm__head { animation: tm-up 900ms cubic-bezier(.22,1,.36,1) 560ms both; }
.tm__bio { animation: tm-up 900ms cubic-bezier(.22,1,.36,1) 640ms both; }
.tm__facts { animation: tm-up 900ms cubic-bezier(.22,1,.36,1) 720ms both; }
.tm__next { animation: tm-up 900ms cubic-bezier(.22,1,.36,1) 800ms both; }

@media (prefers-reduced-motion: reduce) {
  .member__photo, .tm__top { transition: none; }
  .tm__backdrop, .tm__panel, .tm__photo, .tm__top, .tm__head, .tm__bio, .tm__facts, .tm__next { animation: none; }
}