Jaime Augusto Zárate Arias – Ecosistema del conocimiento

/* ===================================================================
ECOSISTEMA DEL CONOCIMIENTO ‚Äî CSS HEADER v2 (9 jun 2026)
Va en: Apariencia > Personalizar > Scripts de cabecera y pie de
p√°gina > «Scripts de la cabecera». Pegar TODO (incluye ).
Paleta nueva UTP: navy #003d6d + dorado #c9a227 / Oswald + Roboto.
=================================================================== */
@import url(‘https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css’);
@import url(‘https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap’);

/* === Variables de color UTP === */
:root{
–primary:#003d6d; –primary-dark:#003157; –primary-light:#0a5a96;
–accent:#c9a227; –accent-soft:#e6c65a; –cyan:#0d8ecf;
–dark:#002744; –dark2:#003157;
–gray-100:#f8f9fa; –gray-200:#e9ecef; –gray-300:#dee2e6; –gray-400:#ced4da;
–gray-500:#adb5bd; –gray-600:#6c757d; –gray-700:#495057; –gray-800:#343a40; –gray-900:#212529;
–white:#ffffff;
}

/* === Tipograf√≠a: Roboto cuerpo / Oswald t√≠tulos (solo contenido) === */
.entry-content { font-family:’Roboto’, system-ui, -apple-system, sans-serif; }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.entry-content .wp-block-heading,
.hero-banner h1, .metafora-band h2 {
font-family:’Oswald’,’Roboto’, sans-serif;
letter-spacing:.4px;
}

