.people {
  position: relative;
  background: #fff;
  /* clip (no hidden): recorta las decos igual PERO no crea scroll container, así
     no atrapa el position:sticky del abanico mobile (que rompía el pin en todos
     los navegadores). Mismo criterio que .features. */
  overflow: clip;
  margin-top: -2px;   /* cierra la brecha de 1px de subpixel con features-scroll-track */
  z-index: 1;         /* garantiza stacking por encima del track purple */
}

/* Decos — diseño Figma (node 3180:27669): garabatos + sparkle */
.people__deco-teal {
  position: absolute;
  left: 13%;
  bottom: 0%;
  width: 6.5rem;
  height: auto;
  pointer-events: none;
  z-index: 0;
  animation: float-slow 6s ease-in-out infinite;
}

.people__deco-yellow {
  position: absolute;
  left: 6%;
  bottom: 2%;
  width: 5.75rem;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

.people__deco-sparkle {
  position: absolute;
  right: 13%;
  top: 18%;
  width: 8.1875rem;
  height: 8.1875rem;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.people__deco-line {
  opacity: 0;
}

.people__header {
  position: relative;
  z-index: 1;
  margin-bottom: var(--space-20);
}

/* Título — Figma node: 3.75rem / line-height 88.3% / regular 400 + bold 700 */
.people .section-title {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
  line-height: 0.883;
  font-weight: 400;
}

.people .section-title strong {
  font-weight: 700;
}

.people__grid,
.people__cta {
  position: relative;
  z-index: 1;
}

.people__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-10);
  align-items: start;
}

/* ── Card shell ── */
.persona-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform var(--transition-base);
}

.persona-card:hover {
  transform: translateY(-8px);
}

.persona-card--purple { box-shadow: inset 0 0 0 9px var(--color-brand-purple); }
.persona-card--pink   { box-shadow: inset 0 0 0 9px var(--color-brand-magenta); }
.persona-card--teal   { box-shadow: inset 0 0 0 9px var(--color-brand-teal-dark); }

/* Face image — en flujo, da la altura a la card */
.persona-card__img-face {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity var(--transition-base);
}

/* Hover image — absoluta, se intercambia con fade */
.persona-card__img-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity var(--transition-base);
}

/* Gradient intenso — solo en estado hover/expanded */
.persona-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.persona-card--purple::before {
  background: linear-gradient(181deg, rgba(148, 118, 255, 0.00) 9.53%, var(--color-purple) 46.09%);
}
.persona-card--pink::before {
  background: linear-gradient(181deg, rgba(240, 40, 143, 0.00) 9.53%, var(--color-brand-magenta) 46.09%);
}
.persona-card--teal::before {
  background: linear-gradient(181deg, rgba(17, 170, 178, 0.00) 9.53%, var(--color-brand-teal-dark) 46.09%);
}
.persona-card.is-expanded::before { opacity: 1; }

/* Gradient suave — solo en estado face */
.persona-card__gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--transition-base);
}
.persona-card--purple .persona-card__gradient {
  background: linear-gradient(172deg, rgba(148, 118, 255, 0.00) 31.05%, rgba(135, 104, 245, 0.45) 93.78%);
}
.persona-card--pink .persona-card__gradient {
  background: linear-gradient(172deg, rgba(240, 40, 143, 0.00) 31.05%, rgba(240, 40, 143, 0.45) 93.78%);
}
.persona-card--teal .persona-card__gradient {
  background: linear-gradient(175deg, rgba(17, 170, 178, 0.00) 31.32%, rgba(17, 170, 178, 0.45) 87.29%);
}

/* Label compacto — visible en default */
.persona-card__label {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: 1rem;
  color: #fff;
  z-index: 2;
  transition: opacity var(--transition-base);
}
.persona-card--purple .persona-card__label { background: var(--color-purple); }
.persona-card--pink   .persona-card__label { background: var(--color-brand-magenta); }
.persona-card--teal   .persona-card__label { background: var(--color-brand-teal-dark); }

