fanfuso/IDE-Demo-B
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rf-v4.12-somos finish

Browse Source
This commit is contained in:
fanfuso
2026-10-09 22:17:59 -03:00
parent 34a251efb9
commit 38c85162c2
35 changed files with 1622 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/iconos/cohete_color.svg
+12
View File
@@ -0,0 +1,12 @@
<?xml version='1.0' encoding='utf-8'?>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24px" height="24px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 0.68 0.68">
<g id="Capa_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer" />
<g id="_2976967631392">
<path fill="currentColor" d="M0.57 0.19c-0.01,0.03 -0.04,0.05 -0.08,0.04 -0.03,-0.01 -0.05,-0.04 -0.04,-0.08 0.02,-0.08 0.14,-0.04 0.12,0.04zm-0.28 -0.02c-0.01,0.01 -0.02,0.03 -0.02,0.05 -0.01,0.01 -0.02,0.03 -0.03,0.05 0,0.02 -0.01,0.03 -0.01,0.05 -0.01,0.02 -0.02,0.05 -0.01,0.06 0.04,0.01 0.07,0.04 0.08,0.09 0.02,0 0.09,-0.03 0.11,-0.03 0.04,-0.02 0.07,-0.03 0.1,-0.05 0.09,-0.06 0.16,-0.14 0.17,-0.25 0,-0.04 0,-0.1 -0.02,-0.12 -0.02,-0.02 -0.09,-0.02 -0.12,-0.02 -0.08,0.01 -0.14,0.04 -0.19,0.09 -0.02,0.02 -0.04,0.05 -0.06,0.08z" />
<path fill="currentColor" fill-opacity="0.501961" d="M0.3 0.47c0,0.03 -0.01,0.13 0,0.16 0.01,0.01 0.03,0.03 0.06,0.01 0.01,0 0.02,-0.01 0.02,-0.01 0.04,-0.02 0.11,-0.06 0.12,-0.08 0.02,-0.03 0.01,-0.13 0.01,-0.16 -0.03,0.02 -0.06,0.03 -0.1,0.05 -0.02,0 -0.09,0.03 -0.11,0.03z" />
<path fill="currentColor" fill-opacity="0.501961" d="M0.16 0.57c-0.01,0.02 -0.03,0.03 -0.06,0.03 -0.03,0.01 -0.03,-0.02 -0.02,-0.05 0.02,-0.06 0.1,-0.02 0.08,0.02zm0.07 0.01c0.02,-0.07 -0.04,-0.13 -0.1,-0.13 -0.13,-0.01 -0.14,0.19 -0.13,0.21 0.02,0.03 0.07,0.02 0.1,0.02 0.07,-0.02 0.12,-0.04 0.13,-0.1z" />
<path fill="currentColor" fill-opacity="0.501961" d="M0.22 0.38c-0.01,-0.01 0,-0.04 0.01,-0.06 0,-0.02 0.01,-0.03 0.01,-0.05 0.01,-0.02 0.02,-0.04 0.03,-0.05 0,-0.02 0.01,-0.04 0.02,-0.05 -0.04,0.01 -0.12,-0.01 -0.16,0.01 -0.02,0.01 -0.04,0.06 -0.07,0.09 -0.01,0.04 -0.04,0.06 -0.02,0.09 0,0.01 0.01,0.01 0.02,0.02 0.01,0.01 0.13,0 0.16,0z" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

assets/iconos/escuela_color.svg
+17
View File
@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="61px" height="48px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 3.25 2.57"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
<g id="Capa_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_3033909382768">
<path fill="#275868" fill-opacity="0.501961" d="M1.01 0.64c0.05,0.04 0.12,0.04 0.24,0.17 0.19,0.18 0.25,0.49 0.15,0.74 -0.03,0.05 -0.06,0.09 -0.07,0.13 0.04,0.04 0.19,0.09 0.29,0.22 0.02,-0.03 0.21,-0.01 0.26,-0.01 0.01,-0.14 -0.03,-0.25 0.08,-0.32 0.07,-0.04 0.25,-0.02 0.35,-0.02 0.1,0 0.28,-0.03 0.35,0.03 0.11,0.09 0.05,0.17 0.08,0.31 0.05,0 0.11,0.01 0.16,-0.01l0 -1.52c-0.04,-0.01 -1.82,-0.02 -1.87,0 -0.01,0.06 0.01,0.25 -0.02,0.28z"/>
<path fill="#275868" d="M1.01 0.64c0.03,-0.03 0.01,-0.22 0.02,-0.28 0.05,-0.02 1.83,-0.01 1.87,0l0 1.52c-0.05,0.02 -0.11,0.01 -0.16,0.01l-0.86 0c-0.05,0 -0.24,-0.02 -0.26,0.01 0.01,0.02 0.05,0.07 0.09,0.15 0.02,0.04 0.05,0.15 0.07,0.17 0.26,0.02 0.58,0.01 0.85,0.01 0.13,0 0.3,0.02 0.41,-0.03 0.09,-0.04 0.17,-0.12 0.19,-0.23 0.03,-0.09 0.03,-1.59 0.01,-1.69 -0.07,-0.32 -0.39,-0.27 -0.59,-0.27 -0.23,0 -1.59,-0.02 -1.7,0 -0.26,0.07 -0.29,0.3 -0.26,0.59 0.05,0.02 0.11,0 0.17,0.01 0.05,0.01 0.11,0.03 0.15,0.03z"/>
<path fill="#275868" d="M0.43 1.89c-0.16,0.02 -0.28,0.13 -0.34,0.22 -0.07,0.1 -0.14,0.32 -0.04,0.41 0.08,0.07 0.4,0.05 0.51,0.05 0.19,0 0.37,0 0.56,0 0.18,0 0.39,0.04 0.42,-0.14 0.02,-0.16 -0.08,-0.33 -0.15,-0.4 -0.11,-0.1 -0.22,-0.14 -0.42,-0.14 -0.15,0 -0.41,-0.02 -0.54,0z"/>
<path fill="#275868" d="M0.69 0.87c-0.58,0.14 -0.37,0.94 0.17,0.84 0.2,-0.05 0.39,-0.25 0.33,-0.51 -0.04,-0.2 -0.25,-0.39 -0.5,-0.33z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