/* === STICKY NAVBAR === */
#masthead,
.site-header,
.ast-primary-header-bar {
position: sticky !important;
top: 0;
z-index: 999;
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
/* fondo blanco del header a TODO el ancho (todas las capas de Astra) */
#masthead,
.site-header,
.ast-main-header-wrap,
.main-header-bar-wrap,
.main-header-bar,
.ast-primary-header-bar,
.ast-above-header-wrap,
.ast-below-header-wrap {
background-color: #ffffff !important;
}
/* el fondo de la p√°gina detr√°s del header en blanco (sin franjas oscuras) */
html, body { background-color: #ffffff !important; }

/* === Men√∫ estilo prototipo: gris medio -> navy, activo subrayado === */
.ast-primary-header-bar .main-header-menu .menu-link,
.main-header-menu .menu-link,
.ast-builder-menu .menu-link,
.ast-primary-header-bar a.menu-link,
.main-navigation .menu-item > a {
color: #495057 !important;
font-weight: 500 !important;
font-family: ‘Oswald’, sans-serif;
letter-spacing: .3px;
position: relative;
}
.main-header-menu .menu-link:hover,
.ast-builder-menu .menu-link:hover,
.main-navigation .menu-item > a:hover {
color: #003d6d !important;
}
/* √≠tem activo (p√°gina actual): navy + subrayado */
.menu-item.current-menu-item > .menu-link,
.menu-item.current-menu-ancestor > .menu-link,
.menu-item.current-menu-item > a {
color: #003d6d !important;
font-weight: 600 !important;
}
.ast-primary-header-bar .menu-item.current-menu-item > .menu-link::after,
.main-header-menu .menu-item.current-menu-item > .menu-link::after {
content: »;
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 2px;
background: #003d6d;
border-radius: 2px;
}
/* submen√∫ desplegable: blanco limpio (no caja oscura) */
.main-header-menu .sub-menu,
.ast-builder-menu .sub-menu,
.ast-primary-header-bar .sub-menu {
background: #ffffff !important;
border: 1px solid #dee2e6 !important;
box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
}
.main-header-menu .sub-menu .menu-link,
.ast-builder-menu .sub-menu .menu-link,
.ast-primary-header-bar .sub-menu .menu-link {
color: #495057 !important;
font-weight: 500 !important;
}
.main-header-menu .sub-menu .menu-link:hover,
.ast-primary-header-bar .sub-menu .menu-link:hover {
color: #003d6d !important;
background: #f8f9fa !important;
}

/* === T√≠tulo del sitio «Ecosistema del Conocimiento» visible === */
.site-title,
.site-title a {
color: #003d6d !important;
font-family: ‘Oswald’, sans-serif !important;
font-weight: 700 !important;
font-size: 1.15rem !important;
letter-spacing: .3px;
}

/* === Padding lateral del men√∫ === */
.ast-primary-header-bar .ast-container,
.main-header-bar .ast-container,
.site-header .ast-container {
padding-left: 2.5rem !important;
padding-right: 2.5rem !important;
max-width: 1400px;
margin: 0 auto;
}

/* === Fondo blanco en el contenido (fix mobile) === */
.site-content,
.entry-content,
.home .entry-content,
.home .ast-container {
background-color: #ffffff !important;
}

/* === Inicio: ocultar t√≠tulo y espacio === */
.home .entry-title,
.home h1.entry-title,
.home .ast-archive-title,
.home .page-title,
.home .entry-header,
.home .ast-page-banner,
.home .ast-archive-description {
display: none !important;
}
.home main,
.home .site-content,
.home .ast-container,
.home #primary,
.home .ast-content-area,
.home .entry-content {
padding-top: 0 !important;
margin-top: 0 !important;
}
.home .entry-content > .ast-container,
.home .site-content > .ast-container {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}

/* === P√°ginas internas: ocultar el t√≠tulo autom√°tico de WP (cada p√°gina tiene su hero) === */
.page .entry-header,
.page .entry-title,
.page h1.entry-title,
.page .ast-archive-description,
.page .ast-single-entry-banner,
.page .ast-page-banner,
.page .ast-archive-title,
.ast-page-title {
display: none !important;
}
.page #primary,
.page .ast-container,
.page .site-content,
.page .ast-content-area,
.page .entry-content {
padding-top: 0 !important;
margin-top: 0 !important;
}

/* === Badge EC === */
.site-title a {
display: inline-flex !important;
align-items: center;
}
.site-title a::before {
content: ‘EC’;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: #003d6d;
color: #ffffff !important;
font-weight: 800;
font-size: 0.8rem;
border-radius: 8px;
margin-right: 12px;
flex-shrink: 0;
font-family:’Oswald’, sans-serif;
}

/* === HERO: gradiente navy + glows sutiles + S√çMBOLO nuevo === */
/* La red de nodos tenue de fondo (hero-net) viaja como data-URI sobre el
gradiente ‚Äî multisite-safe, no depende de markup extra. */
.hero-banner {
background:
url(«data:image/svg+xml;utf8,») center / cover no-repeat,
linear-gradient(135deg, #001f33 0%, #003d6d 50%, #0a5a96 100%) !important;
position: relative;
overflow: hidden;
}
/* glows ambientales (dorado arriba-der + cyan abajo-izq) */
.hero-banner::before {
content: »;
position: absolute;
top: -40%; right: -15%;
width: 620px; height: 620px;
background: radial-gradient(circle, rgba(230,198,90,.10) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none; z-index: 1;
}
.hero-banner::after {
content: »;
position: absolute;
bottom: -35%; left: -12%;
width: 460px; height: 460px;
background: radial-gradient(circle, rgba(13,142,207,.14) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none; z-index: 1;
}
.hero-banner > * { position: relative; z-index: 2; }

/* S√çMBOLO: red hexagonal de personas + n√∫cleo de conocimiento (animado).
Va como background-image data-URI (sobrevive el sanitizer de WP).
La animaci√≥n (pulso de nodos, anillo, part√≠culas orbitando) viaja
embebida dentro del SVG, no depende del CSS de la p√°gina. */
.hero-symbol {
min-height: 380px;
background-image: url(«data:image/svg+xml;utf8,»);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media (max-width: 1024px) { .hero-symbol { display: none !important; } }

/* === Hero features === */
.hero-features {
gap: 0.8rem 2rem !important;
max-width: 800px;
margin: 0 !important;
align-items: flex-start !important;
flex-wrap: wrap !important;
}
.hero-feature {
color: #ffffff !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center;
gap: 12px;
font-size: 1.05rem !important;
font-weight: 500 !important;
}
.hero-feature i {
color: #e6c65a !important;
font-size: 1.2rem !important;
filter: drop-shadow(0 0 8px rgba(230,198,90,0.5));
}

/* === Pilares === */
.pilar-card {
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
background: #ffffff;
}
.pilar-icon {
width: 64px !important;
height: 64px !important;
background: #eef3f8;
color: #003d6d !important;
border-radius: 14px;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin: 0 auto 1rem !important;
transition: all 0.3s ease;
}
.pilar-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(0, 61, 109, 0.14);
border-color: #003d6d !important;
}
.pilar-card:hover .pilar-icon {
background: #003d6d;
color: #ffffff !important;
transform: scale(1.06);
}
.pilar-card:hover h3 { color: #0a5a96 !important; }

/* === FRANJA MET√ÅFORA (Sembrar hoy para cosechar) ===
IMPORTANTE: reemplazar URL_COSECHA por la URL de la imagen
cosecha.png una vez subida a la Biblioteca de medios de WP. */
.metafora-band {
position: relative;
text-align: center;
color: #fff !important;
background: #003157 url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/cosecha.png’) center 60% / cover no-repeat;
overflow: hidden;
}
.metafora-band::before {
content: »;
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,39,68,.82), rgba(0,49,87,.66));
z-index: 1;
}
.metafora-band > * { position: relative; z-index: 2; }
.metafora-band h2 {
text-transform: uppercase;
letter-spacing: 1px;
color: #fff !important;
text-shadow: 0 2px 16px rgba(0,20,40,.6);
}
.metafora-band h2 .acento { color: #e6c65a; }
.metafora-band p {
color: #fff !important;
text-shadow: 0 1px 12px rgba(0,20,40,.7);
max-width: 680px;
margin: 0 auto;
}

/* === FAQs === */
.wp-block-details.faq-item {
border: 1px solid #dee2e6;
border-radius: 8px;
margin-bottom: 0.75rem;
padding: 0;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
}
.wp-block-details.faq-item:hover {
border-color: #003d6d;
box-shadow: 0 2px 8px rgba(0, 61, 109, 0.06);
}
.wp-block-details.faq-item summary {
cursor: pointer;
padding: 1rem 1.25rem;
font-weight: 600;
color: #003d6d;
list-style: none;
position: relative;
padding-right: 3rem;
}
.wp-block-details.faq-item summary::-webkit-details-marker { display: none; }
.wp-block-details.faq-item summary:hover { background: #f8f9fa; }
.wp-block-details.faq-item summary::after {
content: ‘+’;
position: absolute;
right: 1.25rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
font-weight: 300;
color: #c9a227;
transition: transform 0.3s ease;
}
.wp-block-details.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.wp-block-details.faq-item[open] summary { border-bottom: 1px solid #dee2e6; }
.wp-block-details.faq-item p { padding: 1rem 1.25rem; margin: 0; color: #495057; line-height: 1.7; }

/* === Botones === */
.hero-banner .wp-block-button__link,
.wp-block-button.is-style-accent .wp-block-button__link {
background-color: #c9a227 !important;
color: #002744 !important;
font-weight: 700 !important;
transition: all 0.25s ease !important;
}
.hero-banner .wp-block-button__link:hover,
.wp-block-button.is-style-accent .wp-block-button__link:hover {
background-color: #e6c65a !important;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(201, 162, 39, 0.35);
}
.wp-block-button.is-style-outline .wp-block-button__link {
transition: all 0.25s ease;
border-color: #003d6d !important;
color: #003d6d !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
background: #003d6d !important;
color: #ffffff !important;
}

/* =====================================================================
P√ÅGINAS INTERNAS (M-TOCA y siguientes) ‚Äî diagramas nativos HTML/CSS
===================================================================== */
/* hero de p√°gina interna (full-width v√≠a wp:group alignfull) */
.uc-hero { color: #fff; position: relative; }
.uc-hero.mtoca {
background: linear-gradient(90deg, rgba(0,39,68,.92), rgba(0,49,87,.5)),
url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/mtoca-aprendizaje.png’) right center / cover;
}
.uc-hero .uc-bread, .uc-hero .uc-bread a { color: rgba(255,255,255,.65) !important; text-decoration: none; }
.uc-hero .uc-bread a:hover { color: #fff !important; }
.uc-hero h1 { color: #fff !important; }
.uc-hero p { color: rgba(255,255,255,.88) !important; }
/* aire entre el hero y el primer p√°rrafo (p√°ginas de personaje) */
.uc-hero + p { margin-top: 44px !important; }

/* secciones internas */
.uc-sec { padding: 56px 0; }
.uc-in { max-width: 1120px; margin: 0 auto; }
.uc-title { font-family:’Oswald’,sans-serif; text-transform:uppercase; letter-spacing:.6px; font-size:1.7rem; font-weight:700; color:var(–gray-900); margin:0 0 .4rem; }
.uc-sub { font-size:1.02rem; color:var(–gray-600); margin:0 0 36px; max-width:720px; }
.uc-center { text-align:center; }
.uc-center.uc-sub { margin-left:auto; margin-right:auto; }
.uc-divider { border-top:1px solid var(–gray-200); }

/* logo M-TOCA */
.mtoca-logo-wrap { display:flex; justify-content:center; margin-bottom:40px; }
.mtoca-logo-wrap img { max-width:420px; width:100%; height:auto; }

/* cadena andrag√≥gica (5 esferas) */
.andragogia-chain { display:flex; justify-content:center; align-items:flex-start; position:relative; margin-top:10px; flex-wrap:wrap; gap:10px; }
.andragogia-chain::before { content:»; position:absolute; top:71px; left:10%; right:10%; height:3px; background:var(–gray-200); z-index:0; }
.andra2 { flex:1; max-width:205px; text-align:center; position:relative; z-index:1; padding:0 6px; }
.andra2-ring { width:132px; height:132px; border-radius:50%; background:#fff; border:5px solid var(–gray-200); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 auto 16px; box-shadow:0 6px 18px rgba(0,0,0,.07); }
.andra2-ring::after { content:»; position:absolute; inset:-5px; border-radius:50%; border:5px solid transparent; border-top-color:var(–c); border-right-color:var(–c); transform:rotate(45deg); }
.andra2-ring i { font-size:1.35rem; color:var(–c); margin-bottom:3px; }
.andra2-num { font-family:’Oswald’,sans-serif; font-size:1.75rem; font-weight:700; color:var(–gray-900); line-height:1; }
.andra2 h4 { font-family:’Oswald’,sans-serif; text-transform:uppercase; font-size:1.1rem; letter-spacing:.5px; color:var(–c); margin:0 0 5px; }
.andra2 p { font-size:.82rem; color:var(–gray-600); line-height:1.45; margin:0; }
@media(max-width:760px){ .andragogia-chain::before{display:none} .andra2{flex:0 0 42%} }

/* modelo incluyente */
.incluyente-wrap { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px; }
.incluyente-center { grid-column:1/-1; text-align:center; margin-bottom:8px; }
.incluyente-center h3 { font-family:’Oswald’,sans-serif; font-size:1.5rem; text-transform:uppercase; color:var(–primary); letter-spacing:1px; margin:0; }
.incluyente-chip { background:#fff; border:1px solid var(–gray-200); border-left:4px solid var(–accent); border-radius:10px; padding:18px 20px; font-size:.9rem; font-weight:500; color:var(–gray-800); display:flex; align-items:center; gap:12px; }
.incluyente-chip i { color:var(–primary); font-size:1.1rem; }
@media(max-width:760px){ .incluyente-wrap{grid-template-columns:1fr} }

/* libros */
.libros-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.libro-card { display:flex; gap:20px; background:#fff; border:1px solid var(–gray-200); border-radius:12px; padding:24px; align-items:center; }
.libro-cover { width:90px; height:120px; background:var(–gray-100); border:1px solid var(–gray-200); border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.libro-cover i { font-size:1.8rem; color:var(–primary); }
.libro-info h3 { font-family:’Oswald’,sans-serif; font-size:1.05rem; text-transform:uppercase; color:var(–gray-900); margin:0 0 6px; }
.libro-info p { font-size:.88rem; color:var(–gray-600); margin:0 0 12px; }
@media(max-width:760px){ .libros-grid{grid-template-columns:1fr} }

/* videos */
.videos-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.video-ph { width:100%; aspect-ratio:16/9; background:var(–gray-100); border:1px solid var(–gray-200); border-radius:12px; display:flex; align-items:center; justify-content:center; }
.video-ph i { font-size:3rem; color:var(–gray-400); }
.video-cap { font-size:.9rem; color:var(–gray-600); margin-top:10px; text-align:center; }
@media(max-width:760px){ .videos-grid{grid-template-columns:1fr} }

/* bot√≥n peque√±o */
.uc-btn { display:inline-block; padding:11px 24px; border-radius:6px; font-weight:600; font-size:.9rem; text-decoration:none; transition:all .25s; }
.uc-btn-primary { background:var(–primary); color:#fff; }
.uc-btn-primary:hover { background:var(–primary-light); color:#fff; }

/* ===== TRANSFORMACI√ìN CULTURAL ===== */
.uc-hero.transformacion {
background: linear-gradient(90deg, rgba(0,39,68,.92), rgba(0,49,87,.5)),
url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/cultura-valores.png’) right center / cover;
}
/* estrategias (5 cards, miniatura B&N -> color al hover) */
.estrategias-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.estrategia-card { background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(–gray-200); transition:all .3s; }
.estrategia-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.estrategia-thumb { height:160px; background:var(–gray-300) center / cover; filter:grayscale(1) brightness(1.3) contrast(.85); transition:filter .35s; }
.estrategia-card:hover .estrategia-thumb { filter:grayscale(0); }
.estrategia-card .card-body { padding:20px; }
.estrategia-card h3 { font-family:’Oswald’,sans-serif; text-transform:uppercase; font-size:1rem; color:var(–gray-900); margin:0 0 8px; }
.estrategia-card p { font-size:.88rem; color:var(–gray-600); line-height:1.6; margin:0; }
.estrategia-card a { color:var(–primary); font-weight:600; }
/* miniaturas de estrategias por clase (multisite-safe, sin style inline) */
.estr-clima { background-image:url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/estr-clima.png’); }
.estr-integridad { background-image:url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/estr-integridad.png’); }
.estr-simbolos { background-image:url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/estr-simbolos.png’); }
.estr-liderazgo { background-image:url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/estr-liderazgo.png’); }
.estr-servicio { background-image:url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/estr-servicio.png’); }
@media(max-width:760px){ .estrategias-grid{grid-template-columns:1fr} }

/* valores (7 + C√≥digo de Integridad) */
.valores-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.valor-card { background:#fff; border-radius:14px; padding:26px 22px; border:1px solid var(–gray-200); border-top:4px solid var(–primary); transition:transform .3s,box-shadow .3s; }
.valor-card:hover { transform:translateY(-5px); box-shadow:0 14px 30px rgba(0,61,109,.12); }
.valor-icon { width:48px; height:48px; border-radius:12px; background:var(–gray-100); display:flex; align-items:center; justify-content:center; color:var(–primary); font-size:1.2rem; margin-bottom:14px; }
.valor-card h4 { font-family:’Oswald’,sans-serif; font-size:1.1rem; text-transform:uppercase; letter-spacing:.5px; color:var(–primary); margin:0 0 8px; }
.valor-card p { font-size:.85rem; color:var(–gray-600); line-height:1.6; margin:0; }
.valor-card.cod { background:var(–primary); border-top-color:var(–accent); }
.valor-card.cod .valor-icon { background:rgba(255,255,255,.12); color:var(–accent-soft); }
.valor-card.cod h4 { color:var(–accent-soft); }
.valor-card.cod p { color:rgba(255,255,255,.85); }
@media(max-width:900px){ .valores-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .valores-grid{grid-template-columns:1fr} }

/* diagrama Confianza */
.confianza-box { background:linear-gradient(135deg,var(–primary),var(–primary-dark)); border-radius:20px; padding:48px 32px; color:#fff; text-align:center; position:relative; overflow:hidden; }
.confianza-box::before { content:»; position:absolute; top:-40%; right:-10%; width:340px; height:340px; background:radial-gradient(circle,rgba(201,162,39,.18) 0%,transparent 70%); border-radius:50%; }
.confianza-nodes { display:flex; justify-content:center; gap:48px; flex-wrap:wrap; margin:0 0 28px; position:relative; z-index:2; }
.confianza-node { display:flex; flex-direction:column; align-items:center; gap:10px; }
.confianza-node .cn-icon { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.1); border:2px solid var(–accent-soft); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(–accent-soft); }
.confianza-node span { font-size:.9rem; font-weight:500; }
.confianza-core { font-family:’Oswald’,sans-serif; font-size:2.2rem; text-transform:uppercase; letter-spacing:2px; color:var(–accent-soft); position:relative; z-index:2; }

/* sello + 2 columnas gen√©rico */
.uc-2col { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; margin-bottom:40px; }
.uc-2col h3 { font-family:’Oswald’,sans-serif; text-transform:uppercase; color:var(–primary); margin:0 0 12px; }
.uc-2col p { color:var(–gray-600); line-height:1.7; margin:0; }
@media(max-width:760px){ .uc-2col{grid-template-columns:1fr} }
.sello-wrap { display:flex; align-items:center; gap:24px; background:var(–gray-100); border-radius:14px; padding:24px; flex-wrap:wrap; }
.sello-wrap img { width:120px; height:auto; flex-shrink:0; }
.sello-wrap h3 { font-family:’Oswald’,sans-serif; text-transform:uppercase; color:var(–primary); margin:0 0 8px; }
.sello-wrap p { color:var(–gray-600); line-height:1.7; margin:0 0 10px; }

/* estrategias numeradas (timeline) ‚Äî versi√≥n actualizada Transformaci√≥n */
.estrat { position:relative; padding-left:88px; margin-bottom:44px; }
.estrat::after { content:»; position:absolute; left:25px; top:62px; bottom:-44px; width:2px; background:var(–gray-200); }
.estrat:last-child::after { display:none; }
.estrat-head { display:flex; align-items:center; min-height:52px; margin-bottom:18px; }
.estrat-num { position:absolute; left:0; top:0; width:52px; height:52px; border-radius:50%; background:var(–primary); color:#fff; font-family:’Oswald’,sans-serif; font-weight:700; font-size:1.5rem; display:flex; align-items:center; justify-content:center; z-index:1; }
.estrat-head h3 { font-family:’Oswald’,sans-serif; text-transform:uppercase; color:var(–primary); font-size:1.4rem; letter-spacing:.4px; margin:0; }
.estrat-2col { display:grid; grid-template-columns:1.15fr 1fr; gap:28px; align-items:center; }
.estrat > p { color:var(–gray-700); line-height:1.7; }
.estrat-sub { font-family:’Oswald’,sans-serif; text-transform:uppercase; color:var(–gray-900); font-size:1.05rem; letter-spacing:.3px; margin:24px 0 14px; }
@media(max-width:760px){ .estrat{padding-left:62px} .estrat-2col{grid-template-columns:1fr} }

/* swatches de la bandera */
.sw { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:middle; border:1px solid rgba(0,0,0,.12); }
.sw-amarillo{background:#c9a227} .sw-blanco{background:#fff} .sw-azul{background:#003d6d} .sw-verde{background:#2c8c5a} .sw-rojo{background:#c0392b}

/* tri√°ngulo Confianza (Objetivo -> tri√°ngulo con 3 nodos) ‚Äî SVG como data-URI (multisite-safe) */
.cf-wrap { position:relative; max-width:500px; margin:14px auto 0; }
.cf-obj { position:absolute; left:-158px; top:104px; width:116px; height:116px; border-radius:50%; background:var(–cyan); color:#fff; font-family:’Oswald’,sans-serif; font-weight:700; font-size:1.05rem; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(13,142,207,.28); }
.cf-arrow-r { position:absolute; left:-34px; top:146px; font-size:1.4rem; color:var(–gray-500); }
.cf-tri { position:relative; width:100%; height:320px; background:center / contain no-repeat url(«data:image/svg+xml;utf8,»); }
.cf-core { position:absolute; left:50%; top:58%; transform:translate(-50%,-50%); font-family:’Oswald’,sans-serif; font-size:1.7rem; text-transform:uppercase; letter-spacing:2px; color:var(–primary); }
.cf-node { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:8px; width:140px; text-align:center; }
.cf-node.n1{ left:50%; top:16%; –c:#e07b39; }
.cf-node.n2{ left:15%; top:82%; –c:#2c8c5a; }
.cf-node.n3{ left:85%; top:82%; –c:#6b4a3a; }
.cf-ic { width:56px; height:56px; border-radius:50%; border:3px dotted var(–c); background:#fff; display:flex; align-items:center; justify-content:center; font-size:1.35rem; color:var(–c); }
.cf-node span { font-size:.82rem; font-weight:600; color:var(–gray-800); line-height:1.2; }
@media(max-width:640px){ .cf-obj,.cf-arrow-r{display:none} .cf-tri{height:300px} }

/* marco normativo */
.marco-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.marco-card { background:var(–gray-100); border-radius:10px; padding:20px; border-left:3px solid var(–primary); }
.marco-card h4 { font-size:.95rem; font-weight:700; margin:0 0 6px; color:var(–gray-900); }
.marco-card h4 a { color:var(–gray-900); }
.marco-card p { font-size:.85rem; color:var(–gray-600); line-height:1.55; margin:0; }
.marco-card a { color:var(–primary); font-weight:600; }
@media(max-width:760px){ .marco-cards{grid-template-columns:1fr} }

/* ===== RELEVO GENERACIONAL ===== */
.uc-hero.relevo {
background: linear-gradient(90deg, rgba(0,39,68,.92), rgba(0,49,87,.46)),
url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/relevo-handover.png’) right center / cover;
}
.rg-intro { max-width:820px; margin:0 0 44px; }
.rg-intro p.lead { font-size:1.05rem; color:var(–gray-700); line-height:1.7; margin:0 0 16px; }
.rg-intro p.quote { font-size:1.15rem; color:var(–primary); font-style:italic; font-weight:600; margin:0; }

/* Ruta del Plan (10 pasos serpenteante) */
.ruta-info { max-width:1020px; margin:0 auto; text-align:left; }
.ruta-row { display:flex; justify-content:space-between; position:relative; gap:6px; }
.ruta-row::before { content:»; position:absolute; top:28px; left:6%; right:6%; border-top:3px dotted var(–gray-400); z-index:0; }
.ruta-row.rev { flex-direction:row-reverse; }
.ruta-turn { display:flex; justify-content:flex-end; padding-right:5.2%; }
.ruta-turn span { display:block; width:0; height:36px; border-right:3px dotted var(–gray-400); }
.ruta-node { flex:1; text-align:center; position:relative; z-index:1; padding:0 4px; }
.ruta-pin { width:58px; height:58px; border-radius:50%; border:4px solid var(–c); background:#fff; color:var(–c); font-family:’Oswald’,sans-serif; font-weight:700; font-size:1.45rem; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; position:relative; }
.ruta-pin::after { content:»; position:absolute; bottom:-11px; left:50%; transform:translateX(-50%); border-left:7px solid transparent; border-right:7px solid transparent; border-top:11px solid var(–c); }
.ruta-node h4 { font-family:’Oswald’,sans-serif; text-transform:uppercase; font-size:.9rem; letter-spacing:.3px; color:var(–gray-900); margin:0 0 6px; line-height:1.2; }
.ruta-node p { font-size:.74rem; color:var(–gray-600); line-height:1.4; margin:0; }
@media(max-width:760px){
.ruta-info { display:grid; grid-template-columns:1fr 1fr; gap:28px 14px; }
.ruta-row, .ruta-row.rev { display:contents; }
.ruta-row::before, .ruta-turn { display:none; }
.ruta-node { flex:none; }
.ruta-pin { margin-bottom:12px; }
}

/* Plan de Relevo: acorde√≥n de 5 etapas (sin JS) */
.rg-acc { border:1px solid var(–gray-200); border-radius:14px; margin-bottom:16px; overflow:hidden; background:#fff; }
.rg-acc > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; padding:20px 24px; }
.rg-acc > summary::-webkit-details-marker { display:none; }
.rg-num { width:42px; height:42px; flex-shrink:0; border-radius:50%; background:var(–gray-100); border:2px solid var(–gray-300); color:var(–gray-600); display:flex; align-items:center; justify-content:center; font-family:’Oswald’,sans-serif; font-weight:700; font-size:1.1rem; transition:all .25s; }
.rg-acc[open] .rg-num, .rg-acc > summary:hover .rg-num { background:var(–primary); border-color:var(–primary); color:#fff; }
.rg-sum-title { font-family:’Oswald’,sans-serif; font-size:1.12rem; text-transform:uppercase; letter-spacing:.4px; color:var(–gray-900); flex:1; }
.rg-acc[open] .rg-sum-title { color:var(–primary); }
.rg-acc > summary::after { content:’+’; font-size:1.6rem; font-weight:300; color:var(–primary); line-height:1; transition:transform .3s; }
.rg-acc[open] > summary::after { transform:rotate(45deg); }
.rg-body { padding:4px 26px 30px; }
.rg-pane-meta { display:block; color:var(–accent); font-weight:600; font-style:italic; font-size:.9rem; margin-bottom:6px; }
.rg-body h3 { font-family:’Oswald’,sans-serif; text-transform:uppercase; color:var(–primary); font-size:1.3rem; letter-spacing:.4px; margin:0 0 6px; }
.rg-lead { color:var(–gray-700); line-height:1.7; margin:8px 0 20px; }
.rg-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:18px; }
.rg-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:16px; }
.rg-card { background:var(–gray-100); border-radius:12px; padding:20px; border-left:4px solid var(–primary); }
.rg-card h4 { font-family:’Oswald’,sans-serif; text-transform:uppercase; font-size:.95rem; color:var(–primary); margin:0 0 8px; letter-spacing:.3px; }
.rg-card p { font-size:.88rem; color:var(–gray-700); line-height:1.6; margin:0; }
.rg-card .rg-list { margin:6px 0 0 18px; }
.rg-sub { font-family:’Oswald’,sans-serif; text-transform:uppercase; color:var(–gray-900); font-size:1.05rem; margin:22px 0 12px; letter-spacing:.3px; }
.rg-list { margin:0 0 4px 20px; color:var(–gray-700); line-height:1.8; list-style:disc; }
.rg-list li { margin-bottom:6px; font-size:.92rem; }
.rg-prog { background:var(–gray-100); border-radius:10px; padding:16px 12px; text-align:center; }
.rg-prog i { color:var(–primary); font-size:1.2rem; margin-bottom:8px; display:block; }
.rg-prog h4 { font-family:’Oswald’,sans-serif; text-transform:uppercase; font-size:.8rem; color:var(–gray-900); letter-spacing:.3px; line-height:1.2; margin:0; }
.rg-alianza { background:var(–primary); color:#fff; border-radius:12px; padding:22px; text-align:center; }
.rg-alianza h4 { color:#fff; font-family:’Oswald’,sans-serif; text-transform:uppercase; font-size:1rem; margin:0 0 6px; }
.rg-alianza p { font-size:.85rem; color:rgba(255,255,255,.9); margin:0; }
.rg-2col { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.rg-ac-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-bottom:18px; }
.rg-card.accent { border-left-color:var(–accent); }
.rg-card.accent h4 { color:var(–gray-900); }
/* etapa 4 destacada (navy) */
.rg-acc.feature { background:linear-gradient(135deg,var(–primary),var(–primary-dark)); border:none; }
.rg-acc.feature .rg-sum-title, .rg-acc.feature[open] .rg-sum-title { color:#fff; }
.rg-acc.feature .rg-num { background:rgba(255,255,255,.12); border-color:var(–accent-soft); color:var(–accent-soft); }
.rg-acc.feature[open] .rg-num { background:var(–accent); border-color:var(–accent); color:#fff; }
.rg-acc.feature > summary::after { color:var(–accent-soft); }
.rg-acc.feature .rg-body, .rg-acc.feature .rg-body p { color:rgba(255,255,255,.9); }
.rg-acc.feature .rg-body h3 { color:#fff; }
.rg-acc.feature .rg-pane-meta { color:var(–accent-soft); }
.rg-cta { display:inline-flex; align-items:center; gap:12px; background:var(–accent); color:var(–primary-dark); font-family:’Oswald’,sans-serif; text-transform:uppercase; letter-spacing:.6px; font-weight:600; font-size:1rem; padding:14px 30px; border-radius:40px; text-decoration:none; transition:transform .2s,background .2s; }
.rg-cta:hover { transform:translateY(-2px); background:var(–accent-soft); color:var(–primary-dark); }
@media(max-width:760px){ .rg-grid3,.rg-grid4,.rg-2col{grid-template-columns:1fr} }

/* ===== GESTI√ìN DEL CONOCIMIENTO ===== */
.uc-hero.gestion {
background: linear-gradient(90deg, rgba(0,39,68,.92), rgba(0,49,87,.5)),
url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/brote.png’) right center / cover;
}
/* plan de formaci√≥n (6 cards) */
.planes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.plan-card { background:#fff; border-radius:10px; border:1px solid var(–gray-200); padding:24px; text-align:center; transition:all .3s; }
.plan-card:hover { border-color:var(–primary); box-shadow:0 4px 16px rgba(0,0,0,.06); transform:translateY(-3px); }
.plan-icon { width:48px; height:48px; background:var(–gray-100); border-radius:10px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:1.2rem; color:var(–primary); }
.plan-card h4 { font-family:’Oswald’,sans-serif; text-transform:uppercase; font-size:.92rem; color:var(–gray-900); margin:0 0 6px; letter-spacing:.3px; }
.plan-card p { font-size:.82rem; color:var(–gray-600); margin:0; line-height:1.5; }
@media(max-width:760px){ .planes-grid{grid-template-columns:1fr} }
/* desarrollo de competencias (texto + imagen) */
.desarrollo-img { border-radius:12px; min-height:300px; box-shadow:0 12px 30px rgba(0,61,109,.12); background:center / cover no-repeat url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/desarrollo-competencias.png’); }
.uc-2col.top { align-items:start; }
/* metodolog√≠a (3 cards) */
.met-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:left; }
.met-card { background:#fff; border-radius:12px; padding:28px; border:1px solid var(–gray-200); }
.met-icon { width:44px; height:44px; background:var(–gray-100); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(–primary); font-size:1.1rem; }
.met-card h4 { font-family:’Oswald’,sans-serif; text-transform:uppercase; font-size:1rem; margin:0 0 8px; color:var(–gray-900); letter-spacing:.3px; }
.met-card p { font-size:.88rem; color:var(–gray-600); line-height:1.6; margin:0; }
@media(max-width:760px){ .met-grid{grid-template-columns:1fr} }
/* cifras / alcance */
.alcance-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.cifra-card { background:linear-gradient(165deg,#fff,var(–gray-100)); border-radius:16px; padding:34px 22px; border:1px solid var(–gray-200); border-top:4px solid var(–primary); transition:transform .3s,box-shadow .3s,border-color .3s; }
.cifra-card:hover { transform:translateY(-6px); box-shadow:0 16px 34px rgba(0,61,109,.14); border-top-color:var(–accent); }
.cifra-num { font-family:’Oswald’,sans-serif; font-size:3.2rem; font-weight:700; line-height:1; color:var(–primary); transition:color .3s; }
.cifra-card:hover .cifra-num { color:var(–accent); }
.cifra-label { font-size:.9rem; color:var(–gray-600); margin-top:10px; line-height:1.4; }
@media(max-width:760px){ .alcance-grid{grid-template-columns:repeat(2,1fr)} }
/* CTA Desarrollo Humano */
.dh-cta { max-width:700px; margin:0 auto; background:var(–gray-100); border-radius:16px; padding:48px 32px; border:1px solid var(–gray-200); text-align:center; }
.dh-cta .dh-top { font-size:1.6rem; color:var(–primary); margin-bottom:16px; }
.dh-cta h3 { font-family:’Oswald’,sans-serif; text-transform:uppercase; color:var(–gray-900); font-size:1.3rem; margin:0 0 10px; }
.dh-cta p { color:var(–gray-600); margin:0 0 24px; line-height:1.7; }

/* === Responsive: cuando se oculta el s√≠mbolo, el texto usa todo el ancho === */
@media (max-width: 1024px) {
.hero-banner .wp-block-columns { flex-wrap: wrap !important; }
.hero-banner .wp-block-column { flex-basis: 100% !important; max-width: 100% !important; }
}

/* === Mobile === */
@media (max-width: 768px) {
/* men√∫ m√≥vil (hamburguesa / desplegable): fondo BLANCO + letras navy === */
.ast-header-break-point .main-header-menu,
.ast-header-break-point .main-header-menu .sub-menu,
.main-header-menu.ast-nav-menu,
#ast-hf-mobile-menu,
.ast-mobile-popup-drawer,
.ast-mobile-popup-drawer .ast-mobile-popup-content,
.ast-mobile-popup-drawer .main-navigation,
.ast-mobile-popup-drawer .main-header-menu,
#ast-mobile-header,
.ast-mobile-header-content {
background-color: #ffffff !important;
background-image: none !important;
}
.ast-header-break-point .main-header-menu .menu-link,
.ast-header-break-point .main-header-menu .menu-item > a,
#ast-hf-mobile-menu .menu-link,
.ast-mobile-popup-drawer .menu-link,
.ast-mobile-popup-drawer .menu-item > a,
#ast-mobile-header .menu-link {
color: #003d6d !important;
font-weight: 600 !important;
background-color: #ffffff !important;
}
.ast-header-break-point .main-header-menu .menu-item,
.ast-mobile-popup-drawer .menu-item {
border-bottom: 1px solid #eef1f4 !important;
}
.ast-header-break-point .menu-item.current-menu-item > .menu-link,
.ast-mobile-popup-drawer .current-menu-item > .menu-link {
color: #0a5a96 !important;
}
/* flechas/√≠conos del men√∫ m√≥vil en navy */
.ast-header-break-point .ast-menu-toggle,
.ast-mobile-popup-drawer .ast-menu-toggle,
.ast-mobile-menu-trigger-fill, .ast-mobile-menu-trigger-minimal, .menu-toggle {
color: #003d6d !important;
}

.hero-banner { padding: 4rem 1rem !important; min-height: auto !important; }
.hero-features { flex-direction: column !important; gap: 0.75rem !important; align-items: flex-start !important; }
.hero-feature { text-align: left !important; justify-content: flex-start !important; }
.ast-primary-header-bar .ast-container,
.site-header .ast-container {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.site-title a::before { width: 30px !important; height: 30px !important; font-size: 0.75rem !important; margin-right: 8px !important; }
.metafora-band h2 { font-size: 1.6rem !important; }
}

/* ===== TRANSFERENCIA DEL CONOCIMIENTO ===== */
.uc-hero.transferencia {
background: linear-gradient(120deg, rgba(0,39,68,.9), rgba(0,49,87,.68)),
url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/cosecha.png’) center / cover;
}
/* === Acentos dorados (dinamismo) ‚Äî Transferencia y p√°ginas de personaje === */
.uc-hero.transferencia h1 { position:relative; display:inline-block; padding-bottom:14px; }
.uc-hero.transferencia h1::after { content:»»; position:absolute; left:0; bottom:0; width:70px; height:4px; background:var(–accent); border-radius:2px; }
.estrategia-card { border-top:3px solid var(–accent); }

/* miniaturas de estrategias de transferencia (multisite-safe, a color) */
.estrategia-thumb.transf-storytelling,
.estrategia-thumb.transf-publicaciones,
.estrategia-thumb.transf-monografias { filter:none; }
.transf-storytelling { background-image:url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/transf-storytelling.png’); }
.transf-publicaciones { background-image:url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/transf-publicaciones-1.png’); }
.transf-monografias { background-image:url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/transf-monografias-1.png’); }

/* Personajes (tarjetas con video) */
.pj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pj-card { display:block; background:#fff; border:1px solid var(–gray-200); border-top:3px solid var(–accent); border-radius:12px; overflow:hidden; color:inherit; text-decoration:none; transition:transform .3s,box-shadow .3s; }
a.pj-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.pj-thumb { position:relative; aspect-ratio:16/10; background:linear-gradient(135deg,var(–gray-200),var(–gray-300)) center / cover no-repeat; display:flex; align-items:center; justify-content:center; }
.pj-play { width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.92); color:var(–primary); display:flex; align-items:center; justify-content:center; font-size:1.1rem; box-shadow:0 4px 14px rgba(0,0,0,.18); transition:transform .25s; }
a.pj-card:hover .pj-play { transform:scale(1.08); }
.pj-play i { margin-left:3px; }
.pj-body { padding:18px 20px; }
.pj-body h4 { font-family:’Oswald’,sans-serif; text-transform:uppercase; font-size:1rem; color:var(–gray-900); margin:0 0 4px; line-height:1.25; }
.pj-cargo { font-size:.82rem; color:var(–gray-600); }
/* estado «video a√∫n no listo» */
.pj-soon { cursor:default; }
.pj-soon .pj-play { display:none; }
.pj-soon .pj-thumb::after { content:’Pr\00F3 ximamente’; position:absolute; font-family:’Oswald’,sans-serif; text-transform:uppercase; letter-spacing:.5px; font-size:.78rem; color:var(–gray-600); background:rgba(255,255,255,.85); padding:6px 12px; border-radius:20px; }
@media(max-width:760px){ .pj-grid{grid-template-columns:1fr} }

/* Filtro de personajes por tipo (CSS :target, sin JS ‚Äî multisite-safe) */
.pj-filter { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.pj-fbtn { font-family:’Oswald’,sans-serif; text-transform:uppercase; letter-spacing:.4px; font-size:.85rem; color:var(–primary); background:#fff; border:1px solid var(–gray-300); border-radius:30px; padding:9px 20px; text-decoration:none; transition:all .2s; }
.pj-fbtn:hover { background:var(–primary); color:#fff; border-color:var(–primary); }
.pj-anchor { display:block; height:0; scroll-margin-top:120px; }
.pj-empty { display:none; color:var(–gray-600); font-style:italic; padding:24px 0; }
/* al elegir una categor√≠a, ocultar las tarjetas que no son de ese tipo */
#cat-story:target ~ .pj-grid .pj-card:not(.cat-story),
#cat-pub:target ~ .pj-grid .pj-card:not(.cat-pub),
#cat-mon:target ~ .pj-grid .pj-card:not(.cat-mon) { display:none; }
/* mensaje «vac√≠o» para categor√≠as sin personajes a√∫n */
#cat-pub:target ~ .pj-empty-pub,
#cat-mon:target ~ .pj-empty-mon { display:block; }

/* ===== BARRA INSTITUCIONAL UTP (escudo + Ministerio) ‚Äî INYECTADA POR CSS =====
No necesita HTML ni el constructor de cabecera: se dibuja sola encima del
header con los dos logos como background. (Los logos NO son clickeables con
este m√©todo; si se quieren como enlaces, hay que usar la versi√≥n HTML.) */
#masthead::before {
content:»»;
display:block;
width:100%;
height:74px;
background:
url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/utp-escudo.png’) 5rem center / auto 58px no-repeat,
url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/mineducacion.png’) calc(100% – 5rem) center / auto 50px no-repeat,
#003157;
}
@media(max-width:768px){
#masthead::before {
height:52px;
background:
url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/utp-escudo.png’) 1rem center / auto 38px no-repeat,
url(‘https://academia.utp.edu.co/ecosistema-del-conocimiento/files/2026/06/mineducacion.png’) calc(100% – 1rem) center / auto 32px no-repeat,
#003157;
}
}