.persona-card__label h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: var(--space-1);
  line-height: 1.2;
}
.persona-card__label p {
  font-size: var(--fs-sm);
  opacity: 0.9;
  line-height: 1.4;
}

/* Panel de detalle — crece hacia arriba desde el bottom */
.persona-card__detail {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  z-index: 3;
  border-radius: 1.5rem;
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
}
.persona-card--purple .persona-card__detail { background: var(--color-purple); }
.persona-card--pink   .persona-card__detail { background: var(--color-brand-magenta); }
.persona-card--teal   .persona-card__detail { background: var(--color-brand-teal-dark); }

/* Hijo directo del grid — necesita min-height:0 para colapsar a 0fr */
.persona-card__detail-inner {
  min-height: 0;
  overflow: hidden;
  padding: var(--space-6);
  color: #fff;
}

.persona-card__detail-inner h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.persona-card__tagline {
  font-weight: 700;
  font-size: var(--fs-body);
  margin-bottom: var(--space-4);
  line-height: 1.4;
}

.persona-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.persona-card__list li {
  font-size: var(--fs-sm);
  line-height: 1.4;
  padding-left: var(--space-5);
  position: relative;
}
.persona-card__list li::before {
  content: '•';
  position: absolute;
  left: 0;
  font-weight: 900;
}

/* ── Estado expandido ── */
.persona-card.is-expanded .persona-card__img-face  { opacity: 0; }
.persona-card.is-expanded .persona-card__img-hover { opacity: 1; }
.persona-card.is-expanded .persona-card__gradient  { opacity: 0; }
.persona-card.is-expanded .persona-card__label     { opacity: 0; pointer-events: none; }
.persona-card.is-expanded .persona-card__detail    { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; }

/* ── CTA ── */
.people__cta {
  text-align: center;
}

.people__accent-word {
  position: relative;
  display: inline-block;
}

