diff --git a/assets/img/academia.png b/assets/img/academia.png new file mode 100644 index 0000000..f8f6c21 Binary files /dev/null and b/assets/img/academia.png differ diff --git a/assets/img/cursos.png b/assets/img/cursos.png new file mode 100644 index 0000000..59384d1 Binary files /dev/null and b/assets/img/cursos.png differ diff --git a/assets/img/incompany.png b/assets/img/incompany.png new file mode 100644 index 0000000..6ac9b9b Binary files /dev/null and b/assets/img/incompany.png differ diff --git a/css/styles.css b/css/styles.css index 6280922..a74b502 100644 --- a/css/styles.css +++ b/css/styles.css @@ -24,6 +24,7 @@ --teal-dark: #1B5E6E; --cta-hover:#40ab8e; --bg-subtle: #ecf9fd; + --ide-accent-bg:rgba(79,179,137, 0.3); /* Tema Claro (Por defecto) */ --bg-body: #F8FAFB; @@ -1673,6 +1674,181 @@ canvas { object-position: center; /* podés ajustar a "top" si la cara queda baja */ display: block; } + +.card-incompany { + background-image: linear-gradient(var(--card-overlay), var(--card-overlay)), url('../assets/img/incompany.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + border: 1.5px solid var(--teal-dark); + border-radius: var(--radius-md); + padding: 1.75rem; + transition: all var(--transition-normal); + display: flex; + gap: 1rem; + +} + +.card-incompany:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + + +.card-cursos { + background-image: linear-gradient(var(--card-overlay), var(--card-overlay)), url('../assets/img/cursos.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + border: 1.5px solid var(--teal-dark); + border-radius: var(--radius-md); + padding: 1.75rem; + transition: all var(--transition-normal); + display: flex; + gap: 1rem; +} + +.card-cursos:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +/* Barra roja con el ícono */ +.card-cursos-icon { + color: var(--text-main); + width: 3rem; /* ancho fijo */ + min-width: 3rem; /* evita que se encoja */ + align-self: stretch; /* ocupa toda la altura del contenido */ + display: flex; + align-items: center; + justify-content: center; +} + + +/* Contenido de texto */ +.card-cursos-content { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; +} + +.card-academia { + background-image: url('../assets/img/academia.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-color: var(--bg-surface); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + transition: all var(--transition-normal); + position: relative; + aspect-ratio: 3/2; /* ← ajustá según tu imagen (16/9, 3/2, 21/9...) */ + width: 100%; +} + +.card-somos:hover { + border-color: var(--ide-accent); + box-shadow: var(--shadow-md); + transform: translateY(-2px); +} + +/* Badge de Categoría superior */ +.course-header-top { + margin-bottom: 0.85rem; +} + +.course-badge-category { + display: inline-flex; + align-items: center; + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--ide-academy, #0c4a60); + background-color: color-mix(in srgb, var(--ide-academy, #0c4a60) 10%, transparent); + border: 1px solid color-mix(in srgb, var(--ide-academy, #0c4a60) 25%, transparent); + padding: 0.28rem 0.75rem; + border-radius: 999px; +} + +/* Panel contenedor tipo Grid */ +.course-specs-panel { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.75rem; + background: var(--bg-subtle); + border-radius: 12px; + padding: 0.9rem; + margin-bottom: 1.75rem; +} + +/* Celda / Tarjeta interna */ +.spec-item { + display: flex; + align-items: center; + gap: 0.75rem; + background: var(--border-color); + padding: 0.65rem 0.85rem; + border-radius: 8px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); +} + +/* Cajas de iconos con tintes cromáticos */ +.spec-icon-box { + width: 36px; + height: 36px; + min-width: 36px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; +} + +.spec-icon-blue { background-color: var(--ide-accent-bg); color: var(--ide-primary); } +.spec-icon-purple { background-color: var(--ide-accent-bg); color: var(--ide-primary); } +.spec-icon-teal { background-color: var(--ide-accent-bg); color: var(--ide-primary); } +.spec-icon-amber { background-color: var(--ide-accent-bg); color: var(--ide-primary); } + +/* Tipografía de las especificaciones */ +.spec-text { + display: flex; + flex-direction: column; + min-width: 0; +} + +.spec-label { + font-size: 0.68rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--text-main); + font-weight: 600; + line-height: 1.2; +} + +.spec-value { + font-size: 0.82rem; + color: var(--text-main); + font-weight: 600; + line-height: 1.3; + margin-top: 2px; + white-space: normal; + word-break: break-word; +} + +.spec-value.highlight-date { + color: var(--ide-academy); +} + +/* Responsive: 1 columna en pantallas móviles */ +@media (max-width: 520px) { + .course-specs-panel { + grid-template-columns: 1fr; + padding: 0.65rem; + gap: 0.5rem; + } +} + /* --- 17. Footer --- */ #site-footer { position: relative; diff --git a/ide-academy.html b/ide-academy.html index ac994fe..b65670d 100644 --- a/ide-academy.html +++ b/ide-academy.html @@ -18,39 +18,42 @@
-
-
- CAPACIDADES & APRENDIZAJE +
+ + + + +
+
+
+ CAPACIDADES & APRENDIZAJE

