/* ============================================================
   /nosotros: composiciones propias de la página.
   Los componentes (hero, secciones, tarjetas, línea, estados) vienen de v2-system.css;
   acá solo va lo que no se repite en otras páginas.
   ============================================================ */

/* El body crema y sin grano: la página arranca directo en el hero */
body.v2-sistema { background: var(--v2-crema); }


/* --- Hero: la foto del equipo es vertical, así que se acota el alto para que no empuje el pliegue --- */
.nos-hero__foto { margin: 0; justify-self: center; width: min(100%, 360px); }
.nos-hero__foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  object-position: center 60%; border-radius: var(--v2-radio-lg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.nos-hero__foto figcaption { margin-top: .75rem; font-size: var(--v2-fs-small); color: var(--v2-tinta-3); }
/* En mobile la foto va recortada a apaisada: el mensaje y los CTA tienen que entrar primero */
@media (max-width: 899px) {
  .nos-hero__foto { width: 100%; }
  .nos-hero__foto img { aspect-ratio: 4 / 3; object-position: center 62%; }
}

/* --- Línea de tiempo: la fecha arriba de cada hito, y el halo del punto del color de la banda alterna --- */
.nos-fecha { margin: 0 0 .35rem !important; font-size: var(--v2-fs-small); font-weight: 600; letter-spacing: .02em;
  color: var(--v2-tinta-3); }
.v2-seccion--alt .v2-linea__item::after { box-shadow: 0 0 0 4px var(--v2-superficie-alt); }
.nos-linea a { color: var(--v2-violeta-texto); overflow-wrap: anywhere; }

/* --- Taller: una foto ancha y una vertical; en mobile, apiladas --- */
.nos-taller { display: grid; gap: 1.25rem; margin-bottom: var(--v2-espacio-bloque); }
@media (min-width: 760px) { .nos-taller { grid-template-columns: 2fr 1fr; align-items: stretch; } }
.nos-taller__foto { margin: 0; display: flex; flex-direction: column; }
.nos-taller__foto img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover;
  border-radius: var(--v2-radio-lg); aspect-ratio: 16 / 9; }
@media (min-width: 760px) { .nos-taller__foto img { aspect-ratio: auto; max-height: 460px; } }
@media (max-width: 759px) { .nos-taller__foto:not(.nos-taller__foto--ancha) img { aspect-ratio: 4 / 5; object-position: center 40%; } }
.nos-taller__foto figcaption { margin-top: .6rem; font-size: var(--v2-fs-small); color: var(--v2-tinta-3); }

/* --- Equipo --- */
.nos-equipo { list-style: none; margin: 0 0 var(--v2-espacio-bloque); padding: 0; display: grid; gap: 1.5rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
/* En mobile, dos por fila: cuatro fotos cuadradas apiladas ocupaban dos pantallas */
@media (max-width: 559px) { .nos-equipo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .75rem; }
  .nos-persona__foto { padding: .5rem; font-size: .8rem; border-radius: var(--v2-radio-md); }
  .nos-persona .v2-h3 { font-size: 1rem; } }
.nos-persona__foto { display: grid; place-items: center; padding: 1rem; text-align: center; aspect-ratio: 1;
  margin-bottom: 1rem; border-radius: var(--v2-radio-lg); background: var(--v2-violeta-50);
  border: 1px dashed var(--v2-violeta-200); }
.nos-persona .v2-h3 { margin-bottom: .2rem; }
.nos-persona p { margin: 0; color: var(--v2-tinta-3); }

.nos-disciplinas { margin: 0 0 var(--v2-espacio-bloque); display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); border-top: 1px solid var(--v2-borde-fuerte); }
.nos-disciplinas > div { padding: 1rem 1.25rem 1rem 0; border-bottom: 1px solid var(--v2-borde); }
.nos-disciplinas dt { font-weight: 600; color: var(--v2-tinta); margin-bottom: .25rem; }
.nos-disciplinas dd { margin: 0; }

/* --- Prensa: lista de links, cada nota es un renglón clickeable entero --- */
.nos-prensa { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--v2-borde-fuerte); max-width: 900px; }
.nos-prensa li { border-bottom: 1px solid var(--v2-borde-fuerte); }
.nos-prensa a { display: grid; gap: .3rem; padding: 1.1rem 2rem 1.1rem 0; position: relative; text-decoration: none; color: inherit; }
.nos-prensa a::after { content: "↗"; position: absolute; right: .25rem; top: 1.1rem; color: var(--v2-violeta-texto);
  transition: transform var(--v2-dur) var(--v2-ease); }
.nos-prensa a:hover::after { transform: translate(2px, -2px); }
.nos-prensa a:hover .nos-prensa__titulo { color: var(--v2-violeta-texto); }
.nos-prensa__medio { font-size: var(--v2-fs-eyebrow); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v2-tinta-3); }
.nos-prensa__titulo { font-family: var(--v2-font-accent); font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  line-height: 1.3; color: var(--v2-tinta); transition: color var(--v2-dur) var(--v2-ease); }

/* --- Logos institucionales: gris al 60 % y a color en el hover --- */
.nos-logos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 1rem; align-items: center;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.nos-logos li { display: grid; place-items: center; }
.nos-logos img { width: 100%; max-width: 150px; height: auto; max-height: 72px; object-fit: contain;
  filter: grayscale(1); opacity: .6; transition: filter var(--v2-dur) var(--v2-ease), opacity var(--v2-dur) var(--v2-ease); }
.nos-logos li:hover img { filter: none; opacity: 1; }

/* --- Cierre --- */
.nos-cierre__lede { color: rgba(255, 255, 255, .8); }
.nos-cierre__acciones { justify-content: center; margin-top: 0; }

/* Sin fotos individuales: las iniciales en el círculo, con el violeta de la marca */
.nos-persona__foto--iniciales {
    display: grid;
    place-items: center;
    font: 400 1.6rem/1 var(--v2-font-accent);
    letter-spacing: .02em;
    color: var(--v2-violeta-texto);
    background: var(--v2-violeta-50);
}

/* Equipo en 3 × 2: cada persona en una fila, con las iniciales en un círculo
   chico al lado del nombre (sin fotos individuales, un recuadro grande vacío
   pesaba más que la persona) */
.nos-equipo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 859px) { .nos-equipo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .nos-equipo { grid-template-columns: minmax(0, 1fr); } }
.nos-persona {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 1rem;
    align-items: center;
    padding: 1.1rem 1.25rem;
    background: var(--v2-superficie);
    border: 1px solid var(--v2-borde);
    border-radius: var(--v2-radio-md);
}
.nos-persona .nos-persona__foto--iniciales {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    padding: 0;
    aspect-ratio: auto;
    border: 0;
    border-radius: 50%;
    font-size: 1.15rem;
}
.nos-persona .v2-h3 { margin: 0; font-size: 1.02rem; align-self: end; }
.nos-persona p { align-self: start; font-size: .88rem; }