.people__accent-word .section-title__underline {
  position: absolute;
  bottom: -1rem;
  left: -1rem;
  width: 12rem;
  height: auto;
  max-width: none;
  transform: none;
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE (<769px) — Figma node 3398:27723
   Abanico de 3 cartas superpuestas y rotadas (stack interactivo).
   Cada carta muestra su contenido completo siempre; el JS rota cuál
   queda al frente al tocar/deslizar. Sin interacción todavía se ve el
   abanico estático (nth-child), tal cual el mockup.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 48rem) {

  /* Padding superior: empuja el título/grid hacia abajo dentro de la sección.
     Así, al pinear el grid con 'center 60%', el borde superior de la sección
     queda más arriba (el blanco se extiende sobre el viewport) y tapa la franja
     morada de features que asomaba. También aporta aire arriba → más centrado. */
  .people {
    padding-top: clamp(4rem, 18vw, 8rem);
  }

  /* Sangrado lateral igual que .problem > .container: ~53.75px @430px, 96px @768px.
     Coincide con el left del título/tag en Figma (~57px). */
  .people > .container {
    padding-inline: clamp(2.5rem, 12.5vw, 6rem);
  }

  /* Título — Figma node 3398:27691: Sour Gummy 40px, line-height 40px (1.0).
     40px @430px = 9.3vw. El ancho de columna que crea el padding-inline fuerza
     los saltos exactos: "Pensada para / quienes hacen" (regular) →
     "posible el jardín / cada día." (bold). */
  .people .section-title {
    font-size: var(--fs-h2);
    line-height: 1;
    text-align: left;
  }

  /* Subrayado: vw para mantener la proporción con la palabra "jardín" en todo el rango mobile */
  .people__accent-word .section-title__underline {
    width: clamp(7rem, 31vw, 15.5rem);       /* 156px @ 430px */
    left: clamp(-1.6rem, -3.02vw, -0.8rem);     /* -13px @ 430px */
    bottom: clamp(-1.6rem, -1vw, 0.5rem);   /* -13px @ 430px */
  }

  /* --card-w vive en .people para que el stack (grid) Y las decoraciones
     compartan el mismo ancho de referencia. */
  /* Ancho de carta = proporción Figma (260/430 ≈ 60vw, afinado a 65vw) constante
     en TODO el rango mobile. Sin tope: el 21.5rem previo lo achicaba a 344px
     (44vw) en 768px; ahora sigue el 65vw (≈499px @768) → proporcional siempre.
     Solo piso (12rem) para pantallas < ~240px. */
  .people { --card-w: max(12rem, 65vw); }

  /* ── Decoraciones — Figma nodes 4440:28336 (teal) y 4440:28338 (sparkle) ──
     Posición y tamaño anclados a var(--card-w): así siguen al stack de cartas
     en vez de irse a los bordes del viewport cuando la carta topa en 21.5rem
     (>~529px). Sin esto se ven bien en 430px pero se alejan en 768px.
     teal: abajo-izquierda; sparkle: arriba-derecha del stack. */
  .people__deco-teal {
    left: calc(50% - 0.70 * var(--card-w));      /* ≈ borde izq. de la carta izquierda */
    top: auto;
    bottom: 9%;
    width: calc(var(--card-w) * 0.168);          /* ≈47px @430px */
    z-index: 2;                                   /* Figma: decos encima de las cartas */
  }
  .people__deco-sparkle {
    left: auto;
    right: calc(50% - 0.75 * var(--card-w));      /* ≈ borde der. de la carta derecha */
    /* ≈20px encima del tope del grid. El grid empieza tras el header, cuya altura
       la manda el título (9.3vw × 4 líneas ≈ 37vw) + tag + margen (≈9rem). Con vw
       sigue el tope de las cartas aunque estas crezcan, en vez de depender de la
       altura total de la sección (que se dispara con cartas más altas). */
    top: calc(37.2vw + 14rem);
    width: calc(var(--card-w) * 0.34);            /* ≈95px @430px */
    height: calc(var(--card-w) * 0.34);
    z-index: 2;
  }

  /* ── Contenedor del abanico ──
     Ancho de carta proporcional: 279px @ 430px (0.634 del ancho de la
     imagen 734×1158, que da la altura exacta de la carta). */
  .people__grid {
    /* --card-w se hereda de .people (arriba) */
    display: block;
    position: relative;
    /* la altura real la fija el JS (mide la carta más alta); este min-height
       es el fallback sin-JS para que el abanico no colapse */
    min-height: calc(var(--card-w) * 1.85);
    margin-bottom: var(--space-24);
  }

  /* ── Carta: centrada por margin, el transform queda libre para el abanico ──
     El borde de color YA viene en la imagen .1; sin borde ni sombra CSS. */
  .people__grid .persona-card {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--card-w);
    margin-left: calc(var(--card-w) / -2);
    opacity: 1;   /* el abanico mobile no usa el reveal de opacidad de .reveal */
    border: none;
    box-shadow: none;
    /* overflow:hidden + border-radius del desktop recortan el ::before a la
       forma redondeada de la imagen .1 (que ya trae borde y esquinas) */
    transform-origin: center center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }
  .people__grid .persona-card:hover { transform: none; }   /* anula el lift de desktop */

  /* Cycling disparado por scroll (pin en ui.js): sin transición. La transición
     de 0.5s de arriba es para tap/swipe (cambio discreto); en scroll compite
     con el movimiento continuo y se ve como un temblor. */
  .people__grid.people__grid--no-transition .persona-card { transition: none; }

  /* ── Posiciones del abanico (fallback sin-JS = mockup Figma) ──
     translateX en % del ancho de la carta, translateY en % del alto. */
  .people__grid .persona-card:nth-child(1) {          /* Directivos — centro/frente */
    transform: translate(0, 0) rotate(0deg);
    z-index: 3;
  }
  .people__grid .persona-card:nth-child(2) {          /* Profesores — derecha, atrás */
    transform: translate(35%, 9%) rotate(6.31deg);
    z-index: 1;
  }
  .people__grid .persona-card:nth-child(3) {          /* Papás y mamás — izquierda, atrás */
    transform: translate(-21%, -3%) rotate(-4.03deg);
    z-index: 2;
  }

  /* ── Slots controlados por JS (ganan por orden de fuente, misma specificity) ── */
  .people__grid .persona-card.is-front { transform: translate(0, 8%) rotate(0deg); }
  .people__grid .persona-card.is-right { transform: translate(15%, 17%) rotate(6.31deg); }
  .people__grid .persona-card.is-left  { transform: translate(-18%, -2%) rotate(-4.03deg); }

  /* ── Cycling FLUIDO atado al scroll (CSS scroll-driven animation) ──
     El scroll vertical rota las 3 cards por los slots, en el hilo compositor =
     fluido, sin el pin de GSAP (que temblaba). ui.js crea el wrapper .people__pin
     (alto), fija el grid sticky, y setea el animation-range (fase pineada, px de
     scroll). Requiere .people con overflow:clip (no hidden) para que el sticky
     funcione. Sin soporte / motion reducido: abanico estático (nth-child). */
  .people__pin { position: relative; }
  /* Bloque congelado: header + grid + cta + decos se pegan JUNTOS mientras las
     cards ciclan. */
  .people__sticky { position: sticky; z-index: 1; }

  /* Al pinear, ui.js mete las decos DENTRO del grid para que se congelen con el
     abanico (si no, se quedan en el flujo de la sección y "se suben" al ciclar).
     Reposición relativa al grid; el fallback estático (decos en la sección)
     conserva sus valores base de arriba. */
  /* El CTA ahora vive dentro del bloque pineado: se recortan los gaps (header→grid
     y grid→cta) para que header+grid+cta quepan en el viewport (si no, el bloque
     supera el alto y el CTA cae bajo el fold mientras está pineado). */
  .people__sticky .people__header { margin-bottom: var(--space-10); }
  /* margin-block (no solo -bottom): aire arriba y abajo del abanico dentro del
     bloque pineado. No afecta el ciclado — el animation-range lo fija ui.js sobre
     el scroll del pinWrap, independiente del margen del grid. */
  .people__grid--scrub { margin-block: var(--space-20); }

  .people__grid--scrub .people__deco-teal {
    left: calc(50% - 0.72 * var(--card-w));
    top: auto;
    bottom: calc(var(--card-w) * -0.05);
  }
  .people__grid--scrub .people__deco-sparkle {
    left: auto;
    right: calc(50% - 0.75 * var(--card-w));   /* un poco más a la derecha */
    top: calc(var(--card-w) * -0.10);          /* un poco más arriba */
    bottom: auto;
  }

  @supports (animation-timeline: scroll()) {
    .people__grid--scrub .persona-card {
      animation-timeline: scroll(root);
      animation-fill-mode: both;
      animation-timing-function: linear;
      transition: none;   /* el scroll manda la posición, sin transición de tiempo */
      /* animation-range (px de scroll) lo setea ui.js = la fase pineada exacta */
    }
    .people__grid--scrub .persona-card:nth-child(1) { animation-name: people-cycle-a; } /* Directivos: front→right→left */
    .people__grid--scrub .persona-card:nth-child(2) { animation-name: people-cycle-c; } /* Profesores: right→left→front */
    .people__grid--scrub .persona-card:nth-child(3) { animation-name: people-cycle-b; } /* Papás:     left→front→right */
  }

  /* opacity:1 en los keyframes: el valor animado le gana al opacity:0 inline que
     GSAP deja en las .reveal (no depende del orden de init ui/animations). */
  @keyframes people-cycle-a {
    0%   { transform: translate(0, 8%)     rotate(0deg);     z-index: 3; opacity: 1; }
    50%  { transform: translate(15%, 17%)  rotate(6.31deg);  z-index: 1; opacity: 1; }
    100% { transform: translate(-18%, -2%) rotate(-4.03deg); z-index: 2; opacity: 1; }
  }
  @keyframes people-cycle-b {
    0%   { transform: translate(-18%, -2%) rotate(-4.03deg); z-index: 2; opacity: 1; }
    50%  { transform: translate(0, 8%)     rotate(0deg);     z-index: 3; opacity: 1; }
    100% { transform: translate(15%, 17%)  rotate(6.31deg);  z-index: 1; opacity: 1; }
  }
  @keyframes people-cycle-c {
    0%   { transform: translate(15%, 17%)  rotate(6.31deg);  z-index: 1; opacity: 1; }
    50%  { transform: translate(-18%, -2%) rotate(-4.03deg); z-index: 2; opacity: 1; }
    100% { transform: translate(0, 8%)     rotate(0deg);     z-index: 3; opacity: 1; }
  }

  /* ── Internos de la carta en mobile ── */
  .people__grid .persona-card__gradient,
  .people__grid .persona-card__label,
  .people__grid .persona-card__img-face { display: none; }

  /* Imagen .1 (people_N.1) = card completa: borde de color + foto arriba +
     área para el panel abajo. En flujo, da la altura exacta de la carta. */
  .people__grid .persona-card__img-hover {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    object-fit: initial;
    opacity: 1;
    display: block;
  }

  /* Gradiente intenso siempre visible: funde la foto hacia el color del panel */
  .people__grid .persona-card::before { opacity: 1; }

  /* Panel de detalle: permanentemente expandido, inset y redondeado */
  .people__grid .persona-card__detail {
    grid-template-rows: 1fr;
    opacity: 1;
    pointer-events: none;                 /* el tap lo maneja la carta entera */
    left: calc(var(--card-w) * 0.072);
    right: calc(var(--card-w) * 0.072);
    bottom: calc(var(--card-w) * 0.072);
    border-radius: calc(var(--card-w) * 0.09);
  }
  /* Colores del panel según Figma mobile (tonos claros) */
  .people__grid .persona-card--purple .persona-card__detail { background: var(--color-brand-purple); }
  .people__grid .persona-card--pink   .persona-card__detail { background: var(--color-brand-pink); }
  .people__grid .persona-card--teal   .persona-card__detail { background: var(--color-brand-teal-dark); }

  /* ── Texto del panel — Figma node 3398:27696 (base 367px) ──
     Título 30px, tagline+ítems 18px, sin viñetas, blanco. */
  .people__grid .persona-card__detail-inner {
    padding: calc(var(--card-w) * 0.062);
    padding-top: calc(var(--card-w) * 0.08);   /* TX top 30px vs lados 23px */
  }
  .people__grid .persona-card__detail-inner h3 {
    font-size: max(0.95rem, calc(var(--card-w) * 0.082));   /* 30px @367 */
    line-height: 1;
    margin-bottom: calc(var(--card-w) * 0.044);             /* gap 16px @367 */
  }
  .people__grid .persona-card__tagline {
    font-size: max(0.75rem, calc(var(--card-w) * 0.049));   /* 18px @367, Poppins Bold */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: calc(var(--card-w) * 0.049);             /* ~una línea en blanco */
  }
  /* Sin viñetas: en Figma son líneas de texto separadas por un blanco */
  .people__grid .persona-card__list { gap: calc(var(--card-w) * 0.045); }
  .people__grid .persona-card__list li {
    font-size: max(0.75rem, calc(var(--card-w) * 0.049));   /* 18px @367, Poppins Medium */
    font-weight: 500;
    line-height: 1.2;
    padding-left: 0;
  }
  .people__grid .persona-card__list li::before { content: none; }

  /* CTA — el JS lo mueve fuera de la sección pineada (aparece al terminar el
     cycling). Al quedar como hermano posterior necesita su propio ritmo vertical. */
  .people__cta {
    padding-inline: clamp(2.5rem, 12.5vw, 6rem);
  }

  /* Botón del CTA — mismo tamaño que .features__cta--mobile .btn */
  .people__cta .btn {
    width: clamp(15rem, 67.2vw, 33rem);           /* 289px @ 430px */
    height: clamp(2.75rem, 12.1vw, 6rem);         /* 52px @ 430px */
    border-radius: clamp(1.375rem, 6.05vw, 3rem); /* 26px @ 430px */
    font-size: var(--fs-body);
    line-height: 1;
  }
}