assets/iconos/lupa_color.svg
+12
View File
@@ -0,0 +1,12 @@
<?xml version='1.0' encoding='utf-8'?>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24px" height="24px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 0.51 0.51">
<g id="Capa_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer" />
<g id="_2976456766784">
<path fill="currentColor" d="M0.15 0.06c0.04,-0.01 0.08,0 0.11,0.01 0.07,0.05 0.08,0.21 -0.05,0.24 -0.07,0.01 -0.15,-0.02 -0.16,-0.1 -0.01,-0.08 0.02,-0.14 0.1,-0.15zm0.12 0.28l0.01 -0.01c0.02,-0.01 0.04,-0.03 0.05,-0.05l0.01 0c0,-0.01 0,0 0,-0.01 0,-0.01 0.01,-0.03 0.02,-0.06 0,-0.02 0,-0.05 -0.01,-0.08 0,-0.04 -0.03,-0.07 -0.06,-0.1 -0.1,-0.07 -0.28,-0.02 -0.29,0.13 -0.01,0.14 0.08,0.21 0.21,0.2 0.03,-0.01 0.04,-0.01 0.06,-0.02z" />
<path fill="currentColor" d="M0.37 0.29c0,0 0.01,0 0,0 0,0 0,0 0,0 0,0.01 0,0.01 0,0.01 -0.01,0.02 0,0.03 0.01,0.04 0.02,0.01 0.07,0.04 0.08,0.06 0.02,0.05 -0.05,0.09 -0.08,0.04l-0.03 -0.04c-0.02,-0.03 -0.03,-0.04 -0.06,-0.03 0,0 0,0 0,0l0 0c0,0.01 0,0.01 0,0.01 -0.01,0.01 -0.01,0.02 0,0.03 0.02,0.02 0.05,0.07 0.06,0.08 0.04,0.03 0.1,0.03 0.14,0 0.03,-0.04 0.03,-0.1 0,-0.14 -0.02,-0.01 -0.06,-0.04 -0.08,-0.06 -0.01,-0.01 -0.02,-0.01 -0.04,0z" />
<path fill="currentColor" fill-opacity="0.501961" d="M0.27 0.34c0.01,0.01 0.02,0.02 0.02,0.03 0,0 0,0 0,0 0,0 0,0 0,0l0 0.01c0,0 0,0 0,-0.01l0 0c0,0 0,0 0,0 0.03,-0.01 0.04,0 0.06,0.03l0.03 0.04c0.03,0.05 0.1,0.01 0.08,-0.04 -0.01,-0.02 -0.06,-0.05 -0.08,-0.06 -0.01,-0.01 -0.02,-0.02 -0.01,-0.04 0,0 0,0 0,-0.01 0,0 0,0 0,0 0.01,0 0,0 0,0l0 0c0,0 0,0 0,0 0,0 0,0 0,0.01 -0.01,-0.01 -0.01,-0.01 -0.02,-0.02 0,0 -0.01,0 -0.01,-0.01 0,0.01 0,0 0,0.01l-0.01 0c-0.01,0.02 -0.03,0.04 -0.05,0.05l-0.01 0.01z" />
<path fill="currentColor" d="M0.16 0.11c-0.06,0.01 -0.06,0.07 -0.05,0.08 0,0.01 0.02,0.02 0.03,0.01 0.02,-0.01 0.01,-0.02 0.02,-0.03 0.01,-0.02 0.02,-0.01 0.03,-0.02 0.03,-0.01 0.02,-0.05 -0.03,-0.04z" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

assets/iconos/proceso_color.svg
+13
View File
@@ -0,0 +1,13 @@
<?xml version='1.0' encoding='utf-8'?>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24px" height="23px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 0.55 0.52">
<g id="Capa_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer" />
<g id="_2940953410368">
<path fill="currentColor" fill-opacity="0.501961" d="M0.21 0.18l0.08 0.13 -0.04 0c-0.01,0 -0.02,0 -0.03,0.02l-0.06 -0.12 0.03 0c0.01,0 0.02,-0.01 0.02,-0.02l0 -0.01z" />
<polygon fill="currentColor" fill-opacity="0.501961" points="0.21,0.07 0.34,0.07 0.34,0.13 0.21,0.13 " />
<rect fill="currentColor" width="0.21" height="0.21" rx="0.02" ry="0.02" />
<rect fill="currentColor" x="0.34" width="0.21" height="0.21" rx="0.02" ry="0.02" />
<rect fill="currentColor" x="0.22" y="0.31" width="0.21" height="0.21" rx="0.02" ry="0.02" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 972 B

assets/iconos/team_color.svg
+12
View File
@@ -0,0 +1,12 @@
<?xml version='1.0' encoding='utf-8'?>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24px" height="20px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 0.51 0.43">
<g id="Capa_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer" />
<g id="_2976811563136">
<path fill="currentColor" d="M0 0.4c0,0.01 0.02,0.02 0.03,0.03l0.17 0c0.02,0 0.03,0 0.05,-0.02 0.01,-0.01 0.01,-0.02 0.01,-0.04 0,-0.04 -0.01,-0.07 -0.03,-0.09 -0.02,-0.02 -0.04,-0.04 -0.07,-0.05 -0.06,-0.02 -0.12,0.01 -0.15,0.07 0,0.01 -0.01,0.03 -0.01,0.04 0,0.01 0,0.05 0,0.06z" />
<path fill="currentColor" fill-opacity="0.501961" d="M0.28 0.28c0.03,0.08 0,0.1 0.03,0.12 0,0 0.01,0.01 0.01,0.01 0.04,0.02 0.09,0.02 0.14,-0.01 0.01,0 0.02,-0.01 0.02,-0.02 0.02,-0.03 0.03,-0.05 0.03,-0.09 0,-0.03 0,-0.06 -0.05,-0.06 -0.04,0 -0.13,-0.01 -0.17,0 -0.01,0 -0.03,0.01 -0.03,0.02l0.02 0.03z" />
<path fill="currentColor" fill-opacity="0.501961" d="M0.3 0.09c0,0.05 0.04,0.08 0.09,0.08 0.05,0 0.08,-0.04 0.08,-0.09 -0.01,-0.05 -0.05,-0.09 -0.09,-0.08 -0.05,0.01 -0.09,0.04 -0.08,0.09z" />
<path fill="currentColor" d="M0.04 0.1c0.01,0.04 0.05,0.08 0.1,0.07 0.04,-0.01 0.08,-0.05 0.07,-0.1 0,-0.04 -0.04,-0.08 -0.09,-0.07 -0.05,0.01 -0.08,0.05 -0.08,0.1z" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

assets/img/ecosistema/academia1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 MiB

assets/img/ecosistema/academia2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

assets/img/ecosistema/academy.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

assets/img/ecosistema/academy2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

assets/img/ecosistema/digital2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 224 KiB

assets/img/ecosistema/projects2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 380 KiB

assets/img/hero/academy.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

assets/img/hero/hero-academy.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

assets/img/hero/hero_008.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 MiB

assets/img/hero/hero_009.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

assets/img/hero/hero_010.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 MiB

assets/img/hero/CONATCTO.png → assets/img/hero/hero_011.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 MiB

After

Width:  |  Height:  |  Size: 3.3 MiB

assets/img/ecosistema/hospital.jpg → assets/img/hospital.jpg
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 300 KiB

After

Width:  |  Height:  |  Size: 300 KiB

assets/img/somos/logo.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

