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

academy finish

Browse Source
This commit is contained in:
fanfuso
2026-09-10 22:46:24 -03:00
parent 5b93a0905f
commit fdb02b11a5
7 changed files with 345 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/img/academia.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 705 KiB

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

After

Width:  |  Height:  |  Size: 565 KiB

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

After

Width:  |  Height:  |  Size: 714 KiB

css/styles.css
+176
View File
@@ -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;
ide-academy.html
+91 -38
View File
@@ -18,39 +18,42 @@
<main>
<!-- Header Academy -->
<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">CAPACIDADES & APRENDIZAJE</span>
<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/linea_reparto.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);">CAPACIDADES & APRENDIZAJE</span>
<h1 style="margin-bottom: 1.25rem;">Desarrollamos las capacidades que hacen posible la transformación</h1>
<p class="lead-text" style="margin: 0 auto 1.75rem auto;">
<p class="lead-text" style="margin: 0 auto 1.75rem auto;color: var(--text-main);">
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.
</p>
<div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
<a href="#cursos-destacados" class="btn btn-primary btn-sm">Ver Cursos Destacados ↓</a>
<a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Academy_InCompany" class="btn btn-outline btn-sm">Solicitar Formación In-Company</a>
</div>
</div>
</section>
<!-- Propuesta de Valor de la Formación IDE -->
<section class="section-padding-sm bg-subtle-section">
<div class="container">
<div class="grid-3 text-center">
<div class="card">
<!-- <div style="font-size: 2rem; color: #D97706; margin-bottom: 0.5rem;">🎯</div> -->
<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">
<!-- <div style="font-size: 2rem; color: var(--ide-primary); margin-bottom: 0.5rem;">👨‍🏫</div> -->
<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">
<!-- <div style="font-size: 2rem; color: var(--ide-accent); margin-bottom: 0.5rem;">🔄</div> -->
<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>
<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);">Solicitar Formación In-Company</a>
</div>
</div>
</section>
@@ -79,10 +82,66 @@
</div>
</section>
<!-- Sección Formación In-Company a Medida -->
<!-- Propuesta de Valor de la Formación IDE -->
<section class="section-padding bg-subtle-section">
<div class="container">
<div class="card" style="padding: clamp(2rem, 5vw, 3.5rem);">
<div style="display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;">
<div class="fade-in visible">
<p class="eyebrow">¿Por qué Academy?</p>
<h2 style="padding-bottom: 15px;">La formación como parte del sistema, no como un apéndice.</h2>
<div class="divider"></div>
<p>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.<br>Academy es la capacidad del Ecosistema IDE que acompaña y sostiene cualquier proceso de transformación.</p>
</div>
<div style="display: flex; flex-direction: column; gap: 1rem;">
<div class="card-incompany">
<div class="card-cursos-icon">
<svg viewBox="0 0 32 32" fill="currentColor">
<use href="./assets/iconos/fabrica_color.svg"></use>
</svg>
</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">
<!-- <div style="font-size: 2rem; color: #D97706; margin-bottom: 0.5rem;">🎯</div> -->
<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">
<!-- <div style="font-size: 2rem; color: var(--ide-primary); margin-bottom: 0.5rem;">👨‍🏫</div> -->
<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">
<!-- <div style="font-size: 2rem; color: var(--ide-accent); margin-bottom: 0.5rem;">🔄</div> -->
<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="bg-subtle-section" style="padding-bottom: clamp(3.5rem, 7vw, 6.5rem);">
<div class="container">
<div class="card">
<div class="grid-2" style="gap: 3rem; align-items: center;">
<div>
<span class="eyebrow">A MEDIDA DE TU EMPRESA</span>
@@ -95,17 +154,11 @@
<li>✓ Materiales personalizados con la identidad y procesos de su empresa.</li>
<li>✓ Evaluación de impacto y seguimiento post-capacitación.</li>
</ul>
<a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Academy_InCompany_Custom" class="btn btn-primary">
<a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Academy_InCompany_Custom" class="btn btn-primary-cta btn-sm">
Solicitar Cotización In-Company →
</a>
</div>
<div>
<div class="img-placeholder" style="aspect-ratio: 4/3;">
<!-- <div class="img-placeholder-icon">👥</div> -->
<div class="img-placeholder-label">Espacio Fotográfico Taller In-Company</div>
</div>
</div>
<div class="card-academia"></div>
</div>
</div>
</div>
includes/footer.html
+6 -6
View File
@@ -36,7 +36,7 @@
<!-- Columna 2: Ecosistema de Capacidades -->
<div>
<h4 class="footer-heading">Explorar</h4>
<h4 class="footer-heading" style="padding-bottom: 5px;">Explorar</h4>
<ul class="footer-links">
<li><a href="desafios.html" class="footer-link">Tengo un Desafío</a></li>
<li><a href="soluciones.html" class="footer-link">Busco una Solución</a></li>
@@ -48,7 +48,7 @@
<!-- Columna 3: Exploración -->
<div>
<h4 class="footer-heading">Navegación</h4>
<h4 class="footer-heading" style="padding-bottom: 5px;">Navegación</h4>
<ul class="footer-links">
<li><a href="index.html#brujula" class="footer-link">Brújula IDE</a></li>
<li><a href="ide-academy.html" class="footer-link">Academy</a></li>
@@ -62,7 +62,7 @@
<!-- Columna 4: Contacto Institucional & Talento -->
<div>
<h4 class="footer-heading">Contacto</h4>
<h4 class="footer-heading" style="padding-bottom: 5px;">Contacto</h4>
<ul class="footer-links" style="margin-bottom: 1.5rem;">
<li style="font-size: 0.9rem; color: var(--text-muted);">
<strong>Sedes:</strong> Salta y Jujuy, Argentina
@@ -78,13 +78,13 @@
<div style="margin-bottom: 1.25rem;">
<h4 class="footer-heading" style="font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem;">Seguinos</h4>
<div class="footer-socials">
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="footer-social-link">
<a href="https://www.linkedin.com/company/ide-consultores" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="footer-social-link">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="YouTube" class="footer-social-link">
<a href="https://web.facebook.com/ConsultoresIDE" target="_blank" rel="noopener noreferrer" aria-label="YouTube" class="footer-social-link">
<i class="fab fa-facebook"></i>
</a>
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="footer-social-link">
<a href="https://www.instagram.com/ide.consultores/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="footer-social-link">
<i class="fab fa-instagram"></i>
</a>
js/main.js
+69 -1
View File
@@ -550,7 +550,75 @@ window.openCourseModal = function (courseId) {
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 = `
<div class="course-header-top">
<span class="course-badge-category">${course.categoria}</span>
</div>
<div class="course-specs-panel">
<!-- Modalidad -->
<div class="spec-item">
<div class="spec-icon-box spec-icon-blue">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
<line x1="8" y1="21" x2="16" y2="21"></line>
<line x1="12" y1="17" x2="12" y2="21"></line>
</svg>
</div>
<div class="spec-text">
<span class="spec-label">Modalidad</span>
<strong class="spec-value">${course.modalidad}</strong>
</div>
</div>
<!-- Duración -->
<div class="spec-item">
<div class="spec-icon-box spec-icon-purple">
<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 6 12 12 16 14"></polyline>
</svg>
</div>
<div class="spec-text">
<span class="spec-label">Duración</span>
<strong class="spec-value">${course.duracion}</strong>
</div>
</div>
<!-- Sector -->
<div class="spec-item">
<div class="spec-icon-box spec-icon-teal">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
</svg>
</div>
<div class="spec-text">
<span class="spec-label">Sector</span>
<strong class="spec-value">${course.sector || '—'}</strong>
</div>
</div>
<!-- Próxima Fecha -->
<div class="spec-item">
<div class="spec-icon-box spec-icon-amber">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
</div>
<div class="spec-text">
<span class="spec-label">Próxima fecha</span>
<strong class="spec-value highlight-date">${course.proxima_fecha || 'A consultar'}</strong>
</div>
</div>
</div>
`;
}
if (detailsElem) {
const objHtml = course.objetivos.map(obj => `<li>${obj}</li>`).join('');