/* Ajustes exclusivos de Portada institucional; no alteran páginas interiores. */

/* 1. Sección «Laboratorio en contexto» se diferencia de Colaboradores. */
body.page-institucional .home-news {
  background:#ffffff;
  border-top:1px solid #d6e2e8;
}
body.page-institucional .home-news .section-kicker {
  border-color:#cfdae0;
}

/* 2. Fichas de colaboradores: fotografía recta a la izquierda, redondeada a la derecha. */
body.page-institucional .collab-person {
  grid-template-columns:clamp(96px,8.2vw,120px) minmax(0,1fr);
  gap:clamp(13px,1.5vw,22px);
  min-height:155px;
  padding:0;
  align-items:stretch;
  overflow:hidden;
}
body.page-institucional .collab-person img {
  width:100%;
  height:100%;
  min-height:155px;
  object-fit:cover;
  object-position:center;
  border-radius:0 47px 47px 0;
  align-self:stretch;
  margin:0;
}
body.page-institucional .collab-person > div {
  min-width:0;
  align-self:center;
  padding:19px 14px 19px 0;
}

/* 3. Dejar solo los logos con alt descriptivos; no hay subtítulos visuales. */
body.page-institucional .collab-logo {
  min-height:142px;
  gap:0;
  padding:20px;
}
body.page-institucional .collab-logo img {height:95px;max-width:185px}
body.page-institucional .collaboration-logo-grid.national .collab-logo img {height:100px}

/* 4. Equipo: 3 por fila, tamaño intermedio, filas centradas. */
body.page-institucional .people-grid-uniform {
  --people-cols:3;
  --people-card-width:285px;
  --people-gap-x:clamp(30px, 3.2vw, 44px);
  --people-gap-y:clamp(32px, 3.4vw, 46px);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:var(--people-gap-y) var(--people-gap-x);
  width:100%;
  max-width:calc((var(--people-card-width) * var(--people-cols)) + (var(--people-gap-x) * (var(--people-cols) - 1)));
  margin-inline:auto;
}

/* Tarjeta base: mismos bordes que .collab-person */
body.page-institucional .people-card {
  display:flex;
  flex-direction:column;
  flex:0 1 var(--people-card-width);
  width:var(--people-card-width);
  max-width:100%;
  min-width:0;
  background:#fff;
  border:1px solid #d9e3e6;
  border-radius:0;
  overflow:hidden;
  box-shadow:none;
  transition:transform .22s ease, border-color .22s ease;
}
body.page-institucional .people-card:hover {
  transform:translateY(-3px);
  border-color:#b7c8cf;
}

/* Contenedor de imagen */
body.page-institucional .people-card__img {
  position:relative;
  overflow:hidden;
}
body.page-institucional .people-card__img img {
  width:100%;
  height:auto;
  aspect-ratio:3 / 3.6;
  object-fit:cover;
  object-position:center 18%;
  display:block;
  filter:saturate(.94);
  transition:filter .22s ease;
}
body.page-institucional .people-card:hover .people-card__img img {
  filter:saturate(1);
}

/* Cuerpo de la tarjeta */
body.page-institucional .people-card__body {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 15px 16px;
}
body.page-institucional .people-card__body strong {
  font:400 clamp(1.02rem, 1.3vw, 1.2rem)/1.25 var(--serif);
  letter-spacing:-.02em;
  color:#1a3a4a;
}
body.page-institucional .people-card__role {
  font:650 .8rem/1.35 var(--sans);
  color:var(--institutional-blue, #133448);
}
body.page-institucional .people-card__meta {
  font-size:.72rem;
  line-height:1.45;
  color:#5a7585;
  margin-top:1px;
  overflow-wrap:anywhere;
}

/* Responsive */
@media(prefers-reduced-motion:reduce) {
  body.page-institucional .people-card,
  body.page-institucional .people-card__img img {transition:none}
}
@media(max-width:860px) {
  body.page-institucional .people-grid-uniform {
    --people-cols:2;
    --people-card-width:250px;
    --people-gap-x:26px;
    --people-gap-y:28px;
  }
}
@media(max-width:640px) {
  body.page-institucional .people-grid-uniform {
    --people-cols:2;
    --people-card-width:min(170px, calc(50% - 7px));
    --people-gap-x:18px;
    --people-gap-y:20px;
    max-width:none;
  }
  body.page-institucional .people-card__body {padding:10px 10px 12px}
  body.page-institucional .people-card__body strong {font-size:.92rem}
  body.page-institucional .people-card__role {font-size:.7rem}
  body.page-institucional .people-card__meta {font-size:.62rem}
}
@media(max-width:400px) {
  body.page-institucional .people-grid-uniform {
    --people-cols:1;
    --people-card-width:min(260px, 100%);
    --people-gap-x:0;
    --people-gap-y:14px;
  }
}

/* 5. Dos ilustraciones de áreas, sin modificar los textos ya existentes. */
body.page-institucional .area-row-content {
  position:relative;
  min-width:0;
  padding-right:clamp(210px,25vw,300px);
}
body.page-institucional .area-art {
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:clamp(205px,23vw,280px);
  aspect-ratio:240/196;
  max-width:48%;
  margin:0;
  pointer-events:none;
}
body.page-institucional .area-art img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:transparent;
}

