/*
 * /nosotros. Referencia visual: docs/prompts/2026-10-19-nosotros-prototipo.html.
 * Usa la base .lp de sitio.css (tokens, .band, .head2, .btn, .link, .muro,
 * .filtros) y todo lo propio va bajo .ns con prefijo ns-.
 */

.ns .ns-card { border: 1px solid var(--ink-3); border-radius: 20px; background: linear-gradient(180deg, rgba(42,29,87,.5), rgba(29,18,64,.4)); padding: 24px; min-width: 0; }
.ns .ns-muted { color: var(--muted); }
.ns .ns-lbl { font: 700 .72rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }

/* Encabezados de las secciones internas (como en /transparencia). */
.ns .ns-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.ns .ns-head--sin { margin-bottom: 0; }
.ns .ns-head h2 { font-size: clamp(1.5rem, 3.2vw, 2.4rem); max-width: 80%; }
.ns .ns-head p { color: var(--muted); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* Misión */
.ns .ns-mision { margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.ns .ns-mision blockquote { margin: 0; font: 700 clamp(1.3rem, 2.4vw, 1.9rem)/1.25 var(--f-display); }
.ns .ns-mision blockquote em { font-style: normal; color: var(--gold); }
.ns .ns-mision blockquote b { color: var(--cyan); font-weight: 700; }
.ns .ns-mision p { color: var(--muted); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* Línea de tiempo: horizontal; en móvil, vertical. */
.ns .ns-tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; }
.ns .ns-tl::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: linear-gradient(90deg, var(--violet), var(--cyan), var(--ink-3)); }
.ns .ns-tl li { position: relative; padding-top: 42px; }
.ns .ns-tl li::before { content: ""; position: absolute; top: 6px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: 3px solid var(--c, var(--cyan)); }
.ns .ns-tl li.ns-next::before { border-style: dashed; border-color: var(--gold); }
.ns .ns-yr { display: block; font: 800 1.5rem var(--f-display); color: var(--c, var(--cyan)); }
.ns .ns-tl h3 { font-size: 1rem; margin: 6px 0; }
.ns .ns-tl p { font-size: .88rem; color: var(--muted); }

/* Principios */
.ns .ns-pr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ns .ns-pr b { display: block; font: 700 1.02rem var(--f-display); margin: 10px 0 8px; }
.ns .ns-pr p { font-size: .88rem; color: var(--muted); }
.ns .ns-pr svg { width: 26px; height: 26px; stroke: var(--cyan); fill: none; stroke-width: 1.8; }

/* Equipo: foto recortada a 4:5; sin foto, iniciales. */
.ns .ns-team { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ns .ns-dir { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: start; }
.ns .ns-foto { margin: 0; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; border: 1px solid var(--ink-3); background: var(--ink-2); }
.ns .ns-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ns .ns-foto--ini { display: grid; place-items: center; background: linear-gradient(135deg, var(--violet-deep), var(--violet) 55%, var(--cyan)); border-color: transparent; }
.ns .ns-foto--ini span { font: 800 2.6rem var(--f-display); color: #fff; letter-spacing: .02em; }
.ns .ns-dir h3 { font-size: 1.25rem; }
.ns .ns-role { color: var(--cyan); font-weight: 700; margin: 4px 0 14px; }
.ns .ns-dir p { color: var(--muted); margin-bottom: 10px; }
.ns .ns-dir p.ns-q { color: var(--fg); font-style: italic; }

/* Egresados */
.ns .ns-eg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.ns .ns-eg .ns-card p { color: var(--muted); }
.ns .ns-eg .ns-card b { color: var(--fg); }
.ns .ns-egs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ns .ns-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ns .ns-btns--centro { justify-content: center; margin-top: 24px; }

/* Llamado final */
.ns .ns-final { text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.ns .ns-final h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); max-width: 820px; }
.ns .ns-final .ns-btns--centro { margin-top: 0; }

@media (max-width: 1000px) {
  .ns .ns-pr { grid-template-columns: 1fr 1fr; }
  .ns .ns-egs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .ns .ns-mision, .ns .ns-team, .ns .ns-eg { grid-template-columns: 1fr; }
  .ns .ns-tl { grid-template-columns: 1fr; padding-left: 34px; }
  .ns .ns-tl::before { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--violet), var(--cyan), var(--ink-3)); }
  .ns .ns-tl li { padding-top: 0; }
  .ns .ns-tl li::before { left: -34px; top: 4px; }
}
@media (max-width: 820px) {
  .ns .ns-head h2 { max-width: none; }
  .ns .ns-head p, .ns .ns-mision p { text-align: left; }
}
@media (max-width: 560px) {
  .ns .ns-pr, .ns .ns-egs { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ns .ns-dir { grid-template-columns: 1fr; }
  .ns .ns-foto { max-width: 220px; }
}