Desarrollamos las capacidades que hacen posible la transformación

-

+

Los procesos y la tecnología son indispensables, pero son las personas quienes los ejecutan y mejoran día a día. Diseñamos programas prácticos orientados a resultados organizacionales tangibles.

-
-
- - -
-
-
-
- -

Casos Reales y Aplicados

-

Los participantes trabajan sobre los procesos y desafíos cotidianos de sus propias empresas.

-
-
- -

Docentes Consultores Senior

-

Instructores con amplia trayectoria liderando auditorías y proyectos en organizaciones reales.

-
-
- -

Transferencia de Autonomía

-

Herramientas y plantillas listas para aplicar inmediatamente en el puesto de trabajo.

-
+ Solicitar Formación In-Company
@@ -79,10 +82,66 @@
- +
-
+
+
+

¿Por qué Academy?

+

La formación como parte del sistema, no como un apéndice.

+
+

Cada programa de Academy se diseña considerando el contexto de la organización, sus desafíos actuales y las capacidades que necesita desarrollar. No dictamos cursos estándar a audiencias genéricas.
Academy es la capacidad del Ecosistema IDE que acompaña y sostiene cualquier proceso de transformación.

+
+
+
+
+ + + +
+
+

In Company

+

Programa diseñado exclusivamente para tu organización. Contenido adaptado, casos reales, dinámica acorde al equipo.

+
+
+
+
+ + + +
+
+

Cursos Abiertos

+

Formación en grupos reducidos, con profesionales de distintas organizaciones. Networking y perspectivas diversas.

+
+
+
+
+
+
+
+
+ +

Casos Reales y Aplicados

+

Los participantes trabajan sobre los procesos y desafíos cotidianos de sus propias empresas.

+
+
+ +

Docentes Consultores Senior

+

Instructores con amplia trayectoria liderando auditorías y proyectos en organizaciones reales.

+
+
+ +

Transferencia de Autonomía

+

Herramientas y plantillas listas para aplicar inmediatamente en el puesto de trabajo.

+
+
+
+
+ +
+
+
A MEDIDA DE TU EMPRESA @@ -95,17 +154,11 @@
  • ✓ Materiales personalizados con la identidad y procesos de su empresa.
  • ✓ Evaluación de impacto y seguimiento post-capacitación.
    • - + Solicitar Cotización In-Company →
    - -
    -
    - -
    Espacio Fotográfico Taller In-Company
    -
    -
    +
    diff --git a/includes/footer.html b/includes/footer.html index 7896a88..6e70239 100644 --- a/includes/footer.html +++ b/includes/footer.html @@ -36,7 +36,7 @@
    -

    Explorar

    +

    Explorar

    • Tengo un Desafío
    • Busco una Solución
      • @@ -48,7 +48,7 @@
      -

      Navegación

      +

      Navegación

      • Brújula IDE
      • Academy
        • @@ -62,7 +62,7 @@
        -

        Contacto

        +

        Contacto

        • Sedes: Salta y Jujuy, Argentina @@ -78,13 +78,13 @@

          Seguinos

          - + - + - + diff --git a/js/main.js b/js/main.js index 9d6d1ac..40e6a67 100644 --- a/js/main.js +++ b/js/main.js @@ -544,13 +544,81 @@ window.openCourseModal = function (courseId) { const course = allCourses.find(c => c.id === courseId); if (!course) return; - const titleElem = document.getElementById('modal-course-title'); - const catElem = document.getElementById('modal-course-category'); + const titleElem = document.getElementById('modal-course-title'); + const catElem = document.getElementById('modal-course-category'); const detailsElem = document.getElementById('modal-course-details'); - const ctaElem = document.getElementById('modal-course-cta'); + const ctaElem = document.getElementById('modal-course-cta'); if (titleElem) titleElem.innerText = course.titulo; - if (catElem) catElem.innerText = `${course.categoria} • ${course.modalidad} • ${course.duracion}`; + + if (catElem) { + catElem.innerHTML = ` +
          + ${course.categoria} +
          + +
          + +
          +
          + + + + + +
          +
          + Modalidad + ${course.modalidad} +
          +
          + + +
          +
          + + + + +
          +
          + Duración + ${course.duracion} +
          +
          + + +
          +
          + + + + +
          +
          + Sector + ${course.sector || '—'} +
          +
          + + +
          +
          + + + + + + +
          +
          + Próxima fecha + ${course.proxima_fecha || 'A consultar'} +
          +
          +
          + `; + } if (detailsElem) { const objHtml = course.objetivos.map(obj => `
        • ${obj}
          • `).join('');