/* 6. Publicaciones: ilustración de artículo académico en el lugar de la flecha. */
body.page-institucional .publication-list > a {
  grid-template-columns:110px minmax(0,1fr) 56px;
}
body.page-institucional .pub-icon {
  width:54px;
  height:54px;
  display:flex;
  justify-content:center;
  align-items:center;
  align-self:center;
  border:1px solid #cfdee5;
  background:#f2f8fb;
  border-radius:12px;
  transition:background .16s ease,border-color .16s ease;
}
body.page-institucional .pub-icon img {
  width:34px;
  height:34px;
  display:block;
}
body.page-institucional .publication-list > a:hover .pub-icon,
body.page-institucional .publication-list > a:focus-visible .pub-icon {
  background:#e0eff5;
  border-color:#97c1d0;
}

@media(max-width:1200px) {
  body.page-institucional .area-row {
    grid-template-columns:62px minmax(0,1fr);
    gap:24px;
  }
  body.page-institucional .area-link {
    grid-column:2;
    justify-self:start;
  }
  body.page-institucional .area-row-content {padding-right:235px}
  body.page-institucional .area-art {width:220px}
}

@media(max-width:860px) {
  body.page-institucional .area-row-content {padding-right:185px}
  body.page-institucional .area-art {width:170px}
}

@media(max-width:640px) {
  body.page-institucional .collab-person {
    grid-template-columns:104px minmax(0,1fr);
    min-height:132px;
    gap:15px;
    padding:0;
  }
  body.page-institucional .collab-person img {
    height:100%;
    min-height:132px;
    border-radius:0 36px 36px 0;
  }
  body.page-institucional .collab-person > div {
    padding:12px 13px 12px 0;
  }
  body.page-institucional .collab-logo {min-height:138px;padding:14px}
  body.page-institucional .collab-logo img {height:85px}
  body.page-institucional .area-row-content {padding-right:0}
  body.page-institucional .area-art {
    position:static;
    transform:none;
    width:min(240px,85%);
    max-width:none;
    margin:21px 0 0;
  }
  body.page-institucional .publication-list > a {
    grid-template-columns:55px minmax(0,1fr) 48px;
    gap:12px;
  }
  body.page-institucional .pub-icon {width:46px;height:46px;border-radius:10px}
  body.page-institucional .pub-icon img {width:29px;height:29px}
}

@media(max-width:370px) {
  body.page-institucional .collab-person {grid-template-columns:92px minmax(0,1fr);gap:11px}
  body.page-institucional .collab-person img {min-height:138px}
  body.page-institucional .collab-person > div {padding-right:9px}
  body.page-institucional .collab-person h4 {font-size:1.08rem}
  body.page-institucional .collab-person p {font-size:.71rem}
  body.page-institucional .publication-list > a {grid-template-columns:47px minmax(0,1fr) 42px;gap:8px}
  body.page-institucional .pub-icon {width:40px;height:40px}
}

@media(prefers-reduced-motion:reduce) {
  body.page-institucional .pub-icon {transition:none}
}

