\/* ===================================================================
\n ECOSISTEMA DEL CONOCIMIENTO \u201a\u00c4\u00ee CSS HEADER v2 (9 jun 2026)
\n Va en: Apariencia > Personalizar > Scripts de cabecera y pie de
\n p\u221a\u00b0gina > \u00abScripts de la cabecera\u00bb. Pegar TODO (incluye ).
\n Paleta nueva UTP: navy #003d6d + dorado #c9a227 \/ Oswald + Roboto.
\n =================================================================== *\/
\n@import url(‘https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css’);
\n@import url(‘https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap’);<\/p>\n
\/* === Variables de color UTP === *\/
\n:root{
\n –primary:#003d6d; –primary-dark:#003157; –primary-light:#0a5a96;
\n –accent:#c9a227; –accent-soft:#e6c65a; –cyan:#0d8ecf;
\n –dark:#002744; –dark2:#003157;
\n –gray-100:#f8f9fa; –gray-200:#e9ecef; –gray-300:#dee2e6; –gray-400:#ced4da;
\n –gray-500:#adb5bd; –gray-600:#6c757d; –gray-700:#495057; –gray-800:#343a40; –gray-900:#212529;
\n –white:#ffffff;
\n}<\/p>\n
\/* === Tipograf\u221a\u2260a: Roboto cuerpo \/ Oswald t\u221a\u2260tulos (solo contenido) === *\/
\n.entry-content { font-family:’Roboto’, system-ui, -apple-system, sans-serif; }
\n.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
\n.entry-content .wp-block-heading,
\n.hero-banner h1, .metafora-band h2 {
\n font-family:’Oswald’,’Roboto’, sans-serif;
\n letter-spacing:.4px;
\n}<\/p>\n
\/* === STICKY NAVBAR === *\/
\n#masthead,
\n.site-header,
\n.ast-primary-header-bar {
\n position: sticky !important;
\n top: 0;
\n z-index: 999;
\n box-shadow: 0 2px 12px rgba(0,0,0,0.15);
\n}
\n\/* fondo blanco del header a TODO el ancho (todas las capas de Astra) *\/
\n#masthead,
\n.site-header,
\n.ast-main-header-wrap,
\n.main-header-bar-wrap,
\n.main-header-bar,
\n.ast-primary-header-bar,
\n.ast-above-header-wrap,
\n.ast-below-header-wrap {
\n background-color: #ffffff !important;
\n}
\n\/* el fondo de la p\u221a\u00b0gina detr\u221a\u00b0s del header en blanco (sin franjas oscuras) *\/
\nhtml, body { background-color: #ffffff !important; }<\/p>\n
\/* === Men\u221a\u222b estilo prototipo: gris medio -> navy, activo subrayado === *\/
\n.ast-primary-header-bar .main-header-menu .menu-link,
\n.main-header-menu .menu-link,
\n.ast-builder-menu .menu-link,
\n.ast-primary-header-bar a.menu-link,
\n.main-navigation .menu-item > a {
\n color: #495057 !important;
\n font-weight: 500 !important;
\n font-family: ‘Oswald’, sans-serif;
\n letter-spacing: .3px;
\n position: relative;
\n}
\n.main-header-menu .menu-link:hover,
\n.ast-builder-menu .menu-link:hover,
\n.main-navigation .menu-item > a:hover {
\n color: #003d6d !important;
\n}
\n\/* \u221a\u2260tem activo (p\u221a\u00b0gina actual): navy + subrayado *\/
\n.menu-item.current-menu-item > .menu-link,
\n.menu-item.current-menu-ancestor > .menu-link,
\n.menu-item.current-menu-item > a {
\n color: #003d6d !important;
\n font-weight: 600 !important;
\n}
\n.ast-primary-header-bar .menu-item.current-menu-item > .menu-link::after,
\n.main-header-menu .menu-item.current-menu-item > .menu-link::after {
\n content: \u00bb;
\n position: absolute;
\n left: 0; right: 0; bottom: -2px;
\n height: 2px;
\n background: #003d6d;
\n border-radius: 2px;
\n}
\n\/* submen\u221a\u222b desplegable: blanco limpio (no caja oscura) *\/
\n.main-header-menu .sub-menu,
\n.ast-builder-menu .sub-menu,
\n.ast-primary-header-bar .sub-menu {
\n background: #ffffff !important;
\n border: 1px solid #dee2e6 !important;
\n box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
\n}
\n.main-header-menu .sub-menu .menu-link,
\n.ast-builder-menu .sub-menu .menu-link,
\n.ast-primary-header-bar .sub-menu .menu-link {
\n color: #495057 !important;
\n font-weight: 500 !important;
\n}
\n.main-header-menu .sub-menu .menu-link:hover,
\n.ast-primary-header-bar .sub-menu .menu-link:hover {
\n color: #003d6d !important;
\n background: #f8f9fa !important;
\n}<\/p>\n
\/* === T\u221a\u2260tulo del sitio \u00abEcosistema del Conocimiento\u00bb visible === *\/
\n.site-title,
\n.site-title a {
\n color: #003d6d !important;
\n font-family: ‘Oswald’, sans-serif !important;
\n font-weight: 700 !important;
\n font-size: 1.15rem !important;
\n letter-spacing: .3px;
\n}<\/p>\n
\/* === Padding lateral del men\u221a\u222b === *\/
\n.ast-primary-header-bar .ast-container,
\n.main-header-bar .ast-container,
\n.site-header .ast-container {
\n padding-left: 2.5rem !important;
\n padding-right: 2.5rem !important;
\n max-width: 1400px;
\n margin: 0 auto;
\n}<\/p>\n
\/* === Fondo blanco en el contenido (fix mobile) === *\/
\n.site-content,
\n.entry-content,
\n.home .entry-content,
\n.home .ast-container {
\n background-color: #ffffff !important;
\n}<\/p>\n
\/* === Inicio: ocultar t\u221a\u2260tulo y espacio === *\/
\n.home .entry-title,
\n.home h1.entry-title,
\n.home .ast-archive-title,
\n.home .page-title,
\n.home .entry-header,
\n.home .ast-page-banner,
\n.home .ast-archive-description {
\n display: none !important;
\n}
\n.home main,
\n.home .site-content,
\n.home .ast-container,
\n.home #primary,
\n.home .ast-content-area,
\n.home .entry-content {
\n padding-top: 0 !important;
\n margin-top: 0 !important;
\n}
\n.home .entry-content > .ast-container,
\n.home .site-content > .ast-container {
\n max-width: 100% !important;
\n padding-left: 0 !important;
\n padding-right: 0 !important;
\n}<\/p>\n
\/* === P\u221a\u00b0ginas internas: ocultar el t\u221a\u2260tulo autom\u221a\u00b0tico de WP (cada p\u221a\u00b0gina tiene su hero) === *\/
\n.page .entry-header,
\n.page .entry-title,
\n.page h1.entry-title,
\n.page .ast-archive-description,
\n.page .ast-single-entry-banner,
\n.page .ast-page-banner,
\n.page .ast-archive-title,
\n.ast-page-title {
\n display: none !important;
\n}
\n.page #primary,
\n.page .ast-container,
\n.page .site-content,
\n.page .ast-content-area,
\n.page .entry-content {
\n padding-top: 0 !important;
\n margin-top: 0 !important;
\n}<\/p>\n
\/* === Badge EC === *\/
\n.site-title a {
\n display: inline-flex !important;
\n align-items: center;
\n}
\n.site-title a::before {
\n content: ‘EC’;
\n display: inline-flex;
\n align-items: center;
\n justify-content: center;
\n width: 36px;
\n height: 36px;
\n background: #003d6d;
\n color: #ffffff !important;
\n font-weight: 800;
\n font-size: 0.8rem;
\n border-radius: 8px;
\n margin-right: 12px;
\n flex-shrink: 0;
\n font-family:’Oswald’, sans-serif;
\n}<\/p>\n
\/* === HERO: gradiente navy + glows sutiles + S\u221a\u00e7MBOLO nuevo === *\/
\n\/* La red de nodos tenue de fondo (hero-net) viaja como data-URI sobre el
\n gradiente \u201a\u00c4\u00ee multisite-safe, no depende de markup extra. *\/
\n.hero-banner {
\n background:
\n url(\u00abdata:image\/svg+xml;utf8,\u00bb) center \/ cover no-repeat,
\n linear-gradient(135deg, #001f33 0%, #003d6d 50%, #0a5a96 100%) !important;
\n position: relative;
\n overflow: hidden;
\n}
\n\/* glows ambientales (dorado arriba-der + cyan abajo-izq) *\/
\n.hero-banner::before {
\n content: \u00bb;
\n position: absolute;
\n top: -40%; right: -15%;
\n width: 620px; height: 620px;
\n background: radial-gradient(circle, rgba(230,198,90,.10) 0%, transparent 70%);
\n border-radius: 50%;
\n pointer-events: none; z-index: 1;
\n}
\n.hero-banner::after {
\n content: \u00bb;
\n position: absolute;
\n bottom: -35%; left: -12%;
\n width: 460px; height: 460px;
\n background: radial-gradient(circle, rgba(13,142,207,.14) 0%, transparent 70%);
\n border-radius: 50%;
\n pointer-events: none; z-index: 1;
\n}
\n.hero-banner > * { position: relative; z-index: 2; }<\/p>\n
\/* S\u221a\u00e7MBOLO: red hexagonal de personas + n\u221a\u222bcleo de conocimiento (animado).
\n Va como background-image data-URI (sobrevive el sanitizer de WP).
\n La animaci\u221a\u2265n (pulso de nodos, anillo, part\u221a\u2260culas orbitando) viaja
\n embebida dentro del SVG, no depende del CSS de la p\u221a\u00b0gina. *\/
\n.hero-symbol {
\n min-height: 380px;
\n background-image: url(\u00abdata:image\/svg+xml;utf8,\u00bb);
\n background-repeat: no-repeat;
\n background-position: center;
\n background-size: contain;
\n}
\n@media (max-width: 1024px) { .hero-symbol { display: none !important; } }<\/p>\n
\/* === Hero features === *\/
\n.hero-features {
\n gap: 0.8rem 2rem !important;
\n max-width: 800px;
\n margin: 0 !important;
\n align-items: flex-start !important;
\n flex-wrap: wrap !important;
\n}
\n.hero-feature {
\n color: #ffffff !important;
\n margin: 0 !important;
\n display: inline-flex !important;
\n align-items: center;
\n gap: 12px;
\n font-size: 1.05rem !important;
\n font-weight: 500 !important;
\n}
\n.hero-feature i {
\n color: #e6c65a !important;
\n font-size: 1.2rem !important;
\n filter: drop-shadow(0 0 8px rgba(230,198,90,0.5));
\n}<\/p>\n
\/* === Pilares === *\/
\n.pilar-card {
\n text-align: center;
\n transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
\n background: #ffffff;
\n}
\n.pilar-icon {
\n width: 64px !important;
\n height: 64px !important;
\n background: #eef3f8;
\n color: #003d6d !important;
\n border-radius: 14px;
\n display: flex !important;
\n align-items: center;
\n justify-content: center;
\n font-size: 1.5rem;
\n margin: 0 auto 1rem !important;
\n transition: all 0.3s ease;
\n}
\n.pilar-card:hover {
\n transform: translateY(-6px);
\n box-shadow: 0 12px 32px rgba(0, 61, 109, 0.14);
\n border-color: #003d6d !important;
\n}
\n.pilar-card:hover .pilar-icon {
\n background: #003d6d;
\n color: #ffffff !important;
\n transform: scale(1.06);
\n}
\n.pilar-card:hover h3 { color: #0a5a96 !important; }<\/p>\n
\/* === FRANJA MET\u221a\u00c5FORA (Sembrar hoy para cosechar) ===
\n IMPORTANTE: reemplazar URL_COSECHA por la URL de la imagen
\n cosecha.png una vez subida a la Biblioteca de medios de WP. *\/
\n.metafora-band {
\n position: relative;
\n text-align: center;
\n color: #fff !important;
\n background: #003157 url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/cosecha.png’) center 60% \/ cover no-repeat;
\n overflow: hidden;
\n}
\n.metafora-band::before {
\n content: \u00bb;
\n position: absolute;
\n inset: 0;
\n background: linear-gradient(180deg, rgba(0,39,68,.82), rgba(0,49,87,.66));
\n z-index: 1;
\n}
\n.metafora-band > * { position: relative; z-index: 2; }
\n.metafora-band h2 {
\n text-transform: uppercase;
\n letter-spacing: 1px;
\n color: #fff !important;
\n text-shadow: 0 2px 16px rgba(0,20,40,.6);
\n}
\n.metafora-band h2 .acento { color: #e6c65a; }
\n.metafora-band p {
\n color: #fff !important;
\n text-shadow: 0 1px 12px rgba(0,20,40,.7);
\n max-width: 680px;
\n margin: 0 auto;
\n}<\/p>\n
\/* === FAQs === *\/
\n.wp-block-details.faq-item {
\n border: 1px solid #dee2e6;
\n border-radius: 8px;
\n margin-bottom: 0.75rem;
\n padding: 0;
\n transition: border-color 0.3s ease, box-shadow 0.3s ease;
\n overflow: hidden;
\n}
\n.wp-block-details.faq-item:hover {
\n border-color: #003d6d;
\n box-shadow: 0 2px 8px rgba(0, 61, 109, 0.06);
\n}
\n.wp-block-details.faq-item summary {
\n cursor: pointer;
\n padding: 1rem 1.25rem;
\n font-weight: 600;
\n color: #003d6d;
\n list-style: none;
\n position: relative;
\n padding-right: 3rem;
\n}
\n.wp-block-details.faq-item summary::-webkit-details-marker { display: none; }
\n.wp-block-details.faq-item summary:hover { background: #f8f9fa; }
\n.wp-block-details.faq-item summary::after {
\n content: ‘+’;
\n position: absolute;
\n right: 1.25rem;
\n top: 50%;
\n transform: translateY(-50%);
\n font-size: 1.5rem;
\n font-weight: 300;
\n color: #c9a227;
\n transition: transform 0.3s ease;
\n}
\n.wp-block-details.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
\n.wp-block-details.faq-item[open] summary { border-bottom: 1px solid #dee2e6; }
\n.wp-block-details.faq-item p { padding: 1rem 1.25rem; margin: 0; color: #495057; line-height: 1.7; }<\/p>\n
\/* === Botones === *\/
\n.hero-banner .wp-block-button__link,
\n.wp-block-button.is-style-accent .wp-block-button__link {
\n background-color: #c9a227 !important;
\n color: #002744 !important;
\n font-weight: 700 !important;
\n transition: all 0.25s ease !important;
\n}
\n.hero-banner .wp-block-button__link:hover,
\n.wp-block-button.is-style-accent .wp-block-button__link:hover {
\n background-color: #e6c65a !important;
\n transform: translateY(-2px);
\n box-shadow: 0 6px 16px rgba(201, 162, 39, 0.35);
\n}
\n.wp-block-button.is-style-outline .wp-block-button__link {
\n transition: all 0.25s ease;
\n border-color: #003d6d !important;
\n color: #003d6d !important;
\n}
\n.wp-block-button.is-style-outline .wp-block-button__link:hover {
\n background: #003d6d !important;
\n color: #ffffff !important;
\n}<\/p>\n
\/* =====================================================================
\n P\u221a\u00c5GINAS INTERNAS (M-TOCA y siguientes) \u201a\u00c4\u00ee diagramas nativos HTML\/CSS
\n ===================================================================== *\/
\n\/* hero de p\u221a\u00b0gina interna (full-width v\u221a\u2260a wp:group alignfull) *\/
\n.uc-hero { color: #fff; position: relative; }
\n.uc-hero.mtoca {
\n background: linear-gradient(90deg, rgba(0,39,68,.92), rgba(0,49,87,.5)),
\n url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/mtoca-aprendizaje.png’) right center \/ cover;
\n}
\n.uc-hero .uc-bread, .uc-hero .uc-bread a { color: rgba(255,255,255,.65) !important; text-decoration: none; }
\n.uc-hero .uc-bread a:hover { color: #fff !important; }
\n.uc-hero h1 { color: #fff !important; }
\n.uc-hero p { color: rgba(255,255,255,.88) !important; }
\n\/* aire entre el hero y el primer p\u221a\u00b0rrafo (p\u221a\u00b0ginas de personaje) *\/
\n.uc-hero + p { margin-top: 44px !important; }<\/p>\n
\/* secciones internas *\/
\n.uc-sec { padding: 56px 0; }
\n.uc-in { max-width: 1120px; margin: 0 auto; }
\n.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; }
\n.uc-sub { font-size:1.02rem; color:var(–gray-600); margin:0 0 36px; max-width:720px; }
\n.uc-center { text-align:center; }
\n.uc-center.uc-sub { margin-left:auto; margin-right:auto; }
\n.uc-divider { border-top:1px solid var(–gray-200); }<\/p>\n
\/* logo M-TOCA *\/
\n.mtoca-logo-wrap { display:flex; justify-content:center; margin-bottom:40px; }
\n.mtoca-logo-wrap img { max-width:420px; width:100%; height:auto; }<\/p>\n
\/* cadena andrag\u221a\u2265gica (5 esferas) *\/
\n.andragogia-chain { display:flex; justify-content:center; align-items:flex-start; position:relative; margin-top:10px; flex-wrap:wrap; gap:10px; }
\n.andragogia-chain::before { content:\u00bb; position:absolute; top:71px; left:10%; right:10%; height:3px; background:var(–gray-200); z-index:0; }
\n.andra2 { flex:1; max-width:205px; text-align:center; position:relative; z-index:1; padding:0 6px; }
\n.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); }
\n.andra2-ring::after { content:\u00bb; position:absolute; inset:-5px; border-radius:50%; border:5px solid transparent; border-top-color:var(–c); border-right-color:var(–c); transform:rotate(45deg); }
\n.andra2-ring i { font-size:1.35rem; color:var(–c); margin-bottom:3px; }
\n.andra2-num { font-family:’Oswald’,sans-serif; font-size:1.75rem; font-weight:700; color:var(–gray-900); line-height:1; }
\n.andra2 h4 { font-family:’Oswald’,sans-serif; text-transform:uppercase; font-size:1.1rem; letter-spacing:.5px; color:var(–c); margin:0 0 5px; }
\n.andra2 p { font-size:.82rem; color:var(–gray-600); line-height:1.45; margin:0; }
\n@media(max-width:760px){ .andragogia-chain::before{display:none} .andra2{flex:0 0 42%} }<\/p>\n
\/* modelo incluyente *\/
\n.incluyente-wrap { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px; }
\n.incluyente-center { grid-column:1\/-1; text-align:center; margin-bottom:8px; }
\n.incluyente-center h3 { font-family:’Oswald’,sans-serif; font-size:1.5rem; text-transform:uppercase; color:var(–primary); letter-spacing:1px; margin:0; }
\n.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; }
\n.incluyente-chip i { color:var(–primary); font-size:1.1rem; }
\n@media(max-width:760px){ .incluyente-wrap{grid-template-columns:1fr} }<\/p>\n
\/* libros *\/
\n.libros-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
\n.libro-card { display:flex; gap:20px; background:#fff; border:1px solid var(–gray-200); border-radius:12px; padding:24px; align-items:center; }
\n.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; }
\n.libro-cover i { font-size:1.8rem; color:var(–primary); }
\n.libro-info h3 { font-family:’Oswald’,sans-serif; font-size:1.05rem; text-transform:uppercase; color:var(–gray-900); margin:0 0 6px; }
\n.libro-info p { font-size:.88rem; color:var(–gray-600); margin:0 0 12px; }
\n@media(max-width:760px){ .libros-grid{grid-template-columns:1fr} }<\/p>\n
\/* videos *\/
\n.videos-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
\n.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; }
\n.video-ph i { font-size:3rem; color:var(–gray-400); }
\n.video-cap { font-size:.9rem; color:var(–gray-600); margin-top:10px; text-align:center; }
\n@media(max-width:760px){ .videos-grid{grid-template-columns:1fr} }<\/p>\n
\/* bot\u221a\u2265n peque\u221a\u00b1o *\/
\n.uc-btn { display:inline-block; padding:11px 24px; border-radius:6px; font-weight:600; font-size:.9rem; text-decoration:none; transition:all .25s; }
\n.uc-btn-primary { background:var(–primary); color:#fff; }
\n.uc-btn-primary:hover { background:var(–primary-light); color:#fff; }<\/p>\n
\/* ===== TRANSFORMACI\u221a\u00ecN CULTURAL ===== *\/
\n.uc-hero.transformacion {
\n background: linear-gradient(90deg, rgba(0,39,68,.92), rgba(0,49,87,.5)),
\n url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/cultura-valores.png’) right center \/ cover;
\n}
\n\/* estrategias (5 cards, miniatura B&N -> color al hover) *\/
\n.estrategias-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
\n.estrategia-card { background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(–gray-200); transition:all .3s; }
\n.estrategia-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.08); }
\n.estrategia-thumb { height:160px; background:var(–gray-300) center \/ cover; filter:grayscale(1) brightness(1.3) contrast(.85); transition:filter .35s; }
\n.estrategia-card:hover .estrategia-thumb { filter:grayscale(0); }
\n.estrategia-card .card-body { padding:20px; }
\n.estrategia-card h3 { font-family:’Oswald’,sans-serif; text-transform:uppercase; font-size:1rem; color:var(–gray-900); margin:0 0 8px; }
\n.estrategia-card p { font-size:.88rem; color:var(–gray-600); line-height:1.6; margin:0; }
\n.estrategia-card a { color:var(–primary); font-weight:600; }
\n\/* miniaturas de estrategias por clase (multisite-safe, sin style inline) *\/
\n.estr-clima { background-image:url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/estr-clima.png’); }
\n.estr-integridad { background-image:url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/estr-integridad.png’); }
\n.estr-simbolos { background-image:url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/estr-simbolos.png’); }
\n.estr-liderazgo { background-image:url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/estr-liderazgo.png’); }
\n.estr-servicio { background-image:url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/estr-servicio.png’); }
\n@media(max-width:760px){ .estrategias-grid{grid-template-columns:1fr} }<\/p>\n
\/* valores (7 + C\u221a\u2265digo de Integridad) *\/
\n.valores-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
\n.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; }
\n.valor-card:hover { transform:translateY(-5px); box-shadow:0 14px 30px rgba(0,61,109,.12); }
\n.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; }
\n.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; }
\n.valor-card p { font-size:.85rem; color:var(–gray-600); line-height:1.6; margin:0; }
\n.valor-card.cod { background:var(–primary); border-top-color:var(–accent); }
\n.valor-card.cod .valor-icon { background:rgba(255,255,255,.12); color:var(–accent-soft); }
\n.valor-card.cod h4 { color:var(–accent-soft); }
\n.valor-card.cod p { color:rgba(255,255,255,.85); }
\n@media(max-width:900px){ .valores-grid{grid-template-columns:repeat(2,1fr)} }
\n@media(max-width:520px){ .valores-grid{grid-template-columns:1fr} }<\/p>\n
\/* diagrama Confianza *\/
\n.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; }
\n.confianza-box::before { content:\u00bb; 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%; }
\n.confianza-nodes { display:flex; justify-content:center; gap:48px; flex-wrap:wrap; margin:0 0 28px; position:relative; z-index:2; }
\n.confianza-node { display:flex; flex-direction:column; align-items:center; gap:10px; }
\n.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); }
\n.confianza-node span { font-size:.9rem; font-weight:500; }
\n.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; }<\/p>\n
\/* sello + 2 columnas gen\u221a\u00a9rico *\/
\n.uc-2col { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; margin-bottom:40px; }
\n.uc-2col h3 { font-family:’Oswald’,sans-serif; text-transform:uppercase; color:var(–primary); margin:0 0 12px; }
\n.uc-2col p { color:var(–gray-600); line-height:1.7; margin:0; }
\n@media(max-width:760px){ .uc-2col{grid-template-columns:1fr} }
\n.sello-wrap { display:flex; align-items:center; gap:24px; background:var(–gray-100); border-radius:14px; padding:24px; flex-wrap:wrap; }
\n.sello-wrap img { width:120px; height:auto; flex-shrink:0; }
\n.sello-wrap h3 { font-family:’Oswald’,sans-serif; text-transform:uppercase; color:var(–primary); margin:0 0 8px; }
\n.sello-wrap p { color:var(–gray-600); line-height:1.7; margin:0 0 10px; }<\/p>\n
\/* estrategias numeradas (timeline) \u201a\u00c4\u00ee versi\u221a\u2265n actualizada Transformaci\u221a\u2265n *\/
\n.estrat { position:relative; padding-left:88px; margin-bottom:44px; }
\n.estrat::after { content:\u00bb; position:absolute; left:25px; top:62px; bottom:-44px; width:2px; background:var(–gray-200); }
\n.estrat:last-child::after { display:none; }
\n.estrat-head { display:flex; align-items:center; min-height:52px; margin-bottom:18px; }
\n.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; }
\n.estrat-head h3 { font-family:’Oswald’,sans-serif; text-transform:uppercase; color:var(–primary); font-size:1.4rem; letter-spacing:.4px; margin:0; }
\n.estrat-2col { display:grid; grid-template-columns:1.15fr 1fr; gap:28px; align-items:center; }
\n.estrat > p { color:var(–gray-700); line-height:1.7; }
\n.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; }
\n@media(max-width:760px){ .estrat{padding-left:62px} .estrat-2col{grid-template-columns:1fr} }<\/p>\n
\/* swatches de la bandera *\/
\n.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); }
\n.sw-amarillo{background:#c9a227} .sw-blanco{background:#fff} .sw-azul{background:#003d6d} .sw-verde{background:#2c8c5a} .sw-rojo{background:#c0392b}<\/p>\n
\/* tri\u221a\u00b0ngulo Confianza (Objetivo -> tri\u221a\u00b0ngulo con 3 nodos) \u201a\u00c4\u00ee SVG como data-URI (multisite-safe) *\/
\n.cf-wrap { position:relative; max-width:500px; margin:14px auto 0; }
\n.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); }
\n.cf-arrow-r { position:absolute; left:-34px; top:146px; font-size:1.4rem; color:var(–gray-500); }
\n.cf-tri { position:relative; width:100%; height:320px; background:center \/ contain no-repeat url(\u00abdata:image\/svg+xml;utf8,\u00bb); }
\n.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); }
\n.cf-node { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:8px; width:140px; text-align:center; }
\n.cf-node.n1{ left:50%; top:16%; –c:#e07b39; }
\n.cf-node.n2{ left:15%; top:82%; –c:#2c8c5a; }
\n.cf-node.n3{ left:85%; top:82%; –c:#6b4a3a; }
\n.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); }
\n.cf-node span { font-size:.82rem; font-weight:600; color:var(–gray-800); line-height:1.2; }
\n@media(max-width:640px){ .cf-obj,.cf-arrow-r{display:none} .cf-tri{height:300px} }<\/p>\n
\/* marco normativo *\/
\n.marco-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
\n.marco-card { background:var(–gray-100); border-radius:10px; padding:20px; border-left:3px solid var(–primary); }
\n.marco-card h4 { font-size:.95rem; font-weight:700; margin:0 0 6px; color:var(–gray-900); }
\n.marco-card h4 a { color:var(–gray-900); }
\n.marco-card p { font-size:.85rem; color:var(–gray-600); line-height:1.55; margin:0; }
\n.marco-card a { color:var(–primary); font-weight:600; }
\n@media(max-width:760px){ .marco-cards{grid-template-columns:1fr} }<\/p>\n
\/* ===== RELEVO GENERACIONAL ===== *\/
\n.uc-hero.relevo {
\n background: linear-gradient(90deg, rgba(0,39,68,.92), rgba(0,49,87,.46)),
\n url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/relevo-handover.png’) right center \/ cover;
\n}
\n.rg-intro { max-width:820px; margin:0 0 44px; }
\n.rg-intro p.lead { font-size:1.05rem; color:var(–gray-700); line-height:1.7; margin:0 0 16px; }
\n.rg-intro p.quote { font-size:1.15rem; color:var(–primary); font-style:italic; font-weight:600; margin:0; }<\/p>\n
\/* Ruta del Plan (10 pasos serpenteante) *\/
\n.ruta-info { max-width:1020px; margin:0 auto; text-align:left; }
\n.ruta-row { display:flex; justify-content:space-between; position:relative; gap:6px; }
\n.ruta-row::before { content:\u00bb; position:absolute; top:28px; left:6%; right:6%; border-top:3px dotted var(–gray-400); z-index:0; }
\n.ruta-row.rev { flex-direction:row-reverse; }
\n.ruta-turn { display:flex; justify-content:flex-end; padding-right:5.2%; }
\n.ruta-turn span { display:block; width:0; height:36px; border-right:3px dotted var(–gray-400); }
\n.ruta-node { flex:1; text-align:center; position:relative; z-index:1; padding:0 4px; }
\n.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; }
\n.ruta-pin::after { content:\u00bb; 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); }
\n.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; }
\n.ruta-node p { font-size:.74rem; color:var(–gray-600); line-height:1.4; margin:0; }
\n@media(max-width:760px){
\n .ruta-info { display:grid; grid-template-columns:1fr 1fr; gap:28px 14px; }
\n .ruta-row, .ruta-row.rev { display:contents; }
\n .ruta-row::before, .ruta-turn { display:none; }
\n .ruta-node { flex:none; }
\n .ruta-pin { margin-bottom:12px; }
\n}<\/p>\n
\/* Plan de Relevo: acorde\u221a\u2265n de 5 etapas (sin JS) *\/
\n.rg-acc { border:1px solid var(–gray-200); border-radius:14px; margin-bottom:16px; overflow:hidden; background:#fff; }
\n.rg-acc > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; padding:20px 24px; }
\n.rg-acc > summary::-webkit-details-marker { display:none; }
\n.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; }
\n.rg-acc[open] .rg-num, .rg-acc > summary:hover .rg-num { background:var(–primary); border-color:var(–primary); color:#fff; }
\n.rg-sum-title { font-family:’Oswald’,sans-serif; font-size:1.12rem; text-transform:uppercase; letter-spacing:.4px; color:var(–gray-900); flex:1; }
\n.rg-acc[open] .rg-sum-title { color:var(–primary); }
\n.rg-acc > summary::after { content:’+’; font-size:1.6rem; font-weight:300; color:var(–primary); line-height:1; transition:transform .3s; }
\n.rg-acc[open] > summary::after { transform:rotate(45deg); }
\n.rg-body { padding:4px 26px 30px; }
\n.rg-pane-meta { display:block; color:var(–accent); font-weight:600; font-style:italic; font-size:.9rem; margin-bottom:6px; }
\n.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; }
\n.rg-lead { color:var(–gray-700); line-height:1.7; margin:8px 0 20px; }
\n.rg-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:18px; }
\n.rg-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:16px; }
\n.rg-card { background:var(–gray-100); border-radius:12px; padding:20px; border-left:4px solid var(–primary); }
\n.rg-card h4 { font-family:’Oswald’,sans-serif; text-transform:uppercase; font-size:.95rem; color:var(–primary); margin:0 0 8px; letter-spacing:.3px; }
\n.rg-card p { font-size:.88rem; color:var(–gray-700); line-height:1.6; margin:0; }
\n.rg-card .rg-list { margin:6px 0 0 18px; }
\n.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; }
\n.rg-list { margin:0 0 4px 20px; color:var(–gray-700); line-height:1.8; list-style:disc; }
\n.rg-list li { margin-bottom:6px; font-size:.92rem; }
\n.rg-prog { background:var(–gray-100); border-radius:10px; padding:16px 12px; text-align:center; }
\n.rg-prog i { color:var(–primary); font-size:1.2rem; margin-bottom:8px; display:block; }
\n.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; }
\n.rg-alianza { background:var(–primary); color:#fff; border-radius:12px; padding:22px; text-align:center; }
\n.rg-alianza h4 { color:#fff; font-family:’Oswald’,sans-serif; text-transform:uppercase; font-size:1rem; margin:0 0 6px; }
\n.rg-alianza p { font-size:.85rem; color:rgba(255,255,255,.9); margin:0; }
\n.rg-2col { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
\n.rg-ac-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-bottom:18px; }
\n.rg-card.accent { border-left-color:var(–accent); }
\n.rg-card.accent h4 { color:var(–gray-900); }
\n\/* etapa 4 destacada (navy) *\/
\n.rg-acc.feature { background:linear-gradient(135deg,var(–primary),var(–primary-dark)); border:none; }
\n.rg-acc.feature .rg-sum-title, .rg-acc.feature[open] .rg-sum-title { color:#fff; }
\n.rg-acc.feature .rg-num { background:rgba(255,255,255,.12); border-color:var(–accent-soft); color:var(–accent-soft); }
\n.rg-acc.feature[open] .rg-num { background:var(–accent); border-color:var(–accent); color:#fff; }
\n.rg-acc.feature > summary::after { color:var(–accent-soft); }
\n.rg-acc.feature .rg-body, .rg-acc.feature .rg-body p { color:rgba(255,255,255,.9); }
\n.rg-acc.feature .rg-body h3 { color:#fff; }
\n.rg-acc.feature .rg-pane-meta { color:var(–accent-soft); }
\n.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; }
\n.rg-cta:hover { transform:translateY(-2px); background:var(–accent-soft); color:var(–primary-dark); }
\n@media(max-width:760px){ .rg-grid3,.rg-grid4,.rg-2col{grid-template-columns:1fr} }<\/p>\n
\/* ===== GESTI\u221a\u00ecN DEL CONOCIMIENTO ===== *\/
\n.uc-hero.gestion {
\n background: linear-gradient(90deg, rgba(0,39,68,.92), rgba(0,49,87,.5)),
\n url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/brote.png’) right center \/ cover;
\n}
\n\/* plan de formaci\u221a\u2265n (6 cards) *\/
\n.planes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
\n.plan-card { background:#fff; border-radius:10px; border:1px solid var(–gray-200); padding:24px; text-align:center; transition:all .3s; }
\n.plan-card:hover { border-color:var(–primary); box-shadow:0 4px 16px rgba(0,0,0,.06); transform:translateY(-3px); }
\n.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); }
\n.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; }
\n.plan-card p { font-size:.82rem; color:var(–gray-600); margin:0; line-height:1.5; }
\n@media(max-width:760px){ .planes-grid{grid-template-columns:1fr} }
\n\/* desarrollo de competencias (texto + imagen) *\/
\n.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’); }
\n.uc-2col.top { align-items:start; }
\n\/* metodolog\u221a\u2260a (3 cards) *\/
\n.met-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:left; }
\n.met-card { background:#fff; border-radius:12px; padding:28px; border:1px solid var(–gray-200); }
\n.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; }
\n.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; }
\n.met-card p { font-size:.88rem; color:var(–gray-600); line-height:1.6; margin:0; }
\n@media(max-width:760px){ .met-grid{grid-template-columns:1fr} }
\n\/* cifras \/ alcance *\/
\n.alcance-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
\n.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; }
\n.cifra-card:hover { transform:translateY(-6px); box-shadow:0 16px 34px rgba(0,61,109,.14); border-top-color:var(–accent); }
\n.cifra-num { font-family:’Oswald’,sans-serif; font-size:3.2rem; font-weight:700; line-height:1; color:var(–primary); transition:color .3s; }
\n.cifra-card:hover .cifra-num { color:var(–accent); }
\n.cifra-label { font-size:.9rem; color:var(–gray-600); margin-top:10px; line-height:1.4; }
\n@media(max-width:760px){ .alcance-grid{grid-template-columns:repeat(2,1fr)} }
\n\/* CTA Desarrollo Humano *\/
\n.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; }
\n.dh-cta .dh-top { font-size:1.6rem; color:var(–primary); margin-bottom:16px; }
\n.dh-cta h3 { font-family:’Oswald’,sans-serif; text-transform:uppercase; color:var(–gray-900); font-size:1.3rem; margin:0 0 10px; }
\n.dh-cta p { color:var(–gray-600); margin:0 0 24px; line-height:1.7; }<\/p>\n
\/* === Responsive: cuando se oculta el s\u221a\u2260mbolo, el texto usa todo el ancho === *\/
\n@media (max-width: 1024px) {
\n .hero-banner .wp-block-columns { flex-wrap: wrap !important; }
\n .hero-banner .wp-block-column { flex-basis: 100% !important; max-width: 100% !important; }
\n}<\/p>\n
\/* === Mobile === *\/
\n@media (max-width: 768px) {
\n \/* men\u221a\u222b m\u221a\u2265vil (hamburguesa \/ desplegable): fondo BLANCO + letras navy === *\/
\n .ast-header-break-point .main-header-menu,
\n .ast-header-break-point .main-header-menu .sub-menu,
\n .main-header-menu.ast-nav-menu,
\n #ast-hf-mobile-menu,
\n .ast-mobile-popup-drawer,
\n .ast-mobile-popup-drawer .ast-mobile-popup-content,
\n .ast-mobile-popup-drawer .main-navigation,
\n .ast-mobile-popup-drawer .main-header-menu,
\n #ast-mobile-header,
\n .ast-mobile-header-content {
\n background-color: #ffffff !important;
\n background-image: none !important;
\n }
\n .ast-header-break-point .main-header-menu .menu-link,
\n .ast-header-break-point .main-header-menu .menu-item > a,
\n #ast-hf-mobile-menu .menu-link,
\n .ast-mobile-popup-drawer .menu-link,
\n .ast-mobile-popup-drawer .menu-item > a,
\n #ast-mobile-header .menu-link {
\n color: #003d6d !important;
\n font-weight: 600 !important;
\n background-color: #ffffff !important;
\n }
\n .ast-header-break-point .main-header-menu .menu-item,
\n .ast-mobile-popup-drawer .menu-item {
\n border-bottom: 1px solid #eef1f4 !important;
\n }
\n .ast-header-break-point .menu-item.current-menu-item > .menu-link,
\n .ast-mobile-popup-drawer .current-menu-item > .menu-link {
\n color: #0a5a96 !important;
\n }
\n \/* flechas\/\u221a\u2260conos del men\u221a\u222b m\u221a\u2265vil en navy *\/
\n .ast-header-break-point .ast-menu-toggle,
\n .ast-mobile-popup-drawer .ast-menu-toggle,
\n .ast-mobile-menu-trigger-fill, .ast-mobile-menu-trigger-minimal, .menu-toggle {
\n color: #003d6d !important;
\n }<\/p>\n
.hero-banner { padding: 4rem 1rem !important; min-height: auto !important; }
\n .hero-features { flex-direction: column !important; gap: 0.75rem !important; align-items: flex-start !important; }
\n .hero-feature { text-align: left !important; justify-content: flex-start !important; }
\n .ast-primary-header-bar .ast-container,
\n .site-header .ast-container {
\n padding-left: 1rem !important;
\n padding-right: 1rem !important;
\n }
\n .site-title a::before { width: 30px !important; height: 30px !important; font-size: 0.75rem !important; margin-right: 8px !important; }
\n .metafora-band h2 { font-size: 1.6rem !important; }
\n}<\/p>\n
\/* ===== TRANSFERENCIA DEL CONOCIMIENTO ===== *\/
\n.uc-hero.transferencia {
\n background: linear-gradient(120deg, rgba(0,39,68,.9), rgba(0,49,87,.68)),
\n url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/cosecha.png’) center \/ cover;
\n}
\n\/* === Acentos dorados (dinamismo) \u201a\u00c4\u00ee Transferencia y p\u221a\u00b0ginas de personaje === *\/
\n.uc-hero.transferencia h1 { position:relative; display:inline-block; padding-bottom:14px; }
\n.uc-hero.transferencia h1::after { content:\u00bb\u00bb; position:absolute; left:0; bottom:0; width:70px; height:4px; background:var(–accent); border-radius:2px; }
\n.estrategia-card { border-top:3px solid var(–accent); }<\/p>\n
\/* miniaturas de estrategias de transferencia (multisite-safe, a color) *\/
\n.estrategia-thumb.transf-storytelling,
\n.estrategia-thumb.transf-publicaciones,
\n.estrategia-thumb.transf-monografias { filter:none; }
\n.transf-storytelling { background-image:url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/transf-storytelling.png’); }
\n.transf-publicaciones { background-image:url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/transf-publicaciones-1.png’); }
\n.transf-monografias { background-image:url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/transf-monografias-1.png’); }<\/p>\n
\/* Personajes (tarjetas con video) *\/
\n.pj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
\n.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; }
\na.pj-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.08); }
\n.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; }
\n.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; }
\na.pj-card:hover .pj-play { transform:scale(1.08); }
\n.pj-play i { margin-left:3px; }
\n.pj-body { padding:18px 20px; }
\n.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; }
\n.pj-cargo { font-size:.82rem; color:var(–gray-600); }
\n\/* estado \u00abvideo a\u221a\u222bn no listo\u00bb *\/
\n.pj-soon { cursor:default; }
\n.pj-soon .pj-play { display:none; }
\n.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; }
\n@media(max-width:760px){ .pj-grid{grid-template-columns:1fr} }<\/p>\n
\/* Filtro de personajes por tipo (CSS :target, sin JS \u201a\u00c4\u00ee multisite-safe) *\/
\n.pj-filter { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
\n.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; }
\n.pj-fbtn:hover { background:var(–primary); color:#fff; border-color:var(–primary); }
\n.pj-anchor { display:block; height:0; scroll-margin-top:120px; }
\n.pj-empty { display:none; color:var(–gray-600); font-style:italic; padding:24px 0; }
\n\/* al elegir una categor\u221a\u2260a, ocultar las tarjetas que no son de ese tipo *\/
\n#cat-story:target ~ .pj-grid .pj-card:not(.cat-story),
\n#cat-pub:target ~ .pj-grid .pj-card:not(.cat-pub),
\n#cat-mon:target ~ .pj-grid .pj-card:not(.cat-mon) { display:none; }
\n\/* mensaje \u00abvac\u221a\u2260o\u00bb para categor\u221a\u2260as sin personajes a\u221a\u222bn *\/
\n#cat-pub:target ~ .pj-empty-pub,
\n#cat-mon:target ~ .pj-empty-mon { display:block; }<\/p>\n
\/* ===== BARRA INSTITUCIONAL UTP (escudo + Ministerio) \u201a\u00c4\u00ee INYECTADA POR CSS =====
\n No necesita HTML ni el constructor de cabecera: se dibuja sola encima del
\n header con los dos logos como background. (Los logos NO son clickeables con
\n este m\u221a\u00a9todo; si se quieren como enlaces, hay que usar la versi\u221a\u2265n HTML.) *\/
\n#masthead::before {
\n content:\u00bb\u00bb;
\n display:block;
\n width:100%;
\n height:74px;
\n background:
\n url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/utp-escudo.png’) 5rem center \/ auto 58px no-repeat,
\n url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/mineducacion.png’) calc(100% – 5rem) center \/ auto 50px no-repeat,
\n #003157;
\n}
\n@media(max-width:768px){
\n #masthead::before {
\n height:52px;
\n background:
\n url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/utp-escudo.png’) 1rem center \/ auto 38px no-repeat,
\n url(‘https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/files\/2026\/06\/mineducacion.png’) calc(100% – 1rem) center \/ auto 32px no-repeat,
\n #003157;
\n }
\n}<\/p>\n","protected":false},"excerpt":{"rendered":"
\/* =================================================================== ECOSISTEMA DEL CONOCIMIENTO \u201a\u00c4\u00ee CSS HEADER v2 (9 jun 2026) Va en: Apariencia > Personalizar > Scripts de cabecera y pie de p\u221a\u00b0gina > \u00abScripts de la cabecera\u00bb. […]<\/p>\n","protected":false},"author":1968,"featured_media":0,"parent":72,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-178","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/wp-json\/wp\/v2\/pages\/178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/wp-json\/wp\/v2\/users\/1968"}],"replies":[{"embeddable":true,"href":"https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/wp-json\/wp\/v2\/comments?post=178"}],"version-history":[{"count":4,"href":"https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/wp-json\/wp\/v2\/pages\/178\/revisions"}],"predecessor-version":[{"id":212,"href":"https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/wp-json\/wp\/v2\/pages\/178\/revisions\/212"}],"up":[{"embeddable":true,"href":"https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/wp-json\/wp\/v2\/pages\/72"}],"wp:attachment":[{"href":"https:\/\/academia.utp.edu.co\/ecosistema-del-conocimiento\/wp-json\/wp\/v2\/media?parent=178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}