/* =====================================================================
 * PÁGINAS INSTITUCIONALES (Quiénes somos, Servicios…)
 * Lectura cómoda en una columna, con las fotos saliéndose del texto.
 * ===================================================================== */

.cr-inst{padding-bottom:20px}

/* ---------- Portada ---------- */
.cr-inst-hero{
  position:relative;
  min-height:clamp(300px,42vw,460px);
  display:flex;align-items:flex-end;
  overflow:hidden;
  /* Sin foto, la portada sigue teniendo cuerpo: degradado de marca. */
  background:
    radial-gradient(120% 90% at 15% 0%, #1B4272 0%, transparent 60%),
    radial-gradient(100% 80% at 85% 20%, #16365E 0%, transparent 65%),
    var(--bar);
}
.cr-inst-hero img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.cr-inst-hero.tiene-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgb(8 20 40/.30) 0%,
    rgb(8 20 40/.55) 55%,
    rgb(8 20 40/.88) 100%);
}
.cr-inst-hero-tx{position:relative;z-index:2;padding:0 0 clamp(26px,4vw,46px)}
.cr-inst-hero-tx .eyebrow{
  font-size:.66rem;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:#A9C2DC;margin:0 0 12px;
}
.cr-inst-hero-tx h1{
  font-size:clamp(2.2rem,5.4vw,3.6rem);line-height:1.02;color:#fff;
  max-width:18ch;
}

/* ---------- Cuerpo ---------- */
.cr-inst-body{padding-top:clamp(38px,5vw,64px)}

.cr-inst-h{
  font-size:var(--step-3);color:var(--ink);
  max-width:68ch;margin:52px auto 18px;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.cr-inst-h:first-child{margin-top:0}

.cr-prosa{
  max-width:68ch;margin-inline:auto;
  line-height:1.78;color:var(--ink-2);font-size:var(--step-1);
}
.cr-prosa p{margin:0 0 18px}
.cr-prosa strong{color:var(--ink)}
.cr-prosa a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}

/* ---------- Fotos ---------- */
.cr-inst-foto{
  margin:34px auto;max-width:min(880px,100%);
  border-radius:var(--r-l);overflow:hidden;
  background:var(--ground-2);
  box-shadow:0 4px 12px rgb(var(--shadow)/var(--shadow-b)),
             0 26px 54px -24px rgb(var(--shadow)/var(--shadow-a));
}
.cr-inst-foto img{width:100%;height:auto;display:block}

/* En pantallas anchas las fotos se salen del ancho del texto, alternando lado */
@media(min-width:1080px){
  .cr-inst-foto{max-width:none;width:min(560px,46%)}
  .cr-inst-foto.izq{float:left;margin:12px 44px 30px 0;shape-margin:44px}
  .cr-inst-foto.der{float:right;margin:12px 0 30px 44px}
  .cr-inst-h,.cr-prosa{margin-inline:0;max-width:62ch}
  .cr-inst-body::after{content:"";display:block;clear:both}
}

/* ---------- Valores ---------- */
.cr-valores{
  clear:both;
  display:grid;gap:2px;margin:44px 0;
  grid-template-columns:1fr;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--r-l);overflow:hidden;
}
@media(min-width:720px){
  .cr-valores{grid-template-columns:1fr 1fr}
  /* Si el número de valores es impar, el último ocupa toda la fila en vez
     de dejar una celda vacía. */
  .cr-valor:last-child:nth-child(odd){grid-column:1 / -1}
}
.cr-valor{
  background:var(--surface);padding:24px 22px;
  display:flex;gap:14px;align-items:flex-start;
}
.cr-valor svg{flex:none;color:var(--accent);margin-top:3px}
.cr-valor h3{font-size:var(--step-2);margin:0 0 6px;color:var(--ink)}
.cr-valor p{margin:0;color:var(--ink-2);line-height:1.7;font-size:var(--step-0)}

/* ---------- Llamada final ---------- */
.cr-inst-cta{
  clear:both;
  margin:60px 0 0;padding:clamp(28px,4vw,46px);
  background:var(--bar);color:var(--bar-ink);
  border-radius:var(--r-l);text-align:center;
}
.cr-inst-cta h2{font-size:var(--step-3);margin:0 0 8px;color:var(--bar-ink)}
.cr-inst-cta p{margin:0 auto 22px;max-width:46ch;color:var(--bar-ink-2);line-height:1.7}
.cr-inst-cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cr-inst-cta .cr-btn--ghost{
  background:transparent;border-color:var(--bar-line);color:var(--bar-ink);
}
.cr-inst-cta .cr-btn--ghost:hover{border-color:var(--bar-ink-2)}