/* Portada institucional: ilustraciones como marca de agua editorial detrás del contenido. */
body.page-institucional .area-row-content {
  isolation:isolate;
  padding-right:32px;
  overflow:hidden;
}
body.page-institucional .area-row-content > :not(.area-art) {
  position:relative;
  z-index:1;
}
body.page-institucional .area-art {
  position:absolute;
  z-index:-1;
  top:50%;
  right:-22px;
  transform:translateY(-50%);
  width:clamp(310px,37vw,510px);
  max-width:78%;
  aspect-ratio:240/196;
  margin:0;
  opacity:.19;
  pointer-events:none;
}
body.page-institucional .area-art img {width:100%;height:100%;object-fit:contain}
@media(max-width:860px) {
  body.page-institucional .area-art {width:clamp(260px,46vw,400px);max-width:82%;right:-24px;opacity:.15}
}
@media(max-width:640px) {
  body.page-institucional .area-row-content {padding-right:22px;min-height:245px}
  body.page-institucional .area-art {
    position:absolute;
    top:50%;right:-40px;
    transform:translateY(-50%);
    width:340px;max-width:95%;
    margin:0;opacity:.12;
  }
}

/* Alinear las marcas de agua con el extremo derecho de la columna introductoria. */
body.page-institucional .area-art {right:-78px}
@media(max-width:860px) {body.page-institucional .area-art {right:-65px}}
@media(max-width:640px) {body.page-institucional .area-art {right:-72px}}

/* CTA junto a la línea superior del contenido, sin franja inferior que tape el arte. */
body.page-institucional .area-row {position:relative}
body.page-institucional .area-link {
  position:absolute;
  top:clamp(235px,29vw,350px);
  right:0;
  z-index:3;
  width:auto;
  min-height:0;
  padding:13px 20px;
  gap:16px;
  border:0;
  border-left:1px solid #ccd6db;
  border-bottom:1px solid #ccd6db;
  background:#fff;
  font-size:.7rem;
}
body.page-institucional .area-row-content {overflow:visible;padding-top:58px}
body.page-institucional .area-art {
  right:0;
  width:clamp(330px,39vw,535px);
  max-width:92%;
  opacity:.22;
}
@media(max-width:860px) {
  body.page-institucional .area-art {right:0;width:410px;max-width:92%;opacity:.18}
}
@media(max-width:640px) {
  body.page-institucional .area-link {padding:11px 13px;font-size:.63rem}
  body.page-institucional .area-row-content {padding-top:60px}
  body.page-institucional .area-art {right:0;width:355px;max-width:100%;opacity:.14}
}

/* Corrección de posición: la línea divisoria real cambia según el breakpoint. */
body.page-institucional .area-link {top:clamp(235px,29vw,350px);margin:0}
body.page-institucional .area-art {right:-55px;max-width:100%;opacity:.27}
@media(max-width:1200px) {
  body.page-institucional .area-link {top:215px}
  body.page-institucional .area-art {right:-48px;max-width:100%}
}
@media(max-width:860px) {
  body.page-institucional .area-link {top:240px}
  body.page-institucional .area-art {right:-45px;opacity:.23}
}
@media(max-width:640px) {
  body.page-institucional .area-link {top:215px}
  body.page-institucional .area-art {right:-45px;opacity:.19}
}

