/* ============================================================
   DIMA · Portada v2 (prototipo local, rama feat/portada-v2)
   Paleta y tokens tomados del encargo (dima-styles.css / unal.css).
   Bootstrap 5 (CSS) para retícula/responsive; JS propio mínimo.
   ============================================================ */

/* ---------- Tipografía Ancízar (oficial UNAL, self-hosted) ---------- */
@font-face{font-family:"Ancizar Sans";src:url("../fonts/ancizar_sans-light-webfont.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Ancizar Sans";src:url("../fonts/ancizar_sans-regular-webfont.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Ancizar Sans";src:url("../fonts/ancizar_sans-bold-webfont.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Ancizar Sans";src:url("../fonts/ancizar_sans-extrabold-webfont.ttf") format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:"Ancizar Serif";src:url("../fonts/ancizar_serif-regular-webfont.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Ancizar Serif";src:url("../fonts/ancizar_serif-semibold-webfont.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Ancizar Serif";src:url("../fonts/ancizar_serif-bold-webfont.ttf") format("truetype");font-weight:700;font-display:swap}

/* ---------- Base de tipografía ----------
   La plantilla oficial UNAL fija el root (html) en 14px, pero todo el
   cuerpo nuevo (.detalle) está diseñado para 16px, por eso se veía pequeño.
   Subimos el root a 16px: el encabezado y el pie oficiales usan px, así que
   NO se afectan (verificado); solo escala el contenido a su tamaño correcto. */
html{font-size:16px}

/* ---------- Tokens de color (paleta del encargo) ---------- */
:root{
  --dima-navy:#1b2242;         /* barras, botones, texto de enlaces */
  --dima-verde:#94b43b;        /* verde UNAL: SOLO bordes y detalles */
  --dima-verde-texto:#4d6a12;  /* verde oscuro para texto (6.2:1) */
  --dima-verde-claro:#b9cd83;
  --dima-fondo-azul:#f0f6ff;
  --dima-gris-fondo:#f1f1f1;
  --dima-texto:#212529;
  --dima-gris:#83878d;         /* solo texto ≥24px o decorativo */
  --dima-serif:"Ancizar Serif","Times New Roman",serif;
  --dima-sans:"Ancizar Sans",system-ui,-apple-system,Segoe UI,sans-serif;
}

/* Scoped al contenido (.detalle) para NO alterar el header/footer oficial UNAL */
.detalle{font-family:var(--dima-sans);color:var(--dima-texto)}
.detalle h1,.detalle h2,.detalle h3,.serif{font-family:var(--dima-serif)}
/* La plantilla (dima-styles) centra los <p> de .detalle; todas las secciones
   propias se alinean a la izquierda. Cifras y Explora usan spans/.text-center. */
main.detalle .container p{text-align:left}
.detalle a{color:var(--dima-navy)}
/* Botones de fondo navy: texto blanco (gana a la regla .detalle a de arriba) */
.detalle .btn-primario,.detalle .conv-cta{color:#fff}

/* Accesibilidad: saltar al contenido + foco visible */
.skip-link{position:absolute;left:-999px;top:0;z-index:1000;background:var(--dima-navy);color:#fff;padding:.6rem 1rem;border-radius:0 0 6px 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--dima-verde);outline-offset:2px}

/* ============================================================
   Franjas de ancho completo (fix de plantilla)
   dima-styles.css fija .container a width:500px;height:300px;left:-369px
   y la plantilla da a .detalle una columna con margen/relleno. Eso
   rompía hero/cifras/tarjetas (angostas, cortadas, huecos). Anulamos
   SOLO para el cuerpo de la portada; header y pie oficiales intactos.
   ============================================================ */
main.detalle{margin:0;padding:0;max-width:none;width:100%}
.detalle section>.container{
  position:static;width:auto;max-width:1140px;height:auto;
  margin:0 auto;padding:0 1.5rem;left:auto!important
}

/* ============================================================
   SECCIÓN 2 — Barra institucional (navy)
   ============================================================ */
.barra-inst{background:var(--dima-navy);color:#e8ebf2;font-size:.85rem}
.barra-inst a{color:#e8ebf2;text-decoration:none}
.barra-inst a:hover{color:#fff;text-decoration:underline}
.barra-inst .bi-logo{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:#fff}
.barra-inst .logo-ph{display:inline-grid;place-items:center;min-width:38px;height:26px;border:1px dashed #6b73a0;border-radius:4px;font-size:.68rem;color:#aeb6d6}
.barra-inst .sep{color:#5b638f}
.barra-inst .idioma a[aria-current="true"]{font-weight:700;color:#fff}

/* ============================================================
   SECCIÓN 3 — Encabezado (blanco, borde inferior verde 4px) + menú
   ============================================================ */
.cab{background:#fff;border-bottom:4px solid var(--dima-verde)}
.cab .marca{line-height:1.1}
.cab .marca .sede{display:block;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--dima-verde-texto);font-weight:700}
.cab .marca .dima{display:block;font-family:var(--dima-serif);font-size:1.5rem;font-weight:700;color:var(--dima-navy)}
.menu-top{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}
.menu-top a{color:var(--dima-navy);text-decoration:none;font-weight:700;padding:.5rem .8rem;border-radius:6px;font-size:.98rem}
.menu-top a:hover,.menu-top a[aria-current="page"]{background:var(--dima-fondo-azul)}
.btn-buscar{background:var(--dima-navy);color:#fff;border:0;width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;font-size:1.05rem}
.btn-buscar:hover{background:#2a3566}
.menu-toggle{background:#fff;border:1px solid var(--dima-navy);color:var(--dima-navy);border-radius:8px;padding:.5rem .8rem;font-weight:700}

@media(max-width:991px){
  .menu-top{display:none;width:100%;flex-direction:column;align-items:stretch;padding-top:.6rem}
  .menu-top.abierto{display:flex}
  .menu-top a{padding:.7rem .6rem;border-top:1px solid var(--dima-gris-fondo);border-radius:0}
}
@media(min-width:992px){.menu-toggle{display:none}}

/* Escudo UNAL (SVG blanco) directo sobre la barra navy */
.escudo-unal{height:30px;width:auto;display:block}

/* ============================================================
   SECCIÓN 4 — HERO
   ============================================================ */
.hero{background:var(--dima-fondo-azul);padding:3rem 0}
.antetitulo{text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;font-weight:700;color:var(--dima-verde-texto);margin:0 0 .6rem}
.hero-h1{font-family:var(--dima-serif);font-weight:700;font-size:clamp(2rem,4.5vw,3.1rem);line-height:1.08;color:var(--dima-navy);margin:0 0 1rem}
.hero-mision{font-size:1.1rem;line-height:1.5;color:var(--dima-texto);margin:0 0 1.5rem;max-width:34em}
.btn-primario{display:inline-block;background:var(--dima-navy);color:#fff;text-decoration:none;font-weight:700;padding:.8rem 1.5rem;border-radius:8px}
.btn-primario:hover{background:#2a3566;color:#fff}
.hero-foto{margin:0}
.foto-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;aspect-ratio:4/3;background:#dfe7f5;border:2px dashed #9fb0d6;border-radius:12px;color:#6b79a3;font-weight:700}
.foto-ph .bi{font-size:2.6rem}
.hero-credito{font-size:.8rem;color:var(--dima-gris);margin-top:.4rem}

.sec-h2{font-family:var(--dima-serif);font-weight:700;font-size:clamp(1.5rem,3vw,2rem);color:var(--dima-navy);margin:0 0 1.4rem}

/* ============================================================
   SECCIÓN 5 — ¿Qué necesitas hoy?
   ============================================================ */
.necesitas{padding:3rem 0}
.tarjeta-nec{height:100%;background:#fff;border:1px solid var(--dima-gris-fondo);border-top:4px solid var(--dima-verde);border-radius:10px;padding:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.tarjeta-nec h3{font-family:var(--dima-serif);font-size:1.25rem;color:var(--dima-navy);margin:0 0 .5rem}
.tarjeta-nec p{color:var(--dima-texto);margin:0 0 1rem}
.tarjeta-nec a{color:var(--dima-navy);font-weight:700;text-decoration:none}
.tarjeta-nec a:hover{text-decoration:underline}

/* ============================================================
   SECCIÓN 6 — Cifras (fondo navy)
   ============================================================ */
.cifras{background:var(--dima-navy);color:#fff;padding:2.5rem 0}
.cifras .n{display:block;font-family:var(--dima-serif);font-weight:700;font-size:2.6rem;line-height:1;color:#fff}
.cifras .l{display:block;font-size:.95rem;color:var(--dima-verde-claro);margin-top:.4rem}

/* ============================================================
   SECCIÓN 6b — Presentación / Funciones de la DIMA
   ============================================================ */
.funciones{padding:3.5rem 0;background:#fff}
.funciones-intro{font-size:1.1rem;line-height:1.6;color:var(--dima-texto);max-width:48em;margin:0 0 2rem}
.funciones-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem 2.2rem}
.funciones-lista li{display:flex;gap:1rem;align-items:flex-start}
.fn-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--dima-verde);color:var(--dima-navy);font-family:var(--dima-serif);font-weight:700;font-size:1.1rem;line-height:1}
.funciones-lista li p{margin:0;font-size:1rem;line-height:1.55;color:var(--dima-texto)}
.funciones-lista li:last-child{grid-column:1 / -1}
@media(max-width:767px){.funciones-lista{grid-template-columns:1fr}.funciones-lista li:last-child{grid-column:auto}}

/* ============================================================
   SECCIONES 7–10 — Historia, Noticias, Convocatorias, Explora
   ============================================================ */
.kicker{text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;font-weight:700;color:var(--dima-verde-texto);margin:0 0 .6rem}
.enlace-flecha{display:inline-flex;align-items:center;gap:.4rem;color:var(--dima-navy);font-weight:700;text-decoration:none}
.enlace-flecha:hover{text-decoration:underline}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.sec-head .sec-h2{margin:0}
.foto-ph--grande{aspect-ratio:3/2}
.foto-ph--card{aspect-ratio:16/9;border-radius:10px 10px 0 0}
.nota-ejemplo{font-size:.82rem;color:var(--dima-gris);margin:1rem 0 0}

/* 7. Historia destacada */
.historia{padding:3.5rem 0;background:#fff}
.historia-h2{font-family:var(--dima-serif);font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--dima-navy);margin:0 0 1rem;line-height:1.12}
.historia-txt{font-size:1.05rem;line-height:1.6;color:var(--dima-texto);margin:0 0 1.2rem;max-width:36em}

/* 8. Noticias */
.noticias{padding:3.5rem 0;background:var(--dima-gris-fondo)}
.noticias .row{align-items:stretch} /* dima-styles.css centra todas las .row; aquí las tarjetas deben igualar alto */
.tarjeta-noticia{height:100%;display:flex;flex-direction:column;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.tn-cuerpo{padding:1.2rem 1.3rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1 1 auto}
.tn-meta{font-size:.8rem;color:var(--dima-gris);margin:0}
.tn-cat{color:var(--dima-verde-texto);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.tn-titulo{font-family:var(--dima-serif);font-size:1.2rem;color:var(--dima-navy);margin:0;line-height:1.2}
.tn-extracto{font-size:.95rem;color:var(--dima-texto);margin:0}
.tarjeta-noticia .enlace-flecha{margin-top:auto}

/* 9. Convocatorias abiertas */
.convocatorias{padding:3.5rem 0;background:#fff}
.conv-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.conv-item{display:flex;align-items:center;gap:1.2rem;background:var(--dima-fondo-azul);border-left:4px solid var(--dima-verde);border-radius:8px;padding:1.1rem 1.3rem}
.conv-fecha{flex:0 0 auto;width:64px;text-align:center;color:var(--dima-navy);line-height:1}
.cf-dia{display:block;font-family:var(--dima-serif);font-weight:700;font-size:2rem}
.cf-mes{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--dima-verde-texto)}
.conv-info{flex:1 1 auto}
.conv-titulo{font-family:var(--dima-serif);font-size:1.15rem;color:var(--dima-navy);margin:0 0 .3rem}
.conv-dirigida,.conv-cierre{font-size:.9rem;margin:0}
.conv-dirigida{color:var(--dima-texto)}
.conv-cierre{color:var(--dima-verde-texto);font-weight:700}
.conv-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:.3rem;background:var(--dima-navy);color:#fff;text-decoration:none;font-weight:700;padding:.5rem .9rem;border-radius:8px}
.conv-cta:hover{background:#2a3566;color:#fff}
@media(max-width:575px){.conv-item{flex-wrap:wrap}.conv-cta{width:100%;justify-content:center}}

/* 10. Explora la DIMA */
.explora{padding:3.5rem 0;background:var(--dima-gris-fondo)}
.mosaico{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;height:100%;min-height:130px;background:#fff;border:1px solid #e3e3e3;border-bottom:4px solid var(--dima-verde);border-radius:10px;padding:1.4rem 1rem;text-decoration:none;color:var(--dima-navy);text-align:center;transition:transform .12s,box-shadow .12s}
.mosaico:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.1);color:var(--dima-navy)}
.mosaico .bi{font-size:1.9rem;color:var(--dima-verde-texto)}
.mosaico span{font-weight:700;font-size:1rem}

/* ============================================================
   SECCIÓN 11 — Pie (navy) + emblemas obligatorios
   ============================================================ */
.pie{background:var(--dima-navy);color:#d6dbe8;padding:2.8rem 0 1.5rem;border-top:4px solid var(--dima-verde)}
.pie h3{font-family:var(--dima-serif);color:#fff;font-size:1.05rem;margin:0 0 .8rem}
.pie ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.45rem}
.pie a{color:#d6dbe8;text-decoration:none}
.pie a:hover{color:#fff;text-decoration:underline}
.pie-logo{height:46px;margin-bottom:.9rem}
.pie-contacto{line-height:1.6;margin:0;font-size:.92rem}
.emblemas{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;background:#fff;border-radius:8px;padding:.7rem .9rem;width:max-content;max-width:100%}
.pie-legal{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;margin-top:1.8rem;padding-top:1rem;border-top:1px solid #3a4473;font-size:.85rem}
.pie-legal .ms-auto{color:#aeb6d6}

/* ============================================================
   PÁGINAS INTERNAS — breadcrumb, cabecera de página y prosa
   (compartido por Presentación, Misión, Contacto, Avales, Formatos, …)
   ============================================================ */
.mini-breadcrumb{font-size:.85rem;margin:0 0 .7rem;color:var(--dima-gris)}
.mini-breadcrumb a{color:var(--dima-navy);text-decoration:none;font-weight:700}
.mini-breadcrumb a:hover{text-decoration:underline}
.mini-breadcrumb .sep{color:var(--dima-gris);margin:0 .5rem}
.mini-breadcrumb .actual{color:var(--dima-gris)}
.pagina-hero{background:var(--dima-fondo-azul);padding:2.6rem 0;border-bottom:4px solid var(--dima-verde)}
.pagina-titulo{font-family:var(--dima-serif);font-weight:700;font-size:clamp(1.9rem,4vw,2.8rem);color:var(--dima-navy);margin:0;line-height:1.1}
.pagina-lead{font-size:1.1rem;color:var(--dima-texto);margin:.8rem 0 0;max-width:46em}
.pagina-cuerpo{padding:3rem 0;background:#fff}
.prosa{max-width:48em}
.prosa p{font-size:1.05rem;line-height:1.7;color:var(--dima-texto);margin:0 0 1.2rem}
.prosa h2{font-family:var(--dima-serif);font-weight:700;font-size:1.5rem;color:var(--dima-navy);margin:2.2rem 0 .8rem}
.prosa h2:first-child{margin-top:0}
.prosa ul,.prosa ol{margin:0 0 1.2rem;padding-left:1.3rem}
.prosa li{font-size:1.05rem;line-height:1.6;color:var(--dima-texto);margin:0 0 .55rem}
.prosa a{color:var(--dima-verde-texto);font-weight:700}
.prosa .ref{font-size:.92rem;color:var(--dima-gris);margin-top:1.5rem}
/* Tarjeta destacada dentro de prosa (misión/visión, parágrafos) */
.bloque-destacado{background:var(--dima-fondo-azul);border-left:4px solid var(--dima-verde);border-radius:8px;padding:1.3rem 1.5rem;margin:0 0 1.3rem}
.bloque-destacado h2{margin-top:0}
.bloque-destacado p:last-child{margin-bottom:0}
/* Contacto */
.contacto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.3rem;max-width:none}
.contacto-card{background:#fff;border:1px solid #e3e3e3;border-top:4px solid var(--dima-verde);border-radius:10px;padding:1.4rem 1.5rem;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.contacto-card h2{font-family:var(--dima-serif);font-size:1.15rem;color:var(--dima-navy);margin:0 0 .8rem;display:flex;align-items:center;gap:.5rem}
.contacto-card h2 .bi{color:var(--dima-verde-texto)}
.contacto-card p{margin:0 0 .5rem;line-height:1.55;color:var(--dima-texto)}
.contacto-card a{color:var(--dima-verde-texto);font-weight:700;text-decoration:none}
.contacto-card a:hover{text-decoration:underline}
.contacto-card ul{list-style:none;margin:0;padding:0}
.contacto-card li{margin:0 0 .35rem;color:var(--dima-texto)}
/* Descargas (Formatos y solicitudes) */
.seccion-h2{font-family:var(--dima-serif);font-weight:700;font-size:1.5rem;color:var(--dima-navy);margin:0 0 1rem}
.seccion-h2:not(:first-child){margin-top:2.2rem}
.descargas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:.8rem}
.descarga{display:flex;align-items:center;gap:.8rem;background:#fff;border:1px solid #e3e3e3;border-left:4px solid var(--dima-verde);border-radius:8px;padding:.9rem 1.1rem;text-decoration:none;color:var(--dima-navy);transition:box-shadow .12s,transform .12s;height:100%}
.descarga:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-2px);color:var(--dima-navy)}
.descarga .bi{font-size:1.6rem;color:var(--dima-verde-texto);flex:0 0 auto}
.descarga .d-nombre{font-weight:700;font-size:.98rem;line-height:1.25}
.descarga .d-tipo{display:block;font-size:.76rem;color:var(--dima-gris);font-weight:400;margin-top:.15rem;letter-spacing:.03em}
/* Equipo de trabajo */
/* Bloque de contacto (mapa + datos) */
.equipo-contacto{display:grid;grid-template-columns:330px 1fr;gap:1.5rem;align-items:stretch;background:#fff;border:1px solid #e3e3e3;border-left:4px solid var(--dima-verde);border-radius:10px;padding:1.2rem;margin:0 0 2.5rem;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.ec-mapa{width:100%;height:100%;min-height:210px;border:0;border-radius:8px;display:block}
.ec-info{display:flex;flex-direction:column;justify-content:center;gap:.9rem}
.ec-linea{display:flex;gap:.7rem;align-items:flex-start;margin:0;font-size:.92rem;line-height:1.5;color:var(--dima-texto)}
.ec-linea .bi{color:var(--dima-verde-texto);font-size:1.2rem;flex:0 0 auto;margin-top:.1rem}
.ec-linea a{color:var(--dima-verde-texto);font-weight:700;text-decoration:none}
.ec-linea a:hover{text-decoration:underline}
@media(max-width:640px){.equipo-contacto{grid-template-columns:1fr}}
/* Tarjetas de equipo: cargo + foto grande + nombre + datos */
.equipo-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:2.2rem 1.8rem}
.miembro{display:flex;flex-direction:column}
/* Las fotos (400x326) ya traen el cargo y el fondo verde del campus */
.miembro .m-foto{width:100%;height:auto;display:block;border-radius:12px;background:var(--dima-fondo-azul)}
.miembro .m-nombre{font-family:var(--dima-serif);font-weight:700;color:var(--dima-navy);font-size:1.1rem;line-height:1.2;margin:.8rem 0 .5rem}
.miembro .m-dato{display:block;font-size:.84rem;margin:.12rem 0;line-height:1.3}
.miembro a.m-dato{color:var(--dima-verde-texto);font-weight:700;text-decoration:none;word-break:break-word}
.miembro a.m-dato:hover{text-decoration:underline}
.miembro .m-ext{color:var(--dima-texto);font-weight:700}

/* ============================================================
   PÁGINAS DE DATOS — aviso, buscador, filtros, tabla, KPIs, gráficos
   (cascarón visual; los datos se conectarán a la base de datos)
   ============================================================ */
.aviso-ejemplo{display:flex;align-items:flex-start;gap:.6rem;background:#fff8e1;border:1px solid #f0e0a0;border-left:4px solid #e0b000;border-radius:8px;padding:.8rem 1.1rem;font-size:.9rem;color:#6b5600;margin:0 0 1.6rem}
.aviso-ejemplo .bi{font-size:1.1rem;flex:0 0 auto;margin-top:.1rem}
.filtros-barra{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;margin:0 0 1.5rem}
.filtro-campo{display:flex;flex-direction:column;gap:.3rem}
.filtro-campo label{font-size:.78rem;font-weight:700;color:var(--dima-navy);text-transform:uppercase;letter-spacing:.04em}
.filtro-campo input,.filtro-campo select{border:1px solid #cdd4e4;border-radius:7px;padding:.5rem .7rem;font-size:.95rem;min-width:190px;background:#fff;color:var(--dima-texto);font-family:var(--dima-sans)}
.filtro-campo input:focus,.filtro-campo select:focus{outline:2px solid var(--dima-verde);border-color:var(--dima-verde)}
.tabla-wrap{overflow-x:auto;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.tabla-datos{width:100%;border-collapse:collapse;background:#fff}
.tabla-datos thead th{background:var(--dima-navy);color:#fff;text-align:left;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;padding:.9rem 1rem;white-space:nowrap}
.tabla-datos tbody td{padding:.85rem 1rem;border-top:1px solid #eef1f7;font-size:.95rem;color:var(--dima-texto)}
.tabla-datos tbody tr:hover{background:var(--dima-fondo-azul)}
.badge-cat{display:inline-block;background:var(--dima-fondo-azul);color:var(--dima-verde-texto);font-weight:700;font-size:.78rem;padding:.2rem .6rem;border-radius:20px}
.tabla-nota{font-size:.82rem;color:var(--dima-gris);margin:.8rem 0 0}
/* KPIs y gráficos (Dima en datos) */
.kpi-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:0 0 2rem}
.kpi{background:var(--dima-navy);color:#fff;border-radius:10px;padding:1.3rem;text-align:center}
.kpi .k-num{display:block;font-family:var(--dima-serif);font-weight:700;font-size:2.2rem;line-height:1}
.kpi .k-lbl{display:block;font-size:.85rem;color:var(--dima-verde-claro);margin-top:.3rem}
.graficos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.3rem}
.grafico-ph{background:#fff;border:1px dashed #9fb0d6;border-radius:10px;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:#6b79a3;font-weight:700;text-align:center;padding:1.5rem}
.grafico-ph .bi{font-size:2.4rem}
/* Boletines */
.boletines-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.3rem}
.boletin{display:block;text-decoration:none;color:var(--dima-navy);background:#fff;border:1px solid #e3e3e3;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:transform .12s,box-shadow .12s}
.boletin:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.1);color:var(--dima-navy)}
.boletin .b-thumb{aspect-ratio:3/4;background:var(--dima-fondo-azul);display:flex;align-items:center;justify-content:center;color:#9fb0d6;border-bottom:3px solid var(--dima-verde)}
.boletin .b-thumb .bi{font-size:2.8rem}
.boletin .b-cap{padding:.8rem 1rem;font-weight:700;font-size:.92rem;line-height:1.25}
.boletin .b-fecha{display:block;font-weight:400;font-size:.8rem;color:var(--dima-gris);margin-top:.25rem}
/* Propiedad intelectual (spin-off / patentes) */
.pi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.3rem}
.pi-card{background:#fff;border:1px solid #e3e3e3;border-top:4px solid var(--dima-verde);border-radius:10px;padding:1.4rem 1.5rem;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.pi-card h3{font-family:var(--dima-serif);font-size:1.1rem;color:var(--dima-navy);margin:0 0 .4rem}
.pi-card .pi-meta{font-size:.82rem;color:var(--dima-verde-texto);font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin:0 0 .6rem}

/* ============================================================
   ANIMACIONES — aparición suave al hacer scroll + hovers
   (solo el cuerpo moderno; nunca el encabezado/pie oficial)
   ============================================================ */
/* Aparición completa (opacidad + leve desplazamiento) SIEMPRE, incluso con
   "reducir movimiento" activado — pedido por Thomas para verlas en su equipo.
   (Si en el futuro se quiere respetar ese ajuste de accesibilidad, basta con
   envolver el transform en @media (prefers-reduced-motion: no-preference).) */
html.js-anim .anim{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
html.js-anim .anim.anim-visible{opacity:1;transform:none}
/* Hovers suaves (refuerzo) en tarjetas que no lo tenían */
.tarjeta-nec,.contacto-card,.pi-card{transition:transform .16s ease,box-shadow .16s ease}
.tarjeta-nec:hover,.contacto-card:hover,.pi-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.miembro .m-foto{transition:transform .18s ease,box-shadow .18s ease}
.miembro:hover .m-foto{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.1)}
.btn-primario,.conv-cta{transition:background .16s ease,transform .12s ease}
.btn-primario:active,.conv-cta:active{transform:translateY(1px)}
.tabla-datos tbody tr{transition:background .12s ease}

/* ============================================================
   .lift — efecto hover compartido: elemento sube (-6px), escala 1.02,
   sombra suave, ~220ms ease. Táctil: sin hover pegajoso; foco (tab/tap)
   también lo activa. Respeta "reducir movimiento". Sin salto de layout
   (transform no reflow). Cada tipo se suma a este mismo grupo de reglas.
   Aplicado a: cada fila de las gráficas del hub /datos/ (barras ranking y
   leyenda de la dona). Como es por clase, sigue activo al cambiar
   categorías/áreas (las filas se regeneran por ajax).
   ============================================================ */
/* superficie siempre presente (padding + margen negativo) para que la
   sombra tenga dónde apoyarse sin mover el layout al hacer hover */
.dima-rank-row,
.dima-legend .dl-row{padding:.4rem .55rem;margin-left:-.55rem;margin-right:-.55rem;border-radius:9px}
/* --- transform + sombra: aplica a TODOS los que levantan --- */
.lift,
.dima-rank-row,
.dima-legend .dl-row,
.detalle .groups-count{transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease;will-change:transform}
@media(hover:hover){
  .lift:hover,
  .dima-rank-row:hover,
  .dima-legend .dl-row:hover,
  .detalle .groups-count:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 34px rgba(27,34,66,.24)}
}
.lift:focus-within,
.dima-rank-row:focus-within,
.dima-legend .dl-row:focus-within,
.detalle .groups-count:focus-within{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 34px rgba(27,34,66,.24)}
/* --- fondo blanco SOLO para las filas (no para paneles ni torta: conservan su color) --- */
@media(hover:hover){
  .dima-rank-row:hover,
  .dima-legend .dl-row:hover{background:#fff}
}
.dima-rank-row:focus-within,
.dima-legend .dl-row:focus-within{background:#fff}
@media(prefers-reduced-motion:reduce){
  .lift,
  .dima-rank-row,.dima-legend .dl-row,
  .detalle .groups-count{transition:box-shadow .22s ease,background-color .22s ease}
  .lift:hover,.lift:focus-within,
  .dima-rank-row:hover,.dima-rank-row:focus-within,
  .dima-legend .dl-row:hover,.dima-legend .dl-row:focus-within,
  .detalle .groups-count:hover,.detalle .groups-count:focus-within{transform:none;box-shadow:0 16px 34px rgba(27,34,66,.24)}
}

/* --- Torta POR SECCIONES: dona en SVG, cada <path> reacciona solo --- */
.dima-ring--svg::after{display:none}            /* ya no hace falta el disco central blanco */
.dima-ring .dima-ring-svg{width:100%;height:100%;display:block;overflow:visible}  /* especificidad > svg:not(:root) de reset.css: evita recorte cuadrado al escalar la sección */
.dima-arc{stroke:#fff;stroke-width:.8;stroke-linejoin:round;transform-box:view-box;transform-origin:50% 50%;transition:transform .22s ease,filter .22s ease;outline:none;cursor:default}
@media(hover:hover){
  .dima-arc:hover{transform:scale(1.07);filter:drop-shadow(0 4px 8px rgba(27,34,66,.45))}
}
.dima-arc:focus-visible{transform:scale(1.07);filter:drop-shadow(0 4px 8px rgba(27,34,66,.45))}
@media(prefers-reduced-motion:reduce){
  .dima-arc{transition:filter .22s ease}
  .dima-arc:hover,.dima-arc:focus-visible{transform:none;filter:drop-shadow(0 4px 8px rgba(27,34,66,.45))}
}

/* ============================================================
   INTEGRACIÓN DJANGO — reskin por CSS de los componentes Bootstrap
   existentes dentro de .detalle (tablas, filtros, botones, alertas),
   para que las páginas con DATOS REALES adopten el diseño nuevo sin
   tocar la lógica ni el JS de las plantillas.
   ============================================================ */
/* Tablas Bootstrap (.table) con datos reales */
.detalle .table{width:100%;border-collapse:collapse;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.05);border-radius:10px;overflow:hidden;margin-bottom:1.5rem}
.detalle .table thead th{background:var(--dima-navy)!important;color:#fff!important;text-align:left;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;padding:.9rem 1rem;border:0;vertical-align:middle}
.detalle .table tbody td{padding:.8rem 1rem;border-top:1px solid #eef1f7;border-bottom:0;font-size:.95rem;color:var(--dima-texto);vertical-align:middle}
.detalle .table tbody tr:hover>td{background:var(--dima-fondo-azul)}
.detalle .table a,.detalle .dima--table-btn-link{color:var(--dima-navy)!important;font-weight:700;text-decoration:none;padding:0}
.detalle .table a:hover{text-decoration:underline}
.detalle .table .bi{color:var(--dima-verde-texto)}
/* Filtros (selects / inputs de búsqueda) */
.detalle .form-select,.detalle .form-control{border:1px solid #cdd4e4;border-radius:7px;padding:.5rem .7rem;font-size:.95rem;background-color:#fff;color:var(--dima-texto)}
.detalle .form-select:focus,.detalle .form-control:focus{outline:2px solid var(--dima-verde);border-color:var(--dima-verde);box-shadow:none}
/* Botones Bootstrap */
.detalle .btn-primary{background:var(--dima-navy);border-color:var(--dima-navy);font-weight:700}
.detalle .btn-primary:hover{background:#2a3566;border-color:#2a3566}
.detalle .btn-outline-primary{color:var(--dima-navy);border-color:var(--dima-navy);font-weight:700}
.detalle .btn-outline-primary:hover{background:var(--dima-navy);color:#fff}
/* Alertas */
.detalle .alert-info{background:var(--dima-fondo-azul);border:1px solid #cdd9f0;border-left:4px solid var(--dima-verde);color:var(--dima-navy);border-radius:8px}
/* Breadcrumb oficial de las páginas internas Django */
.detalle .breadcrumb-class{font-size:.85rem;padding:.4rem 0;color:var(--dima-gris)}
.detalle .breadcrumb-class a{color:var(--dima-navy);font-weight:700;text-decoration:none}
/* Títulos de sección de las páginas de datos (h1.display-8, etc.) */
.detalle .dima-main h1.display-8,.detalle .dima-main h2.display-8{font-family:var(--dima-serif);font-weight:700;color:var(--dima-navy);font-size:1.05rem}
/* El wrapper .dima-main de base_unal no debe constreñir las secciones full-bleed */
.detalle .dima-main{max-width:none;width:100%;margin:0;padding:0}
/* Miniatura real del boletín en la tarjeta de noticias del home Django */
.tarjeta-noticia .tn-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:10px 10px 0 0;background:var(--dima-fondo-azul)}

/* ============================================================
   GRÁFICAS DEL HUB /datos/ — estilo "ranking" en HTML/CSS
   (reemplazan las gráficas Plotly; las arma visualizations/templates/
   bars.html y Dima Pie.html, inyectado por ajax_render)
   ============================================================ */
/* Barras ranking (antes bars.html de Plotly) */
.dima-rank{display:flex;flex-direction:column;gap:.75rem;width:100%;padding:.25rem 0}
.dima-rank-row{display:flex;flex-direction:column;gap:.32rem}
.dima-rank-top{display:flex;justify-content:space-between;align-items:baseline;gap:.7rem}
.dima-rank-name{font-size:.9rem;color:var(--dima-texto);font-weight:500;line-height:1.25;min-width:0}
.dima-rank-val{font-family:var(--dima-serif);font-weight:700;font-size:.95rem;color:var(--dima-navy);white-space:nowrap;font-variant-numeric:tabular-nums}
.dima-rank-val small{color:var(--dima-gris);font-weight:700;margin-left:.35rem;font-size:.8em}
.dima-track{height:10px;background:var(--dima-gris-fondo);border-radius:999px;overflow:hidden}
.dima-fill{height:100%;background:var(--dima-verde);border-radius:999px;transform-origin:left;animation:dima-grow .9s cubic-bezier(.2,.7,.2,1) both}
.dima-rank-row:first-child .dima-fill{background:var(--dima-navy)}
@keyframes dima-grow{from{transform:scaleX(.02)}to{transform:scaleX(1)}}

/* Dona de resumen en CSS (antes Dima Pie.html de Plotly) */
.dima-donut{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;justify-content:center;padding:.6rem 0}
.dima-ring{width:168px;height:168px;border-radius:50%;flex:none;position:relative;animation:dima-ring-in .7s cubic-bezier(.2,.7,.2,1) both}
.dima-ring::after{content:"";position:absolute;inset:30px;border-radius:50%;background:#fff}
@keyframes dima-ring-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.dima-ring-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:1;line-height:1.05;pointer-events:none}
.dima-ring-center .dl-big{display:block;font-family:var(--dima-serif);font-weight:700;color:var(--dima-navy);font-size:2rem}
.dima-ring-center .dl-small{display:block;font-size:.72rem;color:var(--dima-gris);text-transform:uppercase;letter-spacing:.08em;margin-top:.15rem}
.dima-legend{display:flex;flex-direction:column;gap:.55rem;font-size:.9rem;min-width:0}
.dima-legend .dl-row{display:flex;align-items:center;gap:.5rem}
.dima-legend .dl-sw{width:12px;height:12px;border-radius:3px;flex:none}
.dima-legend .dl-name{color:var(--dima-texto);min-width:0}
.dima-legend .dl-val{font-weight:700;color:var(--dima-navy);font-variant-numeric:tabular-nums;margin-left:auto}
.dima-legend .dl-pct{color:var(--dima-gris);font-variant-numeric:tabular-nums;min-width:2.6em;text-align:right}

/* ============================================================
   CONVOCATORIAS (calls) — pestañas, filtros y tarjetas
   ============================================================ */
.conv-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem}
.conv-tabs .dima-click_buttons{background:#fff;border:1px solid #cdd4e4;border-radius:8px;padding:.55rem 1.1rem;font-weight:700;color:var(--dima-navy);cursor:pointer;font-family:var(--dima-sans);font-size:.95rem;transition:background .12s,color .12s,border-color .12s}
.conv-tabs .dima-click_buttons:hover{background:var(--dima-fondo-azul)}
.conv-tabs .dima-click_buttons:not(.dima-click_buttons_inactive){background:var(--dima-navy);color:#fff;border-color:var(--dima-navy)}
.conv-filtros{display:flex;flex-wrap:wrap;gap:1rem;margin:0 0 1.6rem;align-items:center}
.conv-filtros .searcher{flex:1 1 240px;border:1px solid #cdd4e4;border-radius:7px;padding:.55rem .8rem;font-size:.95rem;color:var(--dima-texto);font-family:var(--dima-sans)}
.conv-filtros .searcher:focus,.conv-filtros .form-select:focus{outline:2px solid var(--dima-verde);border-color:var(--dima-verde)}
.conv-filtros .form-select{flex:0 1 230px}
/* Tarjeta de convocatoria (reskin por CSS del parcial calls_list) */
.detalle .calls-card{display:flex;gap:1.3rem;background:#fff;border:1px solid #e3e3e3;border-left:4px solid var(--dima-verde);border-radius:10px;padding:1.3rem;margin-bottom:1.3rem;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.detalle .calls-img{flex:0 0 auto}
.detalle .call-img{width:120px;height:120px;object-fit:cover;border-radius:8px;background:var(--dima-fondo-azul);display:block}
.detalle .calls-card-body{flex:1 1 auto;min-width:0}
.detalle .calls-card .cards-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;justify-content:space-between}
.detalle .calls-card .card-title{font-family:var(--dima-serif);font-size:1.2rem;color:var(--dima-navy);margin:0 0 .2rem;line-height:1.2}
.detalle .calls-card .card-title a,.detalle .calls-card .dima-non_style_link{color:var(--dima-navy);text-decoration:none}
.detalle .calls-card .db-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--dima-verde-texto);background:var(--dima-fondo-azul);padding:.2rem .6rem;border-radius:20px}
.detalle .calls-card dl.row{margin:.6rem 0 0}
.detalle .calls-card dl.row dt{color:var(--dima-navy);font-weight:700;font-size:.9rem}
.detalle .calls-card dl.row dd{color:var(--dima-texto);font-size:.9rem}
.detalle .calls-card .cards-details{display:flex;flex-wrap:wrap;gap:1.5rem;margin:.6rem 0 0;font-size:.92rem;color:var(--dima-texto)}
.detalle .calls-card .card-attribute{font-size:.72rem;color:var(--dima-gris);margin:0;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.detalle .calls-card .card-state-active .card-attribute{color:var(--dima-verde-texto)}
.detalle .calls-card .card-state-closed .card-attribute{color:var(--dima-gris)}
.detalle .calls-card .card-link{display:inline-flex;align-items:center;gap:.3rem;color:var(--dima-navy);font-weight:700;text-decoration:none;margin-top:.7rem}
.detalle .calls-card .card-link:hover{text-decoration:underline}
@media(max-width:575px){.detalle .calls-card{flex-direction:column}.detalle .call-img{width:100%;height:160px}}

/* ===== Propiedad intelectual: Spin-offs ===== */
.spinoff-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
.spinoff-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e6e8ec;border-top:4px solid var(--dima-verde);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(27,34,66,.06);transition:transform .2s ease,box-shadow .2s ease}
.spinoff-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(27,34,66,.12)}
.spinoff-card .so-img{background:#f6f8fb;display:flex;align-items:center;justify-content:center;padding:1.2rem;min-height:170px}
.spinoff-card .so-img img{max-width:100%;max-height:150px;height:auto;width:auto;object-fit:contain}
.spinoff-card .so-cuerpo{padding:1.1rem 1.3rem 1.4rem}
.spinoff-card .so-nombre{margin:0 0 .5rem;color:var(--dima-navy);font-family:var(--dima-serif);font-size:1.3rem}
.spinoff-card .so-cuerpo p{margin:0;color:var(--dima-texto);font-size:.95rem;line-height:1.55;text-align:left}
@media(max-width:575px){.spinoff-grid{grid-template-columns:1fr}}

/* ===== Formatos: buscador ===== */
.pagina-cuerpo .search-form{margin:0 0 1.6rem}
.pagina-cuerpo .search-input{width:100%;max-width:480px;padding:.65rem .95rem;border:1px solid #cfd4dc;border-radius:8px;font-size:1rem;font-family:var(--dima-sans);color:var(--dima-texto)}
.pagina-cuerpo .search-input:focus{outline:none;border-color:var(--dima-verde);box-shadow:0 0 0 3px rgba(148,180,59,.2)}

/* ===== Datos: aparición animada de títulos y KPIs ===== */
@keyframes dima-surge{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.detalle .col-50-50 > h4,
.detalle .groups-count{animation:dima-surge .6s both}
.detalle .groups-count.blue-groups-count{animation-delay:.09s}
.detalle .groups-count.pink-groups-count{animation-delay:.18s}
@media (prefers-reduced-motion: reduce){
  .detalle .col-50-50 > h4,
  .detalle .groups-count{animation-duration:.6s}
}

/* ============================================================
   .lift en TARJETAS — unifica los hovers de cards al efecto
   compartido (-6px, scale 1.02, sombra marcada). Al final del
   archivo para prevalecer sobre los hovers previos de -3px/-4px.
   ============================================================ */
.tarjeta-nec,.contacto-card,.pi-card,.tarjeta-noticia,.boletin,
.mosaico,.spinoff-card,.descarga,.detalle .calls-card{
  transition:transform .22s ease,box-shadow .22s ease}
@media(hover:hover){
  .tarjeta-nec:hover,.contacto-card:hover,.pi-card:hover,.tarjeta-noticia:hover,
  .boletin:hover,.mosaico:hover,.spinoff-card:hover,.descarga:hover,
  .detalle .calls-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 34px rgba(27,34,66,.24)}
}
.tarjeta-nec:focus-within,.contacto-card:focus-within,.pi-card:focus-within,
.tarjeta-noticia:focus-within,.boletin:focus-within,.mosaico:focus-within,
.spinoff-card:focus-within,.descarga:focus-within,
.detalle .calls-card:focus-within{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 34px rgba(27,34,66,.24)}
@media(prefers-reduced-motion:reduce){
  .tarjeta-nec:hover,.contacto-card:hover,.pi-card:hover,.tarjeta-noticia:hover,
  .boletin:hover,.mosaico:hover,.spinoff-card:hover,.descarga:hover,.detalle .calls-card:hover,
  .tarjeta-nec:focus-within,.contacto-card:focus-within,.pi-card:focus-within,
  .tarjeta-noticia:focus-within,.boletin:focus-within,.mosaico:focus-within,
  .spinoff-card:focus-within,.descarga:focus-within,.detalle .calls-card:focus-within{
    transform:none;box-shadow:0 16px 34px rgba(27,34,66,.24)}
}

/* ============================================================
   .lift en BOTONES e IMÁGENES (efecto compartido -6px/1.02).
   Botones: foco por teclado (:focus-visible) y tap (:active).
   Imagenes standalone (hero/historia); las de tarjetas suben con su tarjeta.
   Respeta prefers-reduced-motion. Sin salto de layout (transform).
   ============================================================ */
/* Botones */
.btn-primario,.conv-cta,.btn-buscar,
.conv-tabs .dima-click_buttons,
.detalle .btn-primary,.detalle .btn-outline-primary{
  transition:background .16s ease,color .16s ease,transform .22s ease,box-shadow .22s ease}
@media(hover:hover){
  .btn-primario:hover,.conv-cta:hover,.btn-buscar:hover,
  .conv-tabs .dima-click_buttons:hover,
  .detalle .btn-primary:hover,.detalle .btn-outline-primary:hover{
    transform:translateY(-6px) scale(1.02);box-shadow:0 12px 26px rgba(27,34,66,.22)}
}
.btn-primario:focus-visible,.conv-cta:focus-visible,.btn-buscar:focus-visible,
.conv-tabs .dima-click_buttons:focus-visible,
.detalle .btn-primary:focus-visible,.detalle .btn-outline-primary:focus-visible{
  transform:translateY(-6px) scale(1.02);box-shadow:0 12px 26px rgba(27,34,66,.22)}
.btn-primario:active,.conv-cta:active,.btn-buscar:active,
.conv-tabs .dima-click_buttons:active{transform:translateY(-2px) scale(1.01)}

/* Imagenes standalone */
.hero-foto img,.historia-foto img{
  transition:transform .22s ease,box-shadow .22s ease;will-change:transform}
@media(hover:hover){
  .hero-foto img:hover,.historia-foto img:hover{
    transform:translateY(-6px) scale(1.02);box-shadow:0 18px 38px rgba(27,34,66,.22)}
}

@media(prefers-reduced-motion:reduce){
  .btn-primario,.conv-cta,.btn-buscar,.conv-tabs .dima-click_buttons,
  .detalle .btn-primary,.detalle .btn-outline-primary,
  .hero-foto img,.historia-foto img{transition:box-shadow .22s ease,background .16s ease}
  .btn-primario:hover,.conv-cta:hover,.btn-buscar:hover,.conv-tabs .dima-click_buttons:hover,
  .detalle .btn-primary:hover,.detalle .btn-outline-primary:hover,
  .btn-primario:focus-visible,.conv-cta:focus-visible,.btn-buscar:focus-visible,
  .conv-tabs .dima-click_buttons:focus-visible,
  .detalle .btn-primary:focus-visible,.detalle .btn-outline-primary:focus-visible,
  .hero-foto img:hover,.historia-foto img:hover{transform:none;box-shadow:0 12px 26px rgba(27,34,66,.22)}
}

/* ============================================================
   T4 — EQUIPO (propuesta #1): tarjetas modernas con reveal al
   scroll escalonado + hover (lift, zoom de foto, acento verde).
   Reutiliza .anim (IntersectionObserver). 0 dependencias.
   Movil: :focus-within. Respeta prefers-reduced-motion.
   ============================================================ */
.equipo-grid .miembro{
  background:#fff;border:1px solid #e6e8ec;border-top:4px solid var(--dima-verde);
  border-radius:14px;overflow:hidden;padding:0 0 1.1rem;
  box-shadow:0 1px 3px rgba(27,34,66,.06);
  transition:transform .22s ease,box-shadow .22s ease}
.equipo-grid .miembro .m-foto-wrap{display:block;overflow:hidden;line-height:0;background:var(--dima-fondo-azul)}
.equipo-grid .miembro .m-foto{border-radius:0;transition:transform .35s ease}
.equipo-grid .miembro .m-nombre,
.equipo-grid .miembro .m-dato{padding-left:1.1rem;padding-right:1.1rem}
.equipo-grid .miembro .m-nombre{position:relative}
.equipo-grid .miembro .m-nombre::after{content:"";display:block;width:34px;height:3px;border-radius:3px;background:var(--dima-verde);margin-top:.5rem;transition:width .25s ease}
/* reveal escalonado por columna (reutiliza .anim) */
.equipo-grid .miembro.anim{transition-delay:0ms}
.equipo-grid .miembro.anim:nth-child(3n+2){transition-delay:80ms}
.equipo-grid .miembro.anim:nth-child(3n){transition-delay:160ms}
/* hover / foco */
@media(hover:hover){
  .equipo-grid .miembro:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 16px 34px rgba(27,34,66,.16)}
  .equipo-grid .miembro:hover .m-foto{transform:scale(1.05)}
  .equipo-grid .miembro:hover .m-nombre::after{width:64px}
}
.equipo-grid .miembro:focus-within{transform:translateY(-6px) scale(1.01);box-shadow:0 16px 34px rgba(27,34,66,.16)}
.equipo-grid .miembro:focus-within .m-foto{transform:scale(1.05)}
.equipo-grid .miembro:focus-within .m-nombre::after{width:64px}
@media(prefers-reduced-motion:reduce){
  .equipo-grid .miembro,.equipo-grid .miembro .m-foto,.equipo-grid .miembro .m-nombre::after{transition:box-shadow .22s ease}
  .equipo-grid .miembro:hover,.equipo-grid .miembro:focus-within{transform:none;box-shadow:0 16px 34px rgba(27,34,66,.16)}
  .equipo-grid .miembro:hover .m-foto,.equipo-grid .miembro:focus-within .m-foto{transform:none}
}

/* ============================================================
   EQUIPO — Dirección destacada (jerarquía institucional) + grilla.
   Mobile-first (apila); horizontal en >=640px. Reutiliza .anim (reveal).
   Identidad UNAL. Sin dependencias nuevas.
   ============================================================ */
.equipo-sub{font-family:var(--dima-serif);color:var(--dima-navy);font-size:1.2rem;margin:1.8rem 0 1rem;padding-bottom:.4rem;border-bottom:2px solid var(--dima-gris-fondo)}
.equipo-destacado{display:grid;grid-template-columns:1fr;gap:1.2rem;align-items:center;background:#fff;border:1px solid #e6e8ec;border-left:5px solid var(--dima-verde);border-radius:14px;padding:1.2rem;box-shadow:0 2px 10px rgba(27,34,66,.06);margin:0 0 1.5rem}
.equipo-destacado .ed-foto-wrap{display:block;overflow:hidden;border-radius:12px;background:var(--dima-fondo-azul);max-width:320px}
.equipo-destacado .ed-foto{width:100%;height:auto;display:block;transition:transform .35s ease}
@media(hover:hover){.equipo-destacado:hover .ed-foto{transform:scale(1.03)}}
.equipo-destacado .ed-nombre{font-family:var(--dima-serif);color:var(--dima-navy);font-size:1.5rem;line-height:1.15;margin:0 0 .25rem}
.equipo-destacado .ed-cargo{color:var(--dima-verde-texto);font-weight:700;font-size:1rem;margin:0 0 .7rem}
.equipo-destacado .ed-contacto{color:var(--dima-texto);font-size:.95rem;margin:0}
.equipo-destacado .ed-contacto a{color:var(--dima-verde-texto);font-weight:700;text-decoration:none;word-break:break-word}
.equipo-destacado .ed-contacto a:hover{text-decoration:underline}
.equipo-destacado .ed-contacto .bi{color:var(--dima-verde-texto)}
.equipo-destacado .ed-sep{color:var(--dima-gris);margin:0 .35rem}
@media(min-width:640px){
  .equipo-destacado{grid-template-columns:300px 1fr;gap:1.8rem;padding:1.4rem 1.6rem}
}

/* ============================================================
   EQUIPO v2 — diseño nuevo: placeholders animados + tarjetas con
   "despliegue" (accordion accesible <details>). Identidad UNAL.
   Referencias de patrón: hover sutil (Bolden), accordion (Ogilvy),
   aparición al scroll (Stripe/Awwwards). Sin dependencias nuevas.
   ============================================================ */
/* Aviso de actualización */
.equipo-aviso{display:flex;align-items:center;gap:.7rem;background:var(--dima-fondo-azul);border:1px solid #cdd9f0;border-left:4px solid var(--dima-verde);border-radius:10px;padding:.9rem 1.1rem;color:var(--dima-navy);margin:0 0 1.6rem;font-weight:600}
.equipo-aviso .bi{color:var(--dima-verde-texto);font-size:1.2rem}

/* Avatar placeholder (silueta + shimmer) */
.mx-avatar{position:relative;display:block;overflow:hidden;background:var(--dima-fondo-azul);border-radius:12px;aspect-ratio:1/1}
.mx-avatar--grande{max-width:320px}
.mx-silueta{width:100%;height:100%;display:block;fill:#b9c3dd}
.mx-shimmer{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%);animation:mx-shine 1.8s ease-in-out infinite}
@keyframes mx-shine{to{transform:translateX(100%)}}
.mx-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:700;color:var(--dima-verde-texto);background:var(--dima-fondo-azul);border:1px solid #cdd9f0;border-radius:999px;padding:.2rem .6rem;margin:0 0 .5rem}
.mx-skel-txt{color:var(--dima-gris)}

/* Grilla de tarjetas con despliegue */
.equipo-grid--exp{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.miembro-exp-li{list-style:none}
.miembro-exp{background:#fff;border:1px solid #e6e8ec;border-top:4px solid var(--dima-verde);border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(27,34,66,.06);transition:transform .2s ease,box-shadow .2s ease}
@media(hover:hover){.miembro-exp:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(27,34,66,.12)}}
.miembro-exp .mx-face{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;cursor:pointer;list-style:none;min-height:48px}
.miembro-exp .mx-face::-webkit-details-marker{display:none}
.miembro-exp .mx-face:focus-visible{outline:3px solid var(--dima-navy);outline-offset:-3px;border-radius:10px}
.miembro-exp .mx-face .mx-avatar{width:56px;height:56px;flex:none;border-radius:50%}
.miembro-exp .mx-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.miembro-exp .mx-nombre{font-family:var(--dima-serif);font-weight:700;color:var(--dima-navy);font-size:1.02rem;line-height:1.2}
.miembro-exp .mx-cargo{color:var(--dima-gris);font-size:.86rem}
.miembro-exp .mx-chevron{color:var(--dima-navy);transition:transform .25s ease;flex:none}
.miembro-exp[open] .mx-chevron{transform:rotate(180deg)}
.miembro-exp .mx-panel-in{padding:0 1rem 1rem calc(1rem + 56px + .9rem)}
.miembro-exp[open] .mx-panel-in{animation:mx-desplegar .28s ease both}
@keyframes mx-desplegar{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.miembro-exp .mx-dato{margin:.1rem 0;color:var(--dima-texto);font-size:.9rem;display:flex;align-items:center;gap:.4rem}
.miembro-exp .mx-dato .bi{color:var(--dima-verde-texto)}

/* Respeta reducción de movimiento: sin shimmer ni animación de despliegue */
@media(prefers-reduced-motion:reduce){
  .mx-shimmer{animation:none;opacity:0}
  .miembro-exp .mx-chevron{transition:none}
  .miembro-exp[open] .mx-panel-in{animation:none}
}

/* Reveal propio del Equipo v2 — garantizado visible (estado final opaco),
   escalonado, en carga. Respeta reduce-motion (sin animación => visible). */
.equipo-reveal{animation:mx-entrar .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes mx-entrar{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.equipo-grid--exp .equipo-reveal:nth-child(2){animation-delay:.06s}
.equipo-grid--exp .equipo-reveal:nth-child(3){animation-delay:.12s}
.equipo-grid--exp .equipo-reveal:nth-child(4){animation-delay:.18s}
.equipo-grid--exp .equipo-reveal:nth-child(5){animation-delay:.24s}
.equipo-grid--exp .equipo-reveal:nth-child(6){animation-delay:.30s}
@media(prefers-reduced-motion:reduce){.equipo-reveal{animation:none}}

/* Ajuste Equipo v2: Dirección igual a las demás (una sola grilla) +
   animación/transformación más marcada al abrir el panel. */
@keyframes mx-desplegar{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
.miembro-exp{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.miembro-exp .mx-avatar{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.miembro-exp .mx-face{transition:background-color .25s ease}
.miembro-exp[open]{box-shadow:0 16px 34px rgba(27,34,66,.16);border-color:var(--dima-verde)}
.miembro-exp[open] .mx-face{background:var(--dima-fondo-azul)}
.miembro-exp[open] .mx-avatar{transform:scale(1.08)}
.miembro-exp[open] .mx-panel-in{animation:mx-desplegar .34s cubic-bezier(.2,.85,.25,1) both}
@media(prefers-reduced-motion:reduce){
  .miembro-exp,.miembro-exp .mx-avatar,.miembro-exp .mx-face{transition:none}
  .miembro-exp[open] .mx-avatar{transform:none}
  .miembro-exp[open] .mx-panel-in{animation:none}
}

/* Ajuste Equipo v2.1: tarjetas MÁS GRANDES + transformación al abrir MÁS VISIBLE */
.equipo-grid--exp{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.4rem}
.miembro-exp .mx-face{padding:1.2rem 1.3rem;gap:1.1rem;min-height:84px}
.miembro-exp .mx-face .mx-avatar{width:76px;height:76px}
.miembro-exp .mx-nombre{font-size:1.15rem}
.miembro-exp .mx-cargo{font-size:.92rem}
.miembro-exp .mx-chevron{font-size:1.2rem;transition:transform .3s ease,color .3s ease}
.miembro-exp .mx-panel-in{padding:0 1.3rem 1.3rem calc(1.3rem + 76px + 1.1rem);font-size:.95rem}

/* Estado ABIERTO — transformación clara: eleva, borde verde, tinte, avatar y chevron */
.miembro-exp{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease,background-color .28s ease}
.miembro-exp[open]{transform:translateY(-6px) scale(1.015);box-shadow:0 22px 46px rgba(27,34,66,.22);border-color:var(--dima-verde);background:#fbfdf6}
.miembro-exp[open] .mx-face{background:var(--dima-fondo-azul)}
.miembro-exp[open] .mx-avatar{transform:scale(1.14)}
.miembro-exp[open] .mx-chevron{transform:rotate(180deg) scale(1.15);color:var(--dima-verde-texto)}
@keyframes mx-desplegar{from{opacity:0;transform:translateY(-16px) scale(.93)}to{opacity:1;transform:none}}
.miembro-exp[open] .mx-panel-in{animation:mx-desplegar .42s cubic-bezier(.2,.9,.25,1) both}
@media(prefers-reduced-motion:reduce){
  .miembro-exp[open]{transform:none}
  .miembro-exp[open] .mx-avatar,.miembro-exp[open] .mx-chevron{transform:rotate(180deg)}
  .miembro-exp[open] .mx-panel-in{animation:none}
}

/* ===== Móvil: evitar desborde horizontal (rastreo a 390 px, 2026-11-10) ===== */
/* Banner dima_accent: el logo "Dima" medía 423 px fijos (height=75) y se salía de la pantalla. */
.carousel-fluff{flex-wrap:wrap;gap:.5rem;max-width:100%}
.carousel-fluff a{max-width:100%}
.carousel-fluff img{max-width:100%;height:auto;max-height:75px}
@media (max-width:575.98px){
  /* unal.css (max-width:575px) pone `body main.detalle{margin:0 2%}`, que gana a main.detalle
     y suma 8 px al ancho 100%: anulamos solo los márgenes laterales. */
  html body main.detalle{margin-left:0;margin-right:0}
  .carousel-fluff{margin:.75rem 1rem}
  /* /datos/: filas .row sin .container (margen -12 px) se salían 12 px. */
  #dima-render--data .row{margin-left:0;margin-right:0}
  /* Tablas anchas (Formatos, datos): se desplazan dentro de su caja, no la página. */
  .dima-content-table,.dima-main table.table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Pie UNAL: los enlaces de "gobierno en línea" se pasaban 3 px. */
  footer .gobiernoLinea a{display:inline-block;max-width:100%;overflow-wrap:anywhere}
}