assets/img/somos/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 734 KiB

assets/img/somos/mapa.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

assets/img/somos/mapa2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

assets/img/somos/mirada_sistemica.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

assets/img/somos/rigor-practico.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

assets/video/capacitacion.mp4
BIN
View File
Binary file not shown.
assets/video/desktop_working.mp4
BIN
View File
Binary file not shown.
assets/video/header_ide_loop.mp4
BIN
View File
Binary file not shown.
assets/video/header_ide_loop2.mp4
BIN
View File
Binary file not shown.
assets/video/header_ide_loop3.mp4
BIN
View File
Binary file not shown.
assets/video/linea_reparto.mp4
BIN
View File
Binary file not shown.
css/styles.css
+1100 -73
View File
File diff suppressed because it is too large Load Diff
ecosistema.html
+5 -5
View File
@@ -48,7 +48,7 @@
</div>
<div class="hero-visual"
style="width: 100%; height: 500px; position: relative; display: flex; justify-content: center; align-items: center;">
style="width: 100%; height: 400px; position: relative; display: flex; justify-content: center; align-items: center;">
<div class="animacion-infinito">
<svg class="capa-svg-lineas" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid meet">
<defs id="svg-defs"></defs>
@@ -133,7 +133,7 @@
<!-- Tarjeta 4: IDE Academy (navega a academy.html) -->
<article class="eco-card eco-card--academy" role="listitem">
<a class="eco-card__btn" href="academy.html" aria-label="Ir a IDE Academy">
<a class="eco-card__btn" href="ide-academy.html" aria-label="Ir a IDE Academy">
<span class="eco-card__icon-wrap" aria-hidden="true">
<i class="fa-solid fa-graduation-cap eco-card__icon"></i>
</span>
@@ -163,7 +163,7 @@
<button type="button" class="eco-pill eco-pill--excellence" data-eco-open="excellence">Excellence</button>
<button type="button" class="eco-pill eco-pill--projects" data-eco-open="projects">Projects</button>
<button type="button" class="eco-pill eco-pill--digital" data-eco-open="digital">Digital</button>
<a class="eco-pill eco-pill--academy" href="academy.html">Academy <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
<a class="eco-pill eco-pill--academy" href="ide-academy.html">Academy <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
</nav>
</div>
@@ -239,7 +239,7 @@
<article class="eco-panel eco-panel--projects" id="eco-panel-projects" data-eco-panel="projects" hidden>
<div class="eco-panel__media" aria-hidden="true">
<img src="assets/img/ecosistema/projects.png" alt="" loading="lazy" decoding="async">
<img src="assets/img/ecosistema/projects2.jpg" alt="" loading="lazy" decoding="async">
</div>
<div class="eco-panel__overlay" aria-hidden="true"></div>
@@ -310,7 +310,7 @@
<article class="eco-panel eco-panel--digital" id="eco-panel-digital" data-eco-panel="digital" hidden>
<div class="eco-panel__media" aria-hidden="true">
<img src="assets/img/ecosistema/digital.jpg" alt="" loading="lazy" decoding="async">
<img src="assets/img/ecosistema/digital2.jpg" alt="" loading="lazy" decoding="async">
</div>
<div class="eco-panel__overlay" aria-hidden="true"></div>
ide-academy.html
+148 -201
View File
@@ -17,58 +17,74 @@
<main>
<!-- Header Academy -->
<section class="section-padding hero-video-section" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color); position: relative; overflow: hidden; min-height: 400px;">
<!-- Video de fondo -->
<video autoplay muted loop playsinline style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.2;
z-index: 0;
pointer-events: none;
">
<source src="./assets/video/capacitacion.mp4" type="video/mp4">
Tu navegador no soporta videos.
</video>
<!-- Overlay oscuro opcional para mejor contraste -->
<div style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(19, 167, 138, 0.5);
z-index: 1;">
</div>
<div class="container container-narrow text-center" style="position: relative; z-index: 2;">
<span class="eyebrow" style="color: var(--text-main);">Executive Learning & Capability Development</span>
<h1 style="margin-bottom: 1.25rem;">Desarrollamos capacidades para gestionar, liderar y transformar</h1>
<p class="lead-text" style="margin: 0 auto 1.75rem auto;color: var(--text-main);">
<!-- Seccion 1: Hero -->
<section class="section-padding-md herobg-6">
<div class="container container-wide">
<div class="hero-grid">
<div>
<span class="eyebrow" style="text-transform: uppercase; color: white; font-style: italic;">
Executive Learning & Capability Development
</span>
<h1 style="margin-bottom: 0.8rem; line-height: 1.1; color: white;">
Desarrollamos capacidades para gestionar, liderar y transformar.
</h1>
<p class="lead-text" style="margin-bottom: 2.5rem; color: white;">
Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para fortalecer las capacidades que profesionales, equipos y organizaciones necesitan para convertir el aprendizaje en acción.
</p>
<div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
<a href="#cursos-destacados" class="btn btn-primary btn-sm">EXPLORAR CURSOS Y PROGRAMAS →</a>
<a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Academy_InCompany" class="btn btn-outline btn-sm" style="color: var(--text-inverse);">FORMACIÓN IN-COMPANY →</a>
<!-- Hero Actions -->
<div class="hero-actions" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
<span class="eyebrow" style="text-transform: uppercase; color: white;">
Ecosistema
</span>
<a href="ecosistema.html#eco-excellence" class="btn btn-primary btn-cta-unificado"
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;">
EXCELLENCE
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
<a href="ecosistema.html#eco-projects" class="btn btn-primary btn-cta-unificado"
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;">
PROJECTS
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
<a href="ecosistema.html#eco-digital" class="btn btn-primary btn-cta-unificado"
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;">
DIGITAL
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
</div>
</div>
<div class="hero-visual"
style="width: 100%; height: 500px; position: relative; display: flex; justify-content: center; align-items: center;">
</div>
</div>
</div>
</section>
<!-- Aprender con IDE -->
<section class="section-padding">
<!-- Seccion 2:Aprender con IDE -->
<section class="section-padding-md bg4">
<div class="container">
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem;">
<div>
<span class="eyebrow">APRENDER CON IDE</span>
<span class="eyebrow-a">APRENDER CON IDE</span>
<h2>Conocimiento que se conecta con la práctica</h2>
<p class="lead-text">
Aprender no es solamente incorporar conceptos. Es comprender cómo aplicarlos, relacionarlos con otros saberes y convertirlos en mejores decisiones y formas de actuar.
<p class="lead-text">
Por eso, en IDE Academy diseñamos experiencias de aprendizaje que parten de situaciones reales, integran herramientas aplicables y promueven el intercambio entre profesionales.
</div>
</div>
<!--Tarjetas descriptivas-->
@@ -112,7 +128,7 @@
<div class="card academy-card">
<div class="curso-header">
<span class="icono-academy-enriquece"></span>
<h4>INTERCAMBIO QUE ENRIQUECE</h4>
<h4>COMUNIDAD</h4>
</div>
<div class="curso-body">
<p>La experiencia y las perspectivas de quienes participan también forman parte del aprendizaje.</p>
@@ -124,7 +140,7 @@
<div class="card academy-card">
<div class="curso-header">
<span class="icono-academy-aplicacion"></span>
<h4>APLICACIÓN QUE CONTINÚA</h4>
<h4>APLICACIÓN CONTINUA</h4>
</div>
<div class="curso-body">
<p>Buscamos que cada experiencia deje herramientas, criterios y capacidades que puedan seguir utilizándose después del curso.</p>
@@ -137,198 +153,129 @@
</div>
</section>
<!--Cursos-->
<section class="section-padding-sm" id="cursos-destacados">
<!--Seccion 3:Cursos-->
<section class="section-padding-sm contact-parallax-section" id="cursos-destacados">
<div class="parallax-wrapper" aria-hidden="true">
<div id="contact-parallax-bg" class="parallax-bg-layer4"></div>
<div class="parallax-overlay"></div>
</div>
<div class="container">
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem;">
<div>
<span class="eyebrow">PRÓXIMAS EXPERIENCIAS</span>
<div class="cursos-layout">
<!-- Columna 1: Texto -->
<div class="cursos-intro">
<span class="eyebrow-a">PRÓXIMAS EXPERIENCIAS</span>
<h2>Elegí qué capacidad querés desarrollar.</h2>
<p class="lead-text">
Cursos y programas diseñados para conectar conocimiento, práctica y contexto, con herramientas que podés llevar a tu realidad profesional desde el primer día.
Cursos y programas diseñados para conectar conocimiento y práctica, con herramientas que podés llevar a tu realidad profesional desde el primer día.
</p>
</div>
</div>
<!-- Contenedor inyectado por JS desde /data/cursos.json -->
<div class="grid-3" id="academy-courses-container">
<!-- Columnas 2, 3 y 4: Tarjetas inyectadas por JS -->
<div class="cursos-cards" id="academy-courses-container">
<!-- Fallback en caso de demora de fetch -->
<div class="card text-center" style="grid-column: 1 / -1; padding: 2rem;">
<p style="color: var(--text-muted);">Cargando catálogo de programas formativos...</p>
</div>
</div>
</div>
</section>
<!-- Propuesta de Valor de la Formación IDE -->
<section class="section-padding bg-subtle-section">
<div class="container">
<div style="display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;">
<div class="fade-in visible">
<p class="eyebrow">DOS FORMAS DE APRENDER CON IDE</p>
<h2 style="padding-bottom: 15px;">Elegí la experiencia que mejor se adapte a tu contexto.</h2>
<div class="divider"></div>
<p>Podés participar de nuestras experiencias abiertas junto a profesionales de distintas organizaciones o desarrollar una propuesta In-Company diseñada a partir de las necesidades de tu equipo.</p>
<p>En ambos casos, compartimos una misma forma de aprender: conocimiento conectado con la práctica, intercambio y aplicación en contextos reales.</p>
</div>
<div style="display: flex; flex-direction: column; gap: 1rem;">
<div class="card-incompany">
<div class="card-cursos-icon">
<span class="icono-fabrica"></span>
</div>
<div class="card-cursos-content">
<h2 style="font-size: 1.05rem; margin-bottom: 0.25rem;">In Company</h2>
<p style="font-size: 0.82rem;">Programa diseñado exclusivamente para tu organización. Contenido adaptado, casos reales, dinámica acorde al equipo.</p>
</div>
</div>
<div class="card-cursos">
<div class="card-cursos-icon">
<svg viewBox="0 0 32 32" fill="currentColor">
<use href="./assets/iconos/calendar_color.svg"></use>
</svg>
</div>
<div class="card-cursos-content">
<h2 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Cursos Abiertos</h2>
<p style="font-size: 0.82rem;">Formación en grupos reducidos, con profesionales de distintas organizaciones. Networking y perspectivas diversas.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container" style="margin-top: clamp(2.5rem, 4vw, 3.5rem);">
<div class="grid-3 text-center">
<div class="card academy-card">
<h4 style="font-size: 1.1rem; margin-bottom: 0.35rem;">Casos Reales y Aplicados</h4>
<p style="font-size: 0.85rem; color: var(--text-muted);">Los participantes trabajan sobre los procesos y desafíos cotidianos de sus propias empresas.</p>
</div>
<div class="card academy-card">
<h4 style="font-size: 1.1rem; margin-bottom: 0.35rem;">Docentes Consultores Senior</h4>
<p style="font-size: 0.85rem; color: var(--text-muted);">Instructores con amplia trayectoria liderando auditorías y proyectos en organizaciones reales.</p>
</div>
<div class="card academy-card">
<h4 style="font-size: 1.1rem; margin-bottom: 0.35rem;">Transferencia de Autonomía</h4>
<p style="font-size: 0.85rem; color: var(--text-muted);">Herramientas y plantillas listas para aplicar inmediatamente en el puesto de trabajo.</p>
</div>
</div>
</div>
</section>
<!-- Sección Formación In-Company a Medida -->
<section class="section-padding bg-subtle-section">
<div class="container">
<div class="card">
<div class="grid-2" style="gap: 3rem; align-items: center;">
<div>
<!-- Sección 4: Formación In-Company a Medida -->
<section class="section-padding-md bg-subtle-section">
<div class="container" style="margin-bottom: 2.5rem;">
<div class="incompany-card">
<!-- Col 1: Títulos y texto -->
<div class="incompany-card__intro">
<span class="eyebrow-a">FORMACIÓN A MEDIDA</span>
<h2>Formación In-Company</h2>
<p style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin: 1rem 0 0 0;">
Diseñamos experiencias de aprendizaje para una organización y su equipo, adaptando objetivos, contenidos, casos y actividades a su contexto. Ideal para Organizaciones que necesitan desarrollar capacidades compartidas, acompañar iniciativas o fortalecer la forma en que sus equipos gestionan y trabajan.
<p class="incompany-card__lead">
Diseñamos experiencias a medida, alineadas a los objetivos de tu organizacion para desarrollar las capacidades que necesitas.
</p>
<p style="margin-top: 0.5rem;">Podemos diseñar:</p>
</div>
<!-- Sub-grid: lista a la izquierda, botón a la derecha abajo -->
<div class="incompany-subgrid">
<ul class="incompany-tags">
<li><i class="fa-solid fa-tag"></i> Cursos.</li>
<!-- Col 2: Bullets + CTA -->
<div class="incompany-card__formats">
<p class="incompany-card__subtitle">Podemos diseñar:</p>
<ul class="incompany-card__list">
<li><i class="fa-solid fa-tag"></i> Cursos</li>
<li><i class="fa-solid fa-tag"></i> Workshops</li>
<li><i class="fa-solid fa-tag"></i> Programas</li>
<li><i class="fa-solid fa-tag"></i> Rutas de Aprendizaje</li>
</ul>
<div class="incompany-cta">
<a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Academy_InCompany_Custom" class="btn btn-primary-cta btn-sm">
<a href="ecosistema.html#eco-excellence" class="btn btn-academy"
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; max-width: 200px;">
HABLEMOS
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
</div>
</div>
</div>
<div class="card-academia"></div>
</div>
</div>
</div>
</section>
<!-- Col 3: Imagen a sangre -->
<div class="incompany-card__visual" aria-hidden="true"></div>
<!-- Facilitadores / Quiénes facilitan el aprendizaje -->
<section class="section-padding">
</div>
</div>
<div class="container">
<div class="text-center" style="text-align: center; max-width: 720px; margin: 0 auto 2.5rem auto;">
<span class="eyebrow">QUIÉNES FACILITAN EL APRENDIZAJE</span>
<h2 style="margin-bottom: 1rem;">Experiencias que se comparten</h2>
<p class="lead-text" style="margin: 0 auto;">
En IDE Academy, la formación está a cargo de profesionales que combinan experiencia en consultoría, gestión, proyectos, docencia y práctica organizacional.
</p>
</div>
<div class="campus-banner">
<div class="grid-4 facilitadores-grid">
<!-- Facilitador 1 -->
<div class="facilitador-item">
<div class="facilitador-avatar">
<img src="./assets/img/CRA.png" alt="Claudia Raquel ANDRÉS">
</div>
<h4 class="facilitador-nombre">Claudia Raquel ANDRÉS</h4>
<p class="facilitador-rol">Consultoría & Gestión</p>
</div>
<!-- Facilitador 2 -->
<div class="facilitador-item">
<div class="facilitador-avatar">
<img src="./assets/img/JAP.png" alt="José PUGLIESE">
</div>
<h4 class="facilitador-nombre">José PUGLIESE</h4>
<p class="facilitador-rol">Proyectos & Agile</p>
</div>
<!-- Facilitador 3 -->
<div class="facilitador-item">
<div class="facilitador-avatar">
<img src="./assets/img/MAR.png" alt="Miguel Ángel ROJAS">
</div>
<h4 class="facilitador-nombre">Miguel Ángel ROJAS</h4>
<p class="facilitador-rol">Calidad & Mejora Continua</p>
</div>
<!-- Facilitador 4 -->
<div class="facilitador-item">
<div class="facilitador-avatar">
<img src="./assets/img/VUB.png" alt="Víctor Ulises BARRIONUEVO">
</div>
<h4 class="facilitador-nombre">Víctor Ulises BARRIONUEVO</h4>
<p class="facilitador-rol">Calidad & Mejora Continua</p>
</div>
</div>
<div style="display: flex; justify-content: center; margin-top: 2.5rem;">
<a href="somos-ide.html" class="btn btn-primary btn-sm">
CONOCER A NUESTROS FACILITADORES →
</a>
</div>
</div>
</section>
<!-- Sección IDE Academy Virtual / Campus -->
<section class="section-padding">
<div class="container">
<div class="card" style="background: linear-gradient(135deg, var(--ide-primary) 0%, #0f7a63 100%); border: none;">
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
<div>
<span class="eyebrow" style="color: rgba(255,255,255,0.75);">CAMPUS VIRTUAL</span>
<h2 style="color: #ffffff; margin-bottom: 0.75rem;">¿Ya sos parte de IDE Academy?</h2>
<p style="color: rgba(255,255,255,0.9); font-size: 1rem; line-height: 1.65; margin: 0; max-width: 520px;">
<!-- Col 1: Intro -->
<div class="campus-banner__intro">
<span class="eyebrow campus-banner__eyebrow">CAMPUS VIRTUAL</span>
<h2 class="campus-banner__title">¿Ya sos parte de IDE Academy?</h2>
<p class="campus-banner__lead">
Accedé a tus cursos, materiales y actividades desde nuestro entorno de aprendizaje.
</p>
</div>
<div style="display: flex; justify-content: flex-end; align-items: center;">
<a href="https://campus.ideconsultores.com" target="_blank" rel="noopener" class="btn btn-sm" style="
background-color: #ffffff;
color: var(--ide-primary);
font-weight: 600;
white-space: nowrap;
">
INGRESAR AL CAMPUS IDE ↗
<!-- Col 2: Acceso al Campus -->
<div class="campus-banner__access">
<div class="campus-banner__icon">
<i class="fa-solid fa-graduation-cap"></i>
</div>
<h3 class="campus-banner__access-title">Campus IDE</h3>
<p class="campus-banner__access-desc">
Tus cursos, materiales y actividades desde nuestro entorno virtual.
</p>
<a href="https://campus.ideconsultores.com.ar" target="_blank" rel="noopener noreferrer"
class="btn btn-academy2 curso-card__cta"
style="border-radius: 50px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; width: fit-content; text-decoration: none;">
Ingresar al Campus
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
</div>
<!-- Col 3: Recursos y Herramientas -->
<div class="campus-banner__access">
<div class="campus-banner__icon">
<i class="fa-solid fa-folder-open"></i>
</div>
<h3 class="campus-banner__access-title">Recursos y Herramientas</h3>
<p class="campus-banner__access-desc">
Descargables, plantillas y guías para aplicar en tu día a día.
</p>
<a href="https://campus.ideconsultores.com.ar" target="_blank" rel="noopener noreferrer"
class="btn btn-academy2 curso-card__cta"
style="border-radius: 50px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; width: fit-content; text-decoration: none;">
Ver Recursos
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
</div>
</div>
</div>
</section>
js/main.js
+58 -30
View File
@@ -572,7 +572,10 @@ function filterVisibleCourses(courses) {
function renderCourseCards(courses, container) {
container.innerHTML = '';
if (courses.length === 0) {
// Limitar a 3 cursos (opción A del brief)
const visibleCourses = courses.slice(0, 3);
if (visibleCourses.length === 0) {
container.innerHTML = `
<div class="card text-center" style="grid-column: 1 / -1; padding: 2.5rem;">
<p style="color: var(--text-muted); font-size: 1rem;">
@@ -583,50 +586,75 @@ function renderCourseCards(courses, container) {
return;
}
courses.forEach(course => {
const card = document.createElement('div');
card.className = 'card';
card.style.display = 'flex';
card.style.flexDirection = 'column';
card.style.justifyContent = 'space-between';
// Mapeo de modalidad → icono FontAwesome
const getModalityIcon = (modalidad = '') => {
const m = modalidad.toLowerCase();
if (m.includes('online') || m.includes('virtual') || m.includes('remoto')) return 'fa-laptop';
if (m.includes('presencial')) return 'fa-building';
if (m.includes('hibr') || m.includes('mix')) return 'fa-rotate';
return 'fa-globe';
};
// Mapeo de nivel → icono FontAwesome (variando intensidad visual)
const getLevelIcon = (nivel = '') => {
const n = nivel.toLowerCase();
if (n.includes('inicial') || n.includes('básic') || n.includes('basic')) return 'fa-signal';
if (n.includes('intermed')) return 'fa-signal';
if (n.includes('avanz') || n.includes('experto')) return 'fa-signal';
return 'fa-layer-group';
};
visibleCourses.forEach(course => {
const card = document.createElement('article');
card.className = 'card-a curso-card';
const area = course.area_tematica || course.categoria || 'IDE Academy';
const tipo = course.tipo ? ` • ${course.tipo}` : '';
const tipo = course.tipo || '';
const proxima = course.proxima_edicion || course.proxima_fecha || 'A confirmar';
const duracion = course.duracion || 'A definir';
const modalidad = course.modalidad || 'Consultar';
const nivel = course.nivel || 'General';
const descripcion = course.propuesta_formativa || course.descripcion_corta || '';
// Estilo distintivo sutil si está en "Próximamente"
const isProximamente = course.estado.toLowerCase().includes('prox');
const badgeProximo = isProximamente
? `<span style="font-size: 0.72rem; background: var(--bg-subtle); padding: 0.2rem 0.5rem; border-radius: 4px; color: #D97706; font-weight: 600; border: 1px solid rgba(217, 119, 6, 0.2);">Próximamente</span>`
: '';
const isProximamente = (course.estado || '').toLowerCase().includes('prox');
const proximaEsAConfirmar = proxima.toLowerCase() === 'a confirmar';
card.innerHTML = `
<div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; gap: 0.5rem; flex-wrap: wrap;">
<div class="ecosystem-badge badge-academy">${area}${tipo}</div>
${badgeProximo}
<!-- Cabecera: badge + estado -->
<div class="curso-card__top">
<span class="ecosystem-badge badge-academy">${area}${tipo ? ' • ' + tipo : ''}</span>
${isProximamente ? '<span class="curso-card__badge-prox">Próximamente</span>' : ''}
</div>
<h3 style="font-size: 1.15rem; margin-bottom: 0.6rem; line-height: 1.35;">${course.titulo}</h3>
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.5;">${descripcion}</p>
</div>
<!-- Título -->
<h3 class="curso-card__title">${course.titulo}</h3>
<div>
<div style="font-size: 0.82rem; color: var(--text-body); display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.5rem; border-top: 1px solid var(--border-color); padding-top: 0.85rem;">
<div><strong>Modalidad:</strong> ${modalidad}</div>
<div><strong>Duración:</strong> ${duracion}</div>
<div><strong>Nivel:</strong> ${nivel}</div>
<div><strong>Próxima edición:</strong> <span style="${proxima.toLowerCase() === 'a confirmar' ? 'color: #D97706; font-weight: 600;' : ''}">${proxima}</span></div>
</div>
<!-- Descripción truncada -->
<p class="curso-card__desc">${descripcion}</p>
<button class="btn btn-outline btn-sm w-full" style="width: 100%;" onclick="openCourseModal('${course.id}')">
Ver Ficha Técnica y Programa
<!-- Specs con iconos -->
<ul class="curso-card__specs">
<li title="Modalidad"><i class="fa-solid ${getModalityIcon(modalidad)}"></i> ${modalidad}</li>
<li title="Duración"><i class="fa-regular fa-clock"></i> ${duracion}</li>
<li title="Nivel"><i class="fa-solid ${getLevelIcon(nivel)}"></i> ${nivel}</li>
<li title="Próxima edición" class="${proximaEsAConfirmar ? 'is-pending' : ''}">
<i class="fa-regular fa-calendar"></i> ${proxima}
</li>
</ul>
<!-- CTA compacto -->
<button class="btn btn-academy curso-card__cta"
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; max-width: 200px; margin: 0 auto; margin-top: 1rem;"
onclick="openCourseModal('${course.id}')">
Ver ficha
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</button>
</div>
`;
container.appendChild(card);
});
somos-ide.html
+215 -93
View File
@@ -17,58 +17,162 @@
<main>
<!-- Hero / Origen y Propósito -->
<section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
<div class="container container-narrow text-center">
<span class="eyebrow">PROPÓSITO & IDENTIDAD</span>
<h1 style="margin-bottom: 1.5rem;">Vemos organizaciones. <br>Entendemos sistemas. <br>Conectamos el todo. </h1>
<p class="lead-text" style="margin: 0 auto 2rem auto;">
IDE nace de una forma compartida de entender la gestión: ninguna decisión ocurre de manera aislada.
<br>Personas, procesos, proyectos, conocimiento y tecnología se conectan y se afectan mutuamente. Por eso, antes de proponer una solución buscamos comprender esas relaciones, identificar dónde podemos generar mayor impacto y conectar las capacidades necesarias para hacerlo posible.
<!-- Seccion 1: Hero -->
<section class="section-padding-md herobg-7">
<div class="container container-wide">
<div class="hero-grid">
<div>
<span class="eyebrow" style="text-transform: uppercase;">PROPÓSITO & IDENTIDAD</span>
<h1 style="margin-bottom: 0.8rem; line-height: 1.1; color: white;">
Vemos organizaciones. Entendemos sistemas. Conectamos el todo.
</h1>
<p class="lead-text" style="margin-bottom: 2.5rem;">
IDE nace de una visión integral de la gestión: personas, procesos, proyectos, conocimiento y tecnología se conectan e influyen mutuamente. Por eso, comprendemos sus relaciones para identificar oportunidades de impacto y articular las capacidades necesarias.
</p>
<div class="card-somos">
<!-- Hero Actions -->
<div class="hero-actions" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
<a href="contacto.html" class="btn btn-primary btn-cta-unificado"
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem;">
HABLEMOS
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
</div>
</div>
<div class="hero-visual"
style="width: 100%; height: 500px; position: relative; display: flex; justify-content: center; align-items: center;">
</div>
</div>
</div>
</section>
<!-- Cómo Pensamos: La Mirada Sistémica -->
<!-- Seccion 2: Filosofía de Trabajo -->
<section class="section-padding">
<div class="container">
<div class="grid-2" style="align-items: center; gap: 3rem;">
<!-- Bloque superior: título + texto -->
<div class="filosofia-intro">
<div>
<span class="eyebrow">FILOSOFÍA DE TRABAJO</span>
<h2>No intervenimos en todo. Comprendemos el todo para saber dónde intervenir.</h2>
<p style="font-size: 1.05rem; color: var(--text-body); margin-top: 1rem; line-height: 1.7;">
Cada organización tiene su propia realidad. Por eso, antes de proponer una solución buscamos comprender su contexto, sus relaciones y aquello que está detrás de los desafíos visibles.
<br>A partir de esa comprensión, focalizamos la intervención, conectamos las capacidades necesarias y trabajamos junto a las personas de la organización para generar mejoras que puedan sostenerse en el tiempo.
</p>
<p style="font-size: 1rem; color: var(--text-muted); margin-top: 1rem; line-height: 1.6;">
</p>
<h2 class="filosofia-intro__title">
No intervenimos en todo. Comprendemos el todo para saber dónde intervenir.
</h2>
</div>
<div>
<div class="card" style="padding: 2.25rem;">
<h3 style="font-size: 1.3rem; margin-bottom: 1rem; color: var(--ide-primary);">Nuestros Principios Guía</h3>
<ul style="list-style: none; display: flex; flex-direction: column; gap: 1rem; font-size: 0.95rem;">
<li style="display: flex; gap: 0.75rem;">
<span style="color: var(--ide-accent); font-weight: bold;">✓</span>
<span><strong>Mirada Sistémica: </strong> Cada intervención considera sus relaciones e impactos sobre el conjunto.</span>
</li>
<li style="display: flex; gap: 0.75rem;">
<span style="color: var(--ide-accent); font-weight: bold;">✓</span>
<span><strong>Rigor con sentido práctico: </strong> Integramos metodologías, normas y buenas prácticas adaptándolas al contexto y no al revés.</span>
</li>
<li style="display: flex; gap: 0.75rem;">
<span style="color: var(--ide-accent); font-weight: bold;">✓</span>
<span><strong>Personas como parte del Sistema: </strong> Las personas no son destinatarias pasivas del cambio: participan, aportan conocimiento y hacen posible su evolución.</span>
</li>
<li style="display: flex; gap: 0.75rem;">
<span style="color: var(--ide-accent); font-weight: bold;">✓</span>
<span><strong>Capacidades que permanecen: </strong> Buscamos que cada intervención deje conocimiento, herramientas y capacidades que la organización pueda seguir desarrollando.</span>
</li>
</ul>
<p class="filosofia-intro__lead" style="font-style: italic;">
Cada organización tiene su propia realidad. Antes de proponer una solución, comprendemos su contexto, sus relaciones y lo que está detrás de los desafíos visibles.<br> A partir de esa comprensión, focalizamos la intervención, conectamos las capacidades necesarias y trabajamos junto a las personas para generar mejoras sostenibles.
</p>
</div>
</div>
<!-- Cinta inferior: pilares en tarjetas cuadradas -->
<div class="filosofia-pilares">
<article class="pilar-card bg6">
<div class="pilar-card__icon">
<i class="fa-solid fa-diagram-project"></i>
</div>
<h3 class="pilar-card__title">Mirada Sistémica</h3>
<p class="pilar-card__desc">
Cada intervención considera sus relaciones e impactos sobre el conjunto.
</p>
</article>
<article class="pilar-card bg6">
<div class="pilar-card__icon">
<i class="fa-solid fa-gears"></i>
</div>
<h3 class="pilar-card__title">Rigor con sentido práctico</h3>
<p class="pilar-card__desc">
Adaptamos metodologías y normas al contexto, no al revés.
</p>
</article>
<article class="pilar-card bg6">
<div class="pilar-card__icon">
<i class="fa-solid fa-users"></i>
</div>
<h3 class="pilar-card__title">Personas como parte del sistema</h3>
<p class="pilar-card__desc">
Participan, aportan conocimiento y hacen posible la evolución.
</p>
</article>
<article class="pilar-card bg6">
<div class="pilar-card__icon">
<i class="fa-solid fa-seedling"></i>
</div>
<h3 class="pilar-card__title">Capacidades que permanecen</h3>
<p class="pilar-card__desc">
Cada intervención deja conocimiento y herramientas para seguir creciendo.
</p>
</article>
</div>
</div>
</section>
<!-- Sección 3: Experiencia -->
<section class="section-padding bg6">
<div class="container">
<div class="triple-section">
<!-- Col 1 (35%): Texto -->
<div class="triple-section__intro">
<span class="eyebrow">TU EYEBROW ACÁ</span>
<h2 class="triple-section__title">
Tu título principal acá, puede ir en una o dos líneas.
</h2>
<p class="triple-section__lead">
Tu texto descriptivo acá. Mantenelo breve para que respire y no compita con la imagen central. Idealmente 2 o 3 líneas máximo.
</p>
</div>
<!-- Col 2 (40%): Imagen PNG -->
<div class="triple-section__visual">
<img src="assets/img/somos/mapa2.png"
alt="Descripción de la imagen"
loading="lazy">
</div>
<!-- Col 3 (25%): 4 ítems con icono -->
<div class="triple-section__features">
<div class="triple-feature">
<div class="triple-feature__icon">
<i class="fa-solid fa-check"></i>
</div>
<p class="triple-feature__text">Texto del primer punto.</p>
</div>
<div class="triple-feature">
<div class="triple-feature__icon">
<i class="fa-solid fa-rocket"></i>
</div>
<p class="triple-feature__text">Texto del segundo punto.</p>
</div>
<div class="triple-feature">
<div class="triple-feature__icon">
<i class="fa-solid fa-users"></i>
</div>
<p class="triple-feature__text">Texto del tercer punto.</p>
</div>
<div class="triple-feature">
<div class="triple-feature__icon">
<i class="fa-solid fa-chart-line"></i>
</div>
<p class="triple-feature__text">Texto del cuarto punto.</p>
</div>
</div>
</div>
</div>
</section>
@@ -76,15 +180,23 @@
<!-- El Equipo y Perfiles -->
<section class="section-padding bg-subtle-section">
<div class="container">
<div style="text-align: center; max-width: 700px; margin: 0 auto 3rem auto;">
<!-- Bloque superior: título + texto -->
<div class="filosofia-intro">
<div>
<span class="eyebrow">QUIÉNES HACEMOS IDE</span>
<h2>Experiencias que se complementan</h2>
<p class="lead-text" style="margin-top: 1rem;">
IDE reúne profesionales con trayectorias en gestión, proyectos, mejora continua, sistemas de gestión, transformación digital, inteligencia artificial, docencia y desarrollo organizacional. <br>Cada uno aporta una especialidad. El mayor valor aparece cuando esas capacidades se conectan.
<h2 class="filosofia-intro__title">
Experiencias que se complementan
</h2>
</div>
<div>
<p class="filosofia-intro__lead">
IDE reúne profesionales con trayectorias en gestión, proyectos, mejora continua, sistemas de gestión, transformación digital, inteligencia artificial, docencia y desarrollo organizacional.
Cada uno aporta una especialidad. El mayor valor aparece cuando esas capacidades se conectan.
</p>
</div>
</div>
<div class="grid-4">
<div class="grid-5">
<!-- Miembro 1 -->
<div class="card somos m1">
@@ -93,8 +205,11 @@
</div>
<h3>Claudia Raquel ANDRÉS</h3>
<div class="somos-title">Directora General | Líder de IDE Projects</div>
<p>Especialista en proyectos, optimización de procesos e implementación de sistemas de gestión, con más de 15 años de experiencia en consultoría, auditoría y docencia. Impulsa la mirada sistémica que le da indentidad a IDE.</p>
<a href="#" class="btn btn-outline btn-sm"><i class="fa-brands fa-linkedin-in"></i>LinkedIn</a>
<!--<p>Especialista en proyectos, optimización de procesos e implementación de sistemas de gestión, con más de 15 años de experiencia en consultoría, auditoría y docencia. Impulsa la mirada sistémica que le da indentidad a IDE.</p>-->
<a href="https://www.linkedin.com/in/claudia-raquel-andres/" target="_blank"
rel="noopener noreferrer" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</div>
<!-- Miembro 2 -->
@@ -104,10 +219,13 @@
</div>
<h3>José PUGLIESE</h3>
<div class="somos-title">Líder de IDE Digital</div>
<p>
<!--<p>
Especialista en digitalización, Inteligencia Artificial y sistematización de procesos, con más de 10 años de experiencia en liderazgo de equipos e implementación de soluciones tecnológicas orientadas a optimizar la gestión.
</p>
<a href="#" class="btn btn-outline btn-sm"><i class="fa-brands fa-linkedin-in"></i>LinkedIn</a>
</p>-->
<a href="https://www.linkedin.com/in/ing-jos%C3%A9-pugliese-706445413/" target="_blank"
rel="noopener noreferrer" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</div>
<!-- Miembro 3 -->
@@ -117,10 +235,13 @@
</div>
<h3>Miguel Ángel ROJAS</h3>
<div class="somos-title">Líder de IDE Excellence</div>
<p>
<!--<p>
Especialista en gestión y optimización de procesos fisicoquímicos, mejora continua y sistemas de calidad, con más de 15 años de experiencia impulsando la eficiencia operativa y el desempeño sostenible.
</p>
<a href="#" class="btn btn-outline btn-sm"><i class="fa-brands fa-linkedin-in"></i>LinkedIn</a>
</p>-->
<a href="https://www.linkedin.com/in/ingenieromiguelrojas/" target="_blank"
rel="noopener noreferrer" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</div>
<!-- Miembro 4 -->
@@ -128,60 +249,61 @@
<div class="card-portrait">
<img src="./assets/img/VUB.png" alt="Retrato de Carlos Garcia" loading="lazy">
</div>
<h3>Víctor Ulises BARRIONUEVO</h3>
<h3>Víctor BARRIONUEVO</h3>
<div class="somos-title">Projects & Digital</div>
<p>
<!--<p>
Especialista en gestión y ejecución de proyectos de infraestructura y telecomunicaciones, con amplia experiencia en planificación, operaciones y coordinación de equipos multidisciplinarios.
</p>
<a href="#" class="btn btn-outline btn-sm"><i class="fa-brands fa-linkedin-in"></i>LinkedIn</a>
</p>-->
<a href="https://www.linkedin.com/in/victor-ulises-barrionuevo/" target="_blank"
rel="noopener noreferrer" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</div>
<!-- Miembro 5 -->
<div class="card somos m5">
<div class="card-portrait">
<img src="./assets/img/somos/logo.png" alt="Retrato de Carlos Garcia" loading="lazy">
</div>
<h3>Especialistas IDE</h3>
<div class="somos-title">Red de Consultores</div>
<a href="trabaja-con-nosotros.html" class="btn btn-primary btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;">
<i class="fa-solid fa-plus"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Marcos de Referencia y Metodologías -->
<section class="section-padding">
<div class="container">
<div style="text-align: center; margin-bottom: 3rem;">
<span class="eyebrow">ESTÁNDARES GLOBALES</span>
<h2>Marcos y metodologías en los que nos basamos</h2>
<!-- Sección 4: CTA -->
<section class="section-padding-xs herobg-5">
<div class="container container-wide">
<div class="hero-grid">
<div>
<h2 style="margin-bottom: 0.8rem; line-height: 1.1; color: white; margin-bottom: 1.5rem;">
Conversemos para comprender tu contexto,<br> identificar dónde intervenir y conectar las capacidades que puedan aportar mayor valor
</h2>
<div class="hero-actions" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
<a href="contacto.html" class="btn btn-primary btn-cta-unificado"
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem;">
HABLEMOS
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
</div>
</div>
<div class="grid-4" style="text-align: center;">
<div class="card card-feature">
<span class="card-icon" data-icon="iso" aria-hidden="true"></span>
<h4 style="color: var(--ide-excellence); margin-bottom: 0.5rem;">Normas ISO</h4>
<p style="font-size: 0.85rem; color: var(--text-muted);">ISO 9001, 14001, 45001, 21001, 27001 con enfoque de valor y gobernanza.</p>
<div class="hero-visual"
style="width: 100%; height: 300px; position: relative; display: flex; justify-content: center; align-items: center;">
</div>
<div class="card card-feature">
<span class="card-icon" data-icon="pmi" aria-hidden="true"></span>
<h4 style="color: var(--ide-projects); margin-bottom: 0.5rem;">PMI &amp; Agile</h4>
<p style="font-size: 0.85rem; color: var(--text-muted);">PMBOK®, Scrum, Kanban y marcos híbridos adaptados a proyectos complejos.</p>
</div>
<div class="card card-feature">
<span class="card-icon" data-icon="academy" aria-hidden="true"></span>
<h4 style="color: var(--ide-academy); margin-bottom: 0.5rem;">Adult Learning</h4>
<p style="font-size: 0.85rem; color: var(--text-muted);">Diseño instruccional para adultos, casos prácticos y aprendizaje experiencial.</p>
</div>
<div class="card card-feature">
<span class="card-icon" data-icon="ia" aria-hidden="true"></span>
<h4 style="color: var(--ide-digital); margin-bottom: 0.5rem;">IA &amp; Automatización</h4>
<p style="font-size: 0.85rem; color: var(--text-muted);">Integración ética de IA, análisis de datos y reingeniería de flujos de trabajo.</p>
</div>
</div>
</div>
</section>
<!-- CTA Final -->
<section class="section-padding" style="background-color: var(--teal-dark); border-top: 1px solid var(--border-color);">
<div class="container container-narrow text-center">
<h2 style="color: var(--text-inverse); margin-bottom: 1rem;">Conversemos para comprender tu contexto,<br> identificar dónde intervenir y conectar las capacidades que puedan aportar mayor valor</h2>
</p>
<a href="contacto.html" class="btn btn-outline-cta btn-sm" ">Hablemos</a>
</div>
</section>