/* Correct actual Portada institucional editorial grid */
body.page-institucional .area-row{position:relative;isolation:isolate;padding-top:85px;overflow:visible}
body.page-institucional .area-row-content{position:static;isolation:auto;padding:0;overflow:visible;min-height:0}
body.page-institucional .area-row-content>:not(.area-art){position:relative;z-index:2}
body.page-institucional .area-row>.area-link{position:absolute;top:0;right:0;z-index:4;width:auto;min-width:0;min-height:46px;margin:0;padding:12px 17px;border:1px solid #cad4da;border-top:0;background:#fff}
body.page-institucional .area-row .area-art{position:absolute;top:50%;right:0;transform:translateY(-50%);width:clamp(300px,36vw,490px);max-width:46%;opacity:.23;z-index:0;margin:0}
@media(max-width:860px){body.page-institucional .area-row .area-art{width:320px;max-width:54%;opacity:.18}}
@media(max-width:640px){body.page-institucional .area-row .area-art{width:260px;max-width:60%;opacity:.13}}

/* CTA del área anclado a la línea divisoria inferior de su propia fila. */
body.page-institucional .area-row {
  padding-top:47px;
  padding-bottom:76px;
}
body.page-institucional .area-row > .area-link {
  top:auto;
  bottom:0;
  right:0;
  border-top:1px solid #cad4da;
  border-bottom:0;
}
@media(max-width:1200px) {
  body.page-institucional .area-row {padding-bottom:72px}
}
@media(max-width:640px) {
  body.page-institucional .area-row {padding-top:32px;padding-bottom:68px}
}

/* Enlace editorial como «Conocer la línea», sin recuadro. */
body.page-institucional .area-row > a.area-link {
  top:auto;
  bottom:12px;
  right:0;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  width:max-content;
  min-width:0;
  min-height:46px;
  padding:0 0 5px;
  margin:0;
  gap:24px;
  border:0;
  border-bottom:1px solid var(--institutional-blue);
  border-radius:0;
  box-shadow:none;
  background:transparent;
  color:var(--institutional-blue);
  font-size:.86rem;
  font-weight:770;
  text-decoration:none;
  line-height:1.2;
}
body.page-institucional .area-row > a.area-link:hover,
body.page-institucional .area-row > a.area-link:focus-visible {
  border-bottom-color:#0e3448;
  color:#0e3448;
  background:transparent;
}
@media(max-width:640px) {
  body.page-institucional .area-row > a.area-link {bottom:10px;font-size:.78rem;min-height:44px;gap:14px}
}

/* Patrón de red neuronal exclusivamente en Conocimiento publicado. */
body.page-institucional .knowledge-section {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
body.page-institucional .knowledge-section::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url("../img/patrones/red-molecular-azul.svg");
  background-repeat:no-repeat;
  background-position:right center;
  background-size:min(95vw,1100px) auto;
  opacity:.62;
  pointer-events:none;
}
@media(max-width:640px) {
  body.page-institucional .knowledge-section::before {background-size:900px auto;opacity:.38}
}

/* Red molecular espejada: nace a la izquierda, asciende y se desvanece. */
body.page-institucional .people-preview {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
body.page-institucional .people-preview::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url("../img/patrones/red-molecular-azul.svg");
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:min(110vw,1250px) auto;
  transform:scaleX(-1);
  opacity:.51;
  -webkit-mask-image:linear-gradient(to top,#000 18%,rgba(0,0,0,.7) 52%,transparent 98%);
  mask-image:linear-gradient(to top,#000 18%,rgba(0,0,0,.7) 52%,transparent 98%);
  pointer-events:none;
}
@media(max-width:640px) {
  body.page-institucional .people-preview::before {
    background-size:1050px auto;
    opacity:.26;
  }
}

/* Software: un único SVG vectorial extendido; sin imagen repetida. */
body.page-institucional .software-showcase {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
body.page-institucional .software-showcase::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url("../img/patrones/red-molecular-software.svg");
  background-repeat:no-repeat;
  background-position:left top;
  background-size:1300px auto;
  opacity:.59;
  /* Desvanecer ANTES de la última fila: a la altura de Mapa Hospital de Curicó.
     La red ya tiene un degradado horizontal incorporado en el SVG. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 34%,rgba(0,0,0,.72) 47%,rgba(0,0,0,.2) 61%,transparent 70%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 34%,rgba(0,0,0,.72) 47%,rgba(0,0,0,.2) 61%,transparent 70%);
  pointer-events:none;
}
@media(max-width:930px) {
  body.page-institucional .software-showcase::before {opacity:.43}
}
@media(max-width:540px) {
  body.page-institucional .software-showcase::before {
    background-position:-240px top;
    opacity:.30;
  }
}

/* Investigación: red molecular única desde la derecha, con desvanecido final. */
body.page-institucional .research-editorial {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
body.page-institucional .research-editorial::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url("../img/patrones/red-molecular-software.svg");
  background-repeat:no-repeat;
  background-position:left top;
  background-size:1300px auto;
  transform:scaleX(-1);
  opacity:.38;
  /* El SVG ya se disipa lateralmente; aquí termina junto a la línea 03. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 54%,rgba(0,0,0,.8) 69%,rgba(0,0,0,.24) 83%,transparent 93%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 54%,rgba(0,0,0,.8) 69%,rgba(0,0,0,.24) 83%,transparent 93%);
  pointer-events:none;
}
@media(max-width:930px) {
  body.page-institucional .research-editorial::before {opacity:.29}
}
@media(max-width:590px) {
  body.page-institucional .research-editorial::before {
    background-position:-240px top;
    opacity:.2;
  }
}

/* Áreas: bifurcación dispersa desde el límite superior; tenue en el texto. */
body.page-institucional .areas-section {position:relative;isolation:isolate;overflow:hidden}
body.page-institucional .areas-section::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url("../img/patrones/red-molecular-areas.svg");
  background-repeat:no-repeat;
  background-position:center -95px;
  /* Adelanta el giro de las ramas hacia el rótulo Áreas del laboratorio. */
  background-size:100% auto;
  opacity:.37;
  /* Arriba visible; centro atenuado; ramas laterales discretas. */
  /* Desaparición gradual al terminar las dos ramas, sin un corte visible. */
  -webkit-mask-image:
    linear-gradient(to bottom,#000 0%,#000 49%,rgba(0,0,0,.72) 65%,rgba(0,0,0,.22) 79%,transparent 94%),
    linear-gradient(to right,#000 0%,rgba(0,0,0,.95) 13%,rgba(0,0,0,.16) 30%,rgba(0,0,0,.12) 70%,rgba(0,0,0,.95) 87%,#000 100%);
  mask-image:
    linear-gradient(to bottom,#000 0%,#000 49%,rgba(0,0,0,.72) 65%,rgba(0,0,0,.22) 79%,transparent 94%),
    linear-gradient(to right,#000 0%,rgba(0,0,0,.95) 13%,rgba(0,0,0,.16) 30%,rgba(0,0,0,.12) 70%,rgba(0,0,0,.95) 87%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  pointer-events:none;
}
@media(max-width:860px) {body.page-institucional .areas-section::before {opacity:.29}}
@media(max-width:640px) {body.page-institucional .areas-section::before {opacity:.2}}

@media(max-width:860px) {body.page-institucional .areas-section::before {background-position:center -62px}}
@media(max-width:640px) {body.page-institucional .areas-section::before {background-position:center -36px}}

/* Colaboradores: fondo molecular continuo desde la derecha. */
body.page-institucional .collaborations-section {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
body.page-institucional .collaborations-section::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url("../img/patrones/red-molecular-software.svg");
  background-repeat:no-repeat;
  background-position:left top;
  background-size:1300px auto;
  transform:scaleX(-1);
  opacity:.46;
  /* Red visible arriba y a la derecha; desaparece gradualmente al bajar. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 30%,rgba(0,0,0,.85) 52%,rgba(0,0,0,.33) 72%,transparent 87%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 30%,rgba(0,0,0,.85) 52%,rgba(0,0,0,.33) 72%,transparent 87%);
  pointer-events:none;
}
body.page-institucional .collaborations-section > .shell {
  position:relative;
  z-index:1;
}
@media(max-width:930px) {
  body.page-institucional .collaborations-section::before {opacity:.34}
}
@media(max-width:590px) {
  body.page-institucional .collaborations-section::before {
    background-position:-240px top;
    opacity:.24;
  }
}

/* Contexto: misma red de Áreas, invertida para crecer desde el borde inferior. */
body.page-institucional .home-news {position:relative;isolation:isolate;overflow:hidden}
body.page-institucional .home-news::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url("../img/patrones/red-molecular-areas.svg");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% auto;
  transform:scaleY(-1);
  opacity:.6;
  /* La máscara se invierte junto al SVG: red firme abajo, desaparición antes del encabezado. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 26%,rgba(0,0,0,.74) 43%,rgba(0,0,0,.22) 59%,transparent 72%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 26%,rgba(0,0,0,.74) 43%,rgba(0,0,0,.22) 59%,transparent 72%);
  pointer-events:none;
}
body.page-institucional .home-news > .shell {position:relative;z-index:1}
@media(max-width:860px) {
  body.page-institucional .home-news::before {background-size:900px auto;opacity:.52}
}
@media(max-width:590px) {
  body.page-institucional .home-news::before {background-size:740px auto;opacity:.45}
}

/* Auditoría responsive — área útil de los enlaces, sin alterar su diseño editorial. */
body.page-institucional .research-detail a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:7px 0 5px;
}
body.page-institucional .software-card h3 a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:5px 0;
}
body.page-institucional .footer-links a {
  padding-inline:7px;
  margin-inline:-7px;
}
/* El año ocupa su propia fila en móvil: no estrangular el título académico. */
@media(max-width:590px) {
  body.page-institucional .publication-list > a {
    grid-template-columns:minmax(0,1fr) 48px;
    gap:11px 12px;
    min-height:0;
    padding:24px 0;
  }
  body.page-institucional .publication-list .pub-year {grid-column:1 / -1}
  body.page-institucional .publication-list .pub-entry {grid-column:1;min-width:0}
  body.page-institucional .publication-list .pub-icon {grid-column:2;align-self:start}
  body.page-institucional .publication-list .pub-entry strong {overflow-wrap:break-word}
}