/* gente.css · v8 · constructor 2 · #gente: La Ladera de noche, una estrella por persona, y las citas.
   Solo selectores que empiezan por #gente. Los componentes compartidos (.escena, .kicker, .lead,
   .globo, .oso-en, [data-entra]) viven en base.css y aquí no se redefinen. */

/* ── el cielo: cubre el 70 % superior de la escena; las estrellas solo se ponen sobre el cielo de
      la lámina (cielo.js sabe dónde termina). pan-y: el dedo sigue haciendo scroll vertical. ── */
#gente .cielo{position:absolute;left:0;top:0;width:100%;height:70%;z-index:1;overflow:hidden;
  touch-action:pan-y;outline:none;transform-origin:50% 80%}
#gente .cielo:focus-visible{box-shadow:inset 0 0 0 2px var(--accion)}
#gente .cielo canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#gente .cielo-capa{animation:gente-titila 4s ease-in-out infinite}
#gente .cielo-capa:nth-child(2){animation-delay:-1.33s}
#gente .cielo-capa:nth-child(3){animation-delay:-2.67s}
@keyframes gente-titila{0%,100%{opacity:.55}50%{opacity:1}}

/* Sin JS (o antes de que arranque): un cielo de puntos en CSS, sin un solo nodo. El módulo lo apaga. */
#gente .cielo::before{content:'';position:absolute;inset:0 0 34% 0;opacity:.7;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 26%,rgba(247,241,230,.85) 50%,transparent 60%),
    radial-gradient(1.5px 1.5px at 48% 62%,rgba(247,241,230,.7) 50%,transparent 60%),
    radial-gradient(2px 2px at 80% 18%,rgba(245,210,140,.9) 50%,transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 82%,rgba(247,241,230,.6) 50%,transparent 60%),
    radial-gradient(1.5px 1.5px at 66% 40%,rgba(247,241,230,.8) 50%,transparent 60%);
  background-size:150px 110px,210px 140px,290px 190px,120px 90px,180px 130px;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
#gente .cielo.listo::before{display:none}

/* Parallax honesto: el cielo se acerca un 3 % mientras la escena cruza la pantalla. Solo donde el
   navegador sabe hacerlo sin JS; en Firefox no pasa nada. */
@supports (animation-timeline: view()){
  #gente .cielo{animation:gente-acerca linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes gente-acerca{from{transform:scale(1)}to{transform:scale(1.03)}}
}

/* ── el globo de una estrella que habla: la caja la posiciona cielo.js; el .globo es el de base ── */
#gente .cielo-globo{position:absolute;left:0;top:0;z-index:4;pointer-events:none;
  width:max-content;max-width:min(36ch,calc(100% - 16px));display:none}
#gente .cielo-globo.abierto{display:block}
#gente .estrella-texto{display:block}
#gente .estrella-rotulo{display:block;margin-top:8px;font:500 11px/1.3 var(--f-titulo);
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2)}

/* ── el texto de la escena ── */
#gente .escena h3 span{color:var(--mundo-luz);font-variant-numeric:tabular-nums}
#gente .pista{margin:0;font-size:14px;color:#B9C7CD;max-width:46ch}

/* ── las citas: tarjetas Superficie, grilla en escritorio, riel en teléfono ── */
#gente .citas{display:grid;gap:16px;list-style:none;margin:0;padding:0}
#gente .cita{margin:0;padding:22px 22px 18px;background:var(--superficie);border-radius:20px;
  border:1px solid rgba(143,163,173,.2);transition:border-color .2s var(--cromo)}
#gente .cita:hover{border-color:rgba(143,163,173,.45)}
#gente .cita blockquote{margin:0 0 12px;font-size:17px;line-height:1.5}
#gente .cita blockquote::before{content:'\201C';display:block;font-family:var(--f-titulo);font-size:44px;
  line-height:.6;color:var(--tinta-2);opacity:.5;margin-bottom:8px}
#gente .cita.deaurora{border-color:rgba(127,227,220,.22)}
#gente .cita.deaurora blockquote::before{color:var(--aurora);opacity:.6}
#gente .quien{margin:0;font-size:13px;color:var(--tinta-2)}
#gente .bloque{margin-top:40px}
#gente .bloque h3{font-size:1.3rem;margin:32px 0 6px}
#gente .bloque .lead{margin-bottom:16px}
#gente .mas{margin-top:20px}
#gente .mas summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;border-radius:999px;border:1px solid var(--marco);font:500 14px/1 var(--f-titulo);color:var(--tinta)}
#gente .mas summary::-webkit-details-marker{display:none}
#gente .mas summary::after{content:'+';font-size:18px;line-height:1;color:var(--tinta-2)}
#gente .mas[open] summary::after{content:'\2013'}
#gente .mas[open] summary{margin-bottom:16px}
#gente .como{margin:20px 0 0;font-size:14px;color:var(--tinta-2);opacity:.85;max-width:44ch}

@media(min-width:721px){#gente .citas{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1001px){#gente .citas{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){
  /* riel: 78 vw por tarjeta, una a la vez, a sangre por los canales del .wrap */
  #gente .citas{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    margin:0 calc(-1 * var(--canal,24px));padding:4px var(--canal,24px) 12px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  #gente .citas::-webkit-scrollbar{display:none}
  #gente .citas>li{flex:0 0 78vw;scroll-snap-align:center}
  #gente .cita blockquote{font-size:16px}
}

@media(prefers-reduced-motion:reduce){
  #gente .cielo,#gente .cielo-capa{animation:none!important;transform:none}
  #gente .cielo-capa{opacity:.8}
}