diff --git a/assets/iconos/cohete_color.svg b/assets/iconos/cohete_color.svg
new file mode 100644
index 0000000..23aca8d
--- /dev/null
+++ b/assets/iconos/cohete_color.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/assets/iconos/escuela_color.svg b/assets/iconos/escuela_color.svg
new file mode 100644
index 0000000..1f2ed73
--- /dev/null
+++ b/assets/iconos/escuela_color.svg
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/iconos/lupa_color.svg b/assets/iconos/lupa_color.svg
new file mode 100644
index 0000000..c16fb5f
--- /dev/null
+++ b/assets/iconos/lupa_color.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/assets/iconos/proceso_color.svg b/assets/iconos/proceso_color.svg
new file mode 100644
index 0000000..d420a69
--- /dev/null
+++ b/assets/iconos/proceso_color.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/assets/iconos/team_color.svg b/assets/iconos/team_color.svg
new file mode 100644
index 0000000..311c404
--- /dev/null
+++ b/assets/iconos/team_color.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/assets/img/ecosistema/academia1.jpg b/assets/img/ecosistema/academia1.jpg
new file mode 100644
index 0000000..1377f59
Binary files /dev/null and b/assets/img/ecosistema/academia1.jpg differ
diff --git a/assets/img/ecosistema/academia2.jpg b/assets/img/ecosistema/academia2.jpg
new file mode 100644
index 0000000..8f4c9a0
Binary files /dev/null and b/assets/img/ecosistema/academia2.jpg differ
diff --git a/assets/img/ecosistema/academy.jpg b/assets/img/ecosistema/academy.jpg
new file mode 100644
index 0000000..7f2241f
Binary files /dev/null and b/assets/img/ecosistema/academy.jpg differ
diff --git a/assets/img/ecosistema/academy2.jpg b/assets/img/ecosistema/academy2.jpg
new file mode 100644
index 0000000..a89bfd9
Binary files /dev/null and b/assets/img/ecosistema/academy2.jpg differ
diff --git a/assets/img/ecosistema/digital2.jpg b/assets/img/ecosistema/digital2.jpg
new file mode 100644
index 0000000..e2cec55
Binary files /dev/null and b/assets/img/ecosistema/digital2.jpg differ
diff --git a/assets/img/ecosistema/projects2.jpg b/assets/img/ecosistema/projects2.jpg
new file mode 100644
index 0000000..d13e628
Binary files /dev/null and b/assets/img/ecosistema/projects2.jpg differ
diff --git a/assets/img/hero/academy.jpg b/assets/img/hero/academy.jpg
new file mode 100644
index 0000000..6080f10
Binary files /dev/null and b/assets/img/hero/academy.jpg differ
diff --git a/assets/img/hero/hero-academy.jpg b/assets/img/hero/hero-academy.jpg
new file mode 100644
index 0000000..192c6ae
Binary files /dev/null and b/assets/img/hero/hero-academy.jpg differ
diff --git a/assets/img/hero/hero_008.png b/assets/img/hero/hero_008.png
new file mode 100644
index 0000000..d332a0b
Binary files /dev/null and b/assets/img/hero/hero_008.png differ
diff --git a/assets/img/hero/hero_009.png b/assets/img/hero/hero_009.png
new file mode 100644
index 0000000..29cfcfd
Binary files /dev/null and b/assets/img/hero/hero_009.png differ
diff --git a/assets/img/hero/hero_010.png b/assets/img/hero/hero_010.png
new file mode 100644
index 0000000..12a4894
Binary files /dev/null and b/assets/img/hero/hero_010.png differ
diff --git a/assets/img/hero/CONATCTO.png b/assets/img/hero/hero_011.png
similarity index 100%
rename from assets/img/hero/CONATCTO.png
rename to assets/img/hero/hero_011.png
diff --git a/assets/img/ecosistema/hospital.jpg b/assets/img/hospital.jpg
similarity index 100%
rename from assets/img/ecosistema/hospital.jpg
rename to assets/img/hospital.jpg
diff --git a/assets/img/somos/logo.jpg b/assets/img/somos/logo.jpg
new file mode 100644
index 0000000..0989377
Binary files /dev/null and b/assets/img/somos/logo.jpg differ
diff --git a/assets/img/somos/logo.png b/assets/img/somos/logo.png
new file mode 100644
index 0000000..af169a4
Binary files /dev/null and b/assets/img/somos/logo.png differ
diff --git a/assets/img/somos/mapa.png b/assets/img/somos/mapa.png
new file mode 100644
index 0000000..3016fc1
Binary files /dev/null and b/assets/img/somos/mapa.png differ
diff --git a/assets/img/somos/mapa2.png b/assets/img/somos/mapa2.png
new file mode 100644
index 0000000..1060a70
Binary files /dev/null and b/assets/img/somos/mapa2.png differ
diff --git a/assets/img/somos/mirada_sistemica.jpg b/assets/img/somos/mirada_sistemica.jpg
new file mode 100644
index 0000000..575d69a
Binary files /dev/null and b/assets/img/somos/mirada_sistemica.jpg differ
diff --git a/assets/img/somos/rigor-practico.png b/assets/img/somos/rigor-practico.png
new file mode 100644
index 0000000..baabb65
Binary files /dev/null and b/assets/img/somos/rigor-practico.png differ
diff --git a/assets/video/capacitacion.mp4 b/assets/video/capacitacion.mp4
deleted file mode 100644
index e7cf126..0000000
Binary files a/assets/video/capacitacion.mp4 and /dev/null differ
diff --git a/assets/video/desktop_working.mp4 b/assets/video/desktop_working.mp4
deleted file mode 100644
index 3f50f81..0000000
Binary files a/assets/video/desktop_working.mp4 and /dev/null differ
diff --git a/assets/video/header_ide_loop.mp4 b/assets/video/header_ide_loop.mp4
deleted file mode 100644
index d140609..0000000
Binary files a/assets/video/header_ide_loop.mp4 and /dev/null differ
diff --git a/assets/video/header_ide_loop2.mp4 b/assets/video/header_ide_loop2.mp4
deleted file mode 100644
index 72fac54..0000000
Binary files a/assets/video/header_ide_loop2.mp4 and /dev/null differ
diff --git a/assets/video/header_ide_loop3.mp4 b/assets/video/header_ide_loop3.mp4
deleted file mode 100644
index 35a6e5f..0000000
Binary files a/assets/video/header_ide_loop3.mp4 and /dev/null differ
diff --git a/assets/video/linea_reparto.mp4 b/assets/video/linea_reparto.mp4
deleted file mode 100644
index 283b802..0000000
Binary files a/assets/video/linea_reparto.mp4 and /dev/null differ
diff --git a/css/styles.css b/css/styles.css
index 6c8cd82..da0b6cc 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -35,6 +35,7 @@
--ide-accent-hover: #4fb389;
--ide-accent-soft: rgba(19, 167, 138, 0.12);
+ --ide-academy-soft: rgba(167, 19, 19, 0.12);
--card-overlay: rgba(227, 235, 233, 0.85);
--ide-dark-gray: #1b1717;
--teal-dark: #1B5E6E;
@@ -209,6 +210,16 @@ h1 {
color: var(--ide-accent);
margin-bottom: 0.75rem;
}
+.eyebrow-a {
+ display: inline-block;
+ font-family: 'Barlow Condensed', sans-serif;
+ font-weight: 600;
+ font-size: 1.2rem;
+ text-transform: uppercase;
+ letter-spacing: 0.12em;
+ color: var(--ide-academy);
+ margin-bottom: 0.75rem;
+}
h2, h3, h4, h5, h6 {
font-family: 'Barlow Semi Condensed', sans-serif;
@@ -322,6 +333,19 @@ p, li, .lead-text, .text-body, .text-muted {
.bg3{
background: radial-gradient(circle at 50% 50%, var(--ide-accent-soft) 0%, transparent 100%), var(--bg-body);
}
+.bg4{
+ background: radial-gradient(circle at 50% 50%, var(--ide-academy-soft) 0%, transparent 100%), var(--bg-body);
+}
+.bg5{
+ background: radial-gradient(circle at 20% 80%, var(--ide-academy-soft) 0%, transparent 50%), var(--bg-body);
+}
+.bg6 {
+ background: linear-gradient(
+ 135deg,
+ color-mix(in srgb, var(--ide-primary) 10%, transparent) 0%,
+ color-mix(in srgb, var(--ide-accent) 10%, transparent) 100%
+ );
+}
.herobg-1{
background-image:
linear-gradient(
@@ -392,6 +416,34 @@ p, li, .lead-text, .text-body, .text-muted {
background-position: center;
background-repeat: no-repeat;
}
+.herobg-6{
+ background-image:
+ linear-gradient(
+ to right,
+ rgba(0, 0, 0, 0.6) 0%,
+ rgba(0, 0, 0, 0.3) 20%,
+ rgba(0, 0, 0, 0.15) 70%,
+ rgba(0, 0, 0, 0.0) 100%
+ ),
+ url('../assets/img/ecosistema/academy2.jpg');
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+.herobg-7{
+ background-image:
+ linear-gradient(
+ to right,
+ rgba(0, 0, 0, 0.6) 0%,
+ rgba(0, 0, 0, 0.3) 20%,
+ rgba(0, 0, 0, 0.15) 70%,
+ rgba(0, 0, 0, 0.0) 100%
+ ),
+ url('../assets/img/hero/hero_011.png');
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
@@ -730,6 +782,32 @@ p, li, .lead-text, .text-body, .text-muted {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
+.btn-academy {
+ background-color: var(--ide-academy);
+ color: #FFFFFF;
+ border-color: var(--ide-academy);
+}
+
+.btn-academy:hover {
+ background-color: var(--ide-academy-dark);
+ border-color: var(--ide-academy-dark);
+ color: #FFFFFF;
+ box-shadow: var(--shadow-md);
+ transform: translateY(-1px);
+}
+.btn-academy2 {
+ background-color: white;
+ color: var(--ide-academy);
+ border-color: var(--ide-academy);
+}
+
+.btn-academy2:hover {
+ background-color: var(--ide-academy-dark);
+ border-color: var(--ide-academy-dark);
+ color: #FFFFFF;
+ box-shadow: var(--shadow-md);
+ transform: translateY(-1px);
+}
.btn-accent {
background-color: var(--ide-accent);
@@ -891,6 +969,20 @@ p, li, .lead-text, .text-body, .text-muted {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
+.card-a {
+ background-color: var(--bg-surface);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-md);
+ padding: 1.75rem;
+ transition: all var(--transition-normal);
+ position: relative;
+}
+
+.card-a:hover {
+ border-color: var(--ide-academy);
+ box-shadow: var(--shadow-md);
+ transform: translateY(-2px);
+}
/*tarjetas especiales*/
/*Agro*/
@@ -2094,8 +2186,8 @@ canvas {
}
/* somos ide */
.card-portrait {
- width: 140px;
- height: 140px;
+ width: 180px;
+ height: 180px;
border-radius: 50%;
overflow: hidden; /* recorta la imagen al círculo */
margin: 0 auto 1.25rem auto;
@@ -2152,6 +2244,9 @@ canvas {
.m4 .somos-title{
color: var(--ide-excellence);
}
+.m5 .somos-title{
+ color: var(--ide-primary);
+}
.card-incompany {
background-image: linear-gradient(var(--card-overlay), var(--card-overlay)), url('../assets/img/incompany.png');
@@ -2211,20 +2306,6 @@ canvas {
justify-content: center;
}
-.card-academia {
- background-image: url('../assets/img/academia-incompany.jpg');
- 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: 7/5; /* ← 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);
@@ -2302,54 +2383,6 @@ canvas {
margin: 0;
}
-/* Sub-grid de la sección In-Company a medida */
-.incompany-subgrid {
- display: grid;
- grid-template-columns: 1fr auto;
- gap: 1.5rem;
- align-items: end;
- margin-top: 0.75rem;
-}
-
-.incompany-tags {
- list-style: none;
- display: flex;
- flex-direction: column;
- gap: 0.35rem;
- font-size: 0.9rem;
- color: var(--text-muted);
- margin: 0;
- padding: 0;
-}
-
-.incompany-tags li {
- display: flex;
- align-items: center;
- gap: 0.5rem;
-}
-
-.incompany-tags i {
- color: var(--ide-primary);
- font-size: 0.8rem;
-}
-
-.incompany-cta {
- display: flex;
- justify-content: flex-end;
-}
-
-/* Responsive: en mobile se apila */
-@media (max-width: 640px) {
- .incompany-subgrid {
- grid-template-columns: 1fr;
- align-items: start;
- }
-
- .incompany-cta {
- justify-content: flex-start;
- }
-}
-
/* La tarjeta como columna Flex para centrado y alturas parejas */
.academy-card {
display: flex;
@@ -2358,15 +2391,14 @@ canvas {
text-align: center; /* Centra textos h4 y p */
height: 100%; /* Si están en un grid, todas tendrán la misma altura */
padding: 2rem 1.5rem;
- background: linear-gradient(180deg, var(--ide-accent-soft) 0%, var(--bg-surface) 100%);
- border: 1px solid var(--border-color);
+ background: linear-gradient(180deg, var(--bg-subtle) 0%, var(--bg-surface) 100%);
border-radius: var(--radius-md);
transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.academy-card:hover {
transform: translateY(-4px);
- border-color: var(--ide-accent, #007bff);
+ border-color: var(--ide-academy-dark);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}
@@ -2384,7 +2416,7 @@ canvas {
font-weight: 700;
letter-spacing: 0.05em;
margin: 0;
- color: var(--text-main);
+ color: var(--ide-academy-dark, #0c4a60);
}
/* Máscara del SVG */
@@ -2392,7 +2424,7 @@ canvas {
display: block;
width: 1.6rem;
height: 1.6rem;
- background-color: var(--ide-accent-dark);
+ background-color: var(--ide-academy-dark);
-webkit-mask-image: url('../assets/iconos/lupa_color.svg');
mask-image: url('../assets/iconos/lupa_color.svg');
-webkit-mask-repeat: no-repeat;
@@ -2406,7 +2438,7 @@ canvas {
display: block;
width: 1.6rem;
height: 1.6rem;
- background-color: var(--ide-accent-dark);
+ background-color: var(--ide-academy-dark);
-webkit-mask-image: url('../assets/iconos/escuela_color.svg');
mask-image: url('../assets/iconos/escuela_color.svg');
-webkit-mask-repeat: no-repeat;
@@ -2420,7 +2452,7 @@ canvas {
display: block;
width: 1.6rem;
height: 1.6rem;
- background-color: var(--ide-accent-dark);
+ background-color: var(--ide-academy-dark);
-webkit-mask-image: url('../assets/iconos/proceso_color.svg');
mask-image: url('../assets/iconos/proceso_color.svg');
-webkit-mask-repeat: no-repeat;
@@ -2434,7 +2466,7 @@ canvas {
display: block;
width: 1.6rem;
height: 1.6rem;
- background-color: var(--ide-accent-dark);
+ background-color: var(--ide-academy-dark);
-webkit-mask-image: url('../assets/iconos/team_color.svg');
mask-image: url('../assets/iconos/team_color.svg');
-webkit-mask-repeat: no-repeat;
@@ -2448,7 +2480,7 @@ canvas {
display: block;
width: 1.6rem;
height: 1.6rem;
- background-color: var(--ide-accent-dark);
+ background-color: var(--ide-academy-dark);
-webkit-mask-image: url('../assets/iconos/cohete_color.svg');
mask-image: url('../assets/iconos/cohete_color.svg');
-webkit-mask-repeat: no-repeat;
@@ -2644,6 +2676,26 @@ canvas {
filter: grayscale(100%);
opacity: 0.1;
}
+.parallax-bg-layer4 {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+
+ /* Imagen de fondo */
+ background-image: url('../assets/img/ecosistema/academia1.jpg');
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: cover;
+
+ /* CLAVE: Deja la imagen fija en el viewport mientras el sitio scrollea */
+ background-attachment: fixed;
+
+ /* Estética sobria IDE */
+ filter: grayscale(100%);
+ opacity: 0.05;
+}
/* Cortina suave en bordes superior e inferior para fundir con el header/footer */
.parallax-overlay {
position: absolute;
@@ -2831,7 +2883,982 @@ canvas {
.footer-credit:hover {
color: var(--text-body, #333);
}
+/* ==========================================================================
+ SECCIÓN CURSOS — Layout 4 columnas (texto + 3 cards)
+ ========================================================================== */
+.cursos-layout {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ gap: 1.5rem;
+ align-items: start;
+}
+
+.cursos-intro {
+ grid-column: 1 / 2;
+ padding-right: 0.5rem;
+}
+
+.cursos-intro h2 {
+ margin-bottom: 0.75rem;
+}
+
+.cursos-intro .lead-text {
+ font-size: 1rem;
+ line-height: 1.6;
+ max-width: 100%;
+}
+
+/* Contenedor de cards: 3 columnas internas */
+.cursos-cards {
+ grid-column: 2 / 5;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 1.25rem;
+}
+
+/* ==========================================================================
+ CARD DE CURSO (versión compacta)
+ ========================================================================== */
+
+.curso-card {
+ display: flex;
+ flex-direction: column;
+ padding: 1.25rem;
+ gap: 0.65rem;
+ height: 100%;
+}
+
+.curso-card__top {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 0.5rem;
+ flex-wrap: wrap;
+}
+
+.curso-card__top .ecosystem-badge {
+ font-size: 0.7rem;
+ letter-spacing: 0.06em;
+ padding: 0.18rem 0.6rem;
+ margin-bottom: 0;
+}
+
+.curso-card__badge-prox {
+ font-size: 0.68rem;
+ font-weight: 600;
+ padding: 0.18rem 0.55rem;
+ border-radius: var(--radius-sm);
+ color: #D97706;
+ background-color: rgba(217, 119, 6, 0.08);
+ border: 1px solid rgba(217, 119, 6, 0.25);
+ white-space: nowrap;
+}
+
+.curso-card__title {
+ font-family: 'Barlow Semi Condensed', sans-serif;
+ font-size: 1.05rem;
+ font-weight: 700;
+ line-height: 1.3;
+ color: var(--text-main);
+ margin: 0;
+ /* Truncado a 3 líneas */
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+.curso-card__desc {
+ font-size: 0.82rem;
+ color: var(--text-muted);
+ line-height: 1.5;
+ margin: 0;
+ /* Truncado a 2 líneas */
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+/* Lista de specs con iconos */
+.curso-card__specs {
+ list-style: none;
+ padding: 0.65rem 0 0 0;
+ margin: 0.4rem 0 0 0;
+ border-top: 1px solid var(--border-color);
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 0.4rem 0.5rem;
+ font-size: 0.78rem;
+ color: var(--text-body);
+}
+
+.curso-card__specs li {
+ display: flex;
+ align-items: center;
+ gap: 0.4rem;
+ line-height: 1.3;
+ min-width: 0;
+}
+
+.curso-card__specs li i {
+ color: var(--ide-academy, #c8102e);
+ font-size: 0.8rem;
+ flex-shrink: 0;
+ width: 14px;
+ text-align: center;
+}
+
+.curso-card__specs li span,
+.curso-card__specs li {
+ /* Trunca textos largos (ej: "Online sincrónico") */
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.curso-card__specs li.is-pending {
+ color: #D97706;
+ font-weight: 600;
+}
+
+.curso-card__specs li.is-pending i {
+ color: #D97706;
+}
+
+/* CTA compacto al pie */
+.curso-card__cta {
+ margin-top: auto;
+ width: 100%;
+ justify-content: center;
+ gap: 0.4rem;
+ padding: 0.5rem 1rem;
+ font-size: 0.82rem;
+}
+
+.curso-card__cta i {
+ font-size: 0.75rem;
+ transition: transform var(--transition-fast);
+}
+
+.curso-card__cta:hover i {
+ transform: translateX(3px);
+}
+/* ==========================================================================
+ SECCIÓN IN-COMPANY — Banner en 3 columnas
+ ========================================================================== */
+
+.incompany-banner {
+ display: grid;
+ grid-template-columns: 1.2fr 1fr 1fr;
+ gap: 2.5rem;
+ align-items: center;
+ /* Opcional: darle aire vertical si querés que respire más como banner */
+ /* padding-block: 1rem; */
+}
+
+/* --- Columna 1: Texto --- */
+.incompany-banner__intro h2 {
+ margin-bottom: 0.5rem;
+}
+
+.incompany-banner__lead {
+ font-size: 0.98rem;
+ color: var(--text-body);
+ line-height: 1.65;
+ margin: 0.75rem 0 0 0;
+}
+
+/* --- Columna 2: Formatos --- */
+.incompany-banner__formats {
+ display: flex;
+ flex-direction: column;
+ gap: 0.85rem;
+}
+
+.incompany-banner__subtitle {
+ font-family: 'Barlow Condensed', sans-serif;
+ font-weight: 600;
+ font-size: 0.85rem;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ color: var(--text-muted);
+ margin: 0;
+}
+
+.incompany-banner__list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ font-size: 0.95rem;
+ color: var(--text-body);
+}
+
+.incompany-banner__list li {
+ display: flex;
+ align-items: center;
+ gap: 0.6rem;
+ line-height: 1.4;
+}
+
+.incompany-banner__list li i {
+ color: var(--ide-primary);
+ font-size: 0.8rem;
+ flex-shrink: 0;
+}
+
+.incompany-banner__cta {
+ align-self: flex-start;
+ margin-top: 0.5rem;
+}
+
+/* --- Columna 3: Imagen --- */
+.incompany-banner__visual {
+ width: 100%;
+ /* Aspecto controlado: ajustá según la foto */
+ aspect-ratio: 4 / 5;
+ border-radius: var(--radius-md);
+ background-image: url('../assets/img/academia-incompany.jpg');
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ border: 1px solid var(--border-color);
+ box-shadow: var(--shadow-sm);
+}
+/* ==========================================================================
+ SECCIÓN IN-COMPANY — Tarjeta dividida en 3 (imagen a sangre)
+ ========================================================================== */
+
+.incompany-card {
+ display: grid;
+ grid-template-columns: 1.1fr 0.9fr 1fr;
+ gap: 0; /* sin gap: la imagen toca los bordes */
+ align-items: stretch; /* todas las columnas misma altura */
+ background-color: var(--bg-surface);
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-lg);
+ overflow: hidden; /* recorta la imagen a los bordes redondeados */
+ box-shadow: var(--shadow-sm);
+ min-height: 200px; /* para que la imagen tenga presencia */
+}
+
+/* --- Columna 1: Texto --- */
+.incompany-card__intro {
+ padding: 2.5rem 2.25rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.incompany-card__intro h2 {
+ margin-bottom: 0.75rem;
+ font-size: clamp(1.6rem, 2.5vw, 2.1rem);
+}
+
+.incompany-card__lead {
+ font-size: 0.98rem;
+ color: var(--text-body);
+ line-height: 1.65;
+ margin: 0;
+ max-width: 42ch;
+}
+
+/* --- Columna 2: Formatos --- */
+.incompany-card__formats {
+ padding: 2.5rem 2rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 1rem;
+ border-left: 1px solid var(--border-subtle);
+ background-color: var(--bg-body);
+}
+
+.incompany-card__subtitle {
+ font-family: 'Barlow Condensed', sans-serif;
+ font-weight: 600;
+ font-size: 0.85rem;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ color: var(--text-muted);
+ margin: 0;
+}
+
+.incompany-card__list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 0.55rem;
+ font-size: 0.95rem;
+ color: var(--text-body);
+}
+
+.incompany-card__list li {
+ display: flex;
+ align-items: center;
+ gap: 0.6rem;
+ line-height: 1.4;
+}
+
+.incompany-card__list li i {
+ color: var(--ide-academy);
+ font-size: 0.8rem;
+ flex-shrink: 0;
+}
+
+.incompany-card__cta {
+ align-self: flex-start;
+ margin-top: 0.5rem;
+}
+
+/* --- Columna 3: Imagen a sangre --- */
+.incompany-card__visual {
+ /* Sin padding: cubre toda la celda del grid */
+ background-image: url('../assets/img/academia-incompany.jpg');
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ /* Mínimo alto para que se vea bien en pantallas chicas */
+ min-height: 100%;
+}
+/* ==========================================================================
+ SECCIÓN CAMPUS VIRTUAL — Banner en 3 columnas (intro + 2 accesos)
+ ========================================================================== */
+
+.campus-banner {
+ display: grid;
+ grid-template-columns: 1.1fr 1fr 1fr;
+ gap: 0;
+ align-items: stretch;
+ background: linear-gradient(135deg, var(--ide-academy) 0%, var(--ide-academy-dark) 100%);
+ border: none;
+ border-radius: var(--radius-lg);
+ overflow: hidden;
+ box-shadow: var(--shadow-md);
+ min-height: 250px;
+}
+
+/* --- Col 1: Intro --- */
+.campus-banner__intro {
+ padding: 2.75rem 2.5rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.campus-banner__eyebrow {
+ color: rgba(255, 255, 255, 0.75);
+}
+
+.campus-banner__title {
+ color: #ffffff;
+ margin-bottom: 0.75rem;
+ font-size: clamp(1.5rem, 2.4vw, 2rem);
+}
+
+.campus-banner__lead {
+ color: rgba(255, 255, 255, 0.9);
+ font-size: 1rem;
+ line-height: 1.65;
+ margin: 0;
+ max-width: 42ch;
+}
+
+/* --- Col 2 y 3: Accesos --- */
+.campus-banner__access {
+ padding: 2.5rem 2rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 0.85rem;
+ border-left: 1px solid rgba(255, 255, 255, 0.15);
+ background-color: rgba(255, 255, 255, 0.06);
+ transition: background-color var(--transition-fast);
+}
+
+.campus-banner__access:hover {
+ background-color: rgba(255, 255, 255, 0.10);
+}
+
+/* Icono en círculo */
+.campus-banner__icon {
+ width: 52px;
+ height: 52px;
+ border-radius: 50%;
+ background-color: rgba(255, 255, 255, 0.15);
+ border: 1px solid rgba(255, 255, 255, 0.25);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #ffffff;
+ font-size: 1.35rem;
+ margin-bottom: 0.25rem;
+ transition: background-color var(--transition-fast), transform var(--transition-fast);
+}
+
+.campus-banner__access:hover .campus-banner__icon {
+ background-color: rgba(255, 255, 255, 0.22);
+ transform: translateY(-2px);
+}
+
+.campus-banner__access-title {
+ color: #ffffff;
+ font-size: 1.15rem;
+ font-weight: 700;
+ margin: 0;
+}
+
+.campus-banner__access-desc {
+ color: rgba(255, 255, 255, 0.85);
+ font-size: 0.92rem;
+ line-height: 1.55;
+ margin: 0;
+}
+
+/* Botón blanco sobre gradiente */
+.campus-banner__btn {
+ align-self: flex-start;
+ margin-top: 0.5rem;
+ background-color: #ffffff;
+ color: var(--ide-primary);
+ border-color: #ffffff;
+ font-weight: 600;
+ font-size: 0.85rem;
+ padding: 0.55rem 1.1rem;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ transition: all var(--transition-fast);
+}
+
+.campus-banner__btn:hover {
+ background-color: transparent;
+ color: #ffffff;
+ border-color: #ffffff;
+ transform: translateY(-2px);
+}
+
+.campus-banner__btn i {
+ font-size: 0.75rem;
+ transition: transform var(--transition-fast);
+}
+
+.campus-banner__btn:hover i {
+ transform: translateX(3px);
+}
+
+/* ==========================================================================
+ SECCIÓN FILOSOFÍA DE TRABAJO
+ ========================================================================== */
+
+/* --- Bloque superior: título + texto --- */
+.filosofia-intro {
+ display: grid;
+ grid-template-columns: 1fr 1.1fr;
+ gap: 3.5rem;
+ align-items: start;
+ margin-bottom: 3.5rem;
+}
+
+.filosofia-intro__title {
+ font-size: clamp(1.6rem, 2.8vw, 2.3rem);
+ line-height: 1.2;
+ margin: 0;
+}
+
+.filosofia-intro__lead {
+ font-size: 1rem;
+ color: var(--text-body);
+ line-height: 1.7;
+ margin: 0 0 1rem 0;
+}
+
+.filosofia-intro__lead:last-child {
+ margin-bottom: 0;
+}
+
+/* --- Cinta inferior: pilares --- */
+.filosofia-pilares {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 1.25rem;
+}
+
+/* --- Card de pilar (cuadrada) --- */
+.pilar-card {
+ aspect-ratio: 5 / 4;
+ /*background-color: var(--bg-surface);*/
+ border: 1px solid var(--border-color);
+ border-radius: var(--radius-md);
+ padding: 1.75rem 1.5rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ gap: 0.75rem;
+ transition: all var(--transition-normal);
+ position: relative;
+ overflow: hidden;
+}
+
+/* Línea superior de acento que aparece al hover */
+.pilar-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 3px;
+ background: linear-gradient(90deg, var(--ide-accent) 0%, var(--ide-primary) 100%);
+ transform: scaleX(0);
+ transform-origin: left;
+ transition: transform var(--transition-normal);
+}
+
+.pilar-card:hover {
+ border-color: var(--ide-accent);
+ box-shadow: var(--shadow-md);
+ transform: translateY(-4px);
+}
+
+.pilar-card:hover::before {
+ transform: scaleX(1);
+}
+
+/* Icono grande */
+.pilar-card__icon {
+ width: 56px;
+ height: 56px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ background-color: var(--ide-accent-soft);
+ color: var(--ide-accent);
+ font-size: 1.6rem;
+ margin-bottom: 0.25rem;
+ transition: transform var(--transition-normal), background-color var(--transition-normal);
+}
+
+.pilar-card:hover .pilar-card__icon {
+ transform: scale(1.08);
+ background-color: var(--ide-accent);
+ color: #FFFFFF;
+}
+
+/* Título mediano */
+.pilar-card__title {
+ font-family: 'Barlow Semi Condensed', sans-serif;
+ font-size: 1.05rem;
+ font-weight: 700;
+ line-height: 1.25;
+ color: var(--text-main);
+ margin: 0;
+}
+
+/* Descripción corta */
+.pilar-card__desc {
+ font-size: 0.82rem;
+ color: var(--text-muted);
+ line-height: 1.5;
+ margin: 0;
+ max-width: 22ch;
+}
+
+/* ==========================================================================
+ SECCIÓN TRIPLE — Texto (35%) + Imagen (40%) + Features (25%)
+ ========================================================================== */
+
+.triple-section {
+ display: grid;
+ grid-template-columns: 35% 40% 25%;
+ gap: 2.5rem;
+ align-items: center;
+}
+
+/* --- Col 1: Intro (texto) --- */
+.triple-section__intro {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.triple-section__title {
+ font-size: clamp(1.5rem, 2.4vw, 2rem);
+ line-height: 1.2;
+ margin: 0 0 1rem 0;
+}
+
+.triple-section__lead {
+ font-size: 0.98rem;
+ color: var(--text-body);
+ line-height: 1.7;
+ margin: 0;
+ max-width: 42ch;
+}
+
+/* --- Col 2: Imagen PNG --- */
+.triple-section__visual {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+}
+
+.triple-section__visual img {
+ width: 100%;
+ height: auto;
+ max-height: 480px;
+ object-fit: contain;
+ display: block;
+ /* Filtro suave opcional para integrar la imagen al sitio */
+ filter: drop-shadow(0 8px 24px rgba(10, 72, 94, 0.10));
+}
+
+/* --- Col 3: Features con icono --- */
+.triple-section__features {
+ display: flex;
+ flex-direction: column;
+ gap: 1.25rem;
+}
+
+.triple-feature {
+ display: flex;
+ align-items: flex-start;
+ gap: 0.85rem;
+}
+
+.triple-feature__icon {
+ flex-shrink: 0;
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+ background-color: var(--ide-accent-soft);
+ color: var(--ide-primary);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.05rem;
+ transition: transform var(--transition-fast),
+ background-color var(--transition-fast),
+ color var(--transition-fast);
+}
+
+.triple-feature:hover .triple-feature__icon {
+ transform: scale(1.08);
+ background-color: var(--ide-primary);
+ color: #FFFFFF;
+}
+
+.triple-feature__text {
+ font-size: 0.9rem;
+ color: var(--text-body);
+ line-height: 1.5;
+ margin: 0.4rem 0 0 0;
+}
+
+/* ==========================================================================
+ RESPONSIVE
+ ========================================================================== */
+
+/* Tablet: 2 columnas — texto+imagen arriba, features abajo */
+@media (max-width: 992px) {
+ .triple-section {
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ }
+
+ .triple-section__visual {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ }
+
+ .triple-section__intro {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ }
+
+ .triple-section__features {
+ grid-column: 1 / -1;
+ grid-row: 2 / 3;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.25rem;
+ padding-top: 1.5rem;
+ border-top: 1px solid var(--border-color);
+ }
+}
+
+/* Mobile: todo apilado */
+@media (max-width: 640px) {
+ .triple-section {
+ grid-template-columns: 1fr;
+ gap: 1.75rem;
+ }
+
+ .triple-section__intro,
+ .triple-section__visual {
+ grid-column: 1 / -1;
+ grid-row: auto;
+ }
+
+ .triple-section__visual img {
+ max-height: 320px;
+ }
+
+ .triple-section__features {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ padding-top: 1.5rem;
+ }
+}
+
+/* ==========================================================================
+ RESPONSIVE
+ ========================================================================== */
+
+/* Tablet: intro en 1 columna, pilares en 2x2 */
+@media (max-width: 992px) {
+ .filosofia-intro {
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
+ margin-bottom: 2.5rem;
+ }
+
+ .filosofia-pilares {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1rem;
+ }
+
+ .pilar-card {
+ aspect-ratio: auto;
+ min-height: 220px;
+ padding: 1.75rem 1.25rem;
+ }
+}
+
+/* Mobile: pilares en 1 columna con layout horizontal */
+@media (max-width: 640px) {
+ .filosofia-pilares {
+ grid-template-columns: 1fr;
+ gap: 0.85rem;
+ }
+
+ .pilar-card {
+ aspect-ratio: auto;
+ min-height: auto;
+ flex-direction: row;
+ align-items: flex-start;
+ text-align: left;
+ padding: 1.25rem;
+ gap: 1rem;
+ }
+
+ .pilar-card::before {
+ width: 3px;
+ height: 100%;
+ transform: scaleY(0);
+ transform-origin: top;
+ }
+
+ .pilar-card:hover::before {
+ transform: scaleY(1);
+ }
+
+ .pilar-card__icon {
+ flex-shrink: 0;
+ width: 44px;
+ height: 44px;
+ font-size: 1.25rem;
+ margin-bottom: 0;
+ }
+
+ .pilar-card__title,
+ .pilar-card__desc {
+ text-align: left;
+ max-width: 100%;
+ }
+}
+
+/* ==========================================================================
+ RESPONSIVE
+ ========================================================================== */
+
+/* Tablet: intro arriba full-width, accesos en 2 columnas abajo */
+@media (max-width: 992px) {
+ .campus-banner {
+ grid-template-columns: 1fr 1fr;
+ min-height: auto;
+ }
+
+ .campus-banner__intro {
+ grid-column: 1 / -1;
+ padding: 2.25rem 2rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+ }
+}
+
+/* Mobile: 1 columna, todo apilado */
+@media (max-width: 640px) {
+ .campus-banner {
+ grid-template-columns: 1fr;
+ }
+
+ .campus-banner__intro {
+ padding: 1.75rem 1.5rem;
+ }
+
+ .campus-banner__access {
+ padding: 1.75rem 1.5rem;
+ border-left: none;
+ border-top: 1px solid rgba(255, 255, 255, 0.15);
+ }
+
+ .campus-banner__btn {
+ align-self: stretch;
+ justify-content: center;
+ }
+}
+
+/* ==========================================================================
+ RESPONSIVE
+ ========================================================================== */
+
+/* Tablet: 2 columnas — texto y formatos arriba, imagen abajo a sangre */
+@media (max-width: 992px) {
+ .incompany-card {
+ grid-template-columns: 1fr 1fr;
+ min-height: auto;
+ }
+
+ .incompany-card__formats {
+ border-left: 1px solid var(--border-subtle);
+ }
+
+ .incompany-card__visual {
+ grid-column: 1 / -1;
+ aspect-ratio: 16 / 7;
+ min-height: 260px;
+ }
+}
+
+/* Mobile: 1 columna, se apila todo */
+@media (max-width: 640px) {
+ .incompany-card {
+ grid-template-columns: 1fr;
+ }
+
+ .incompany-card__intro {
+ padding: 1.75rem 1.5rem;
+ }
+
+ .incompany-card__formats {
+ padding: 1.75rem 1.5rem;
+ border-left: none;
+ border-top: 1px solid var(--border-subtle);
+ }
+
+ .incompany-card__visual {
+ aspect-ratio: 16 / 10;
+ min-height: 200px;
+ }
+
+ .incompany-card__cta {
+ align-self: stretch;
+ text-align: center;
+ justify-content: center;
+ }
+}
+/* ==========================================================================
+ RESPONSIVE
+ ========================================================================== */
+
+/* Tablet: 2 columnas, imagen se va abajo a la derecha */
+@media (max-width: 992px) {
+ .incompany-banner {
+ grid-template-columns: 1.2fr 1fr;
+ gap: 2rem;
+ }
+
+ .incompany-banner__visual {
+ grid-column: 1 / -1;
+ aspect-ratio: 16 / 9;
+ }
+}
+
+/* Mobile: 1 columna y se oculta la imagen */
+@media (max-width: 640px) {
+ .incompany-banner {
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
+ }
+
+ .incompany-banner__visual {
+ display: none;
+ }
+
+ .incompany-banner__cta {
+ align-self: stretch;
+ text-align: center;
+ justify-content: center;
+ }
+}
+/* ==========================================================================
+ RESPONSIVE
+ ========================================================================== */
+
+/* Tablet grande: texto a la izquierda, cards en 2 columnas */
+@media (max-width: 1100px) {
+ .cursos-layout {
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ }
+
+ .cursos-intro {
+ grid-column: 1 / 2;
+ }
+
+ .cursos-cards {
+ grid-column: 2 / 3;
+ grid-template-columns: 1fr;
+ }
+}
+
+/* Mobile: todo apilado a 1 columna */
+@media (max-width: 768px) {
+ .cursos-layout {
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
+ }
+
+ .cursos-intro {
+ grid-column: 1 / -1;
+ padding-right: 0;
+ }
+
+ .cursos-cards {
+ grid-column: 1 / -1;
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+
+ .curso-card__specs {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+/* Mobile chico: specs a 1 columna */
+@media (max-width: 420px) {
+ .curso-card__specs {
+ grid-template-columns: 1fr;
+ }
+}
/* =========================================================
RESPONSIVE (Móviles y Tablets)
========================================================= */
diff --git a/ecosistema.html b/ecosistema.html
index ee9cca4..e8dcc31 100644
--- a/ecosistema.html
+++ b/ecosistema.html
@@ -48,7 +48,7 @@
+ style="width: 100%; height: 400px; position: relative; display: flex; justify-content: center; align-items: center;">
@@ -239,7 +239,7 @@
@@ -310,7 +310,7 @@
diff --git a/ide-academy.html b/ide-academy.html
index 9552e2f..359ea99 100644
--- a/ide-academy.html
+++ b/ide-academy.html
@@ -17,58 +17,74 @@
-
-
-
-
-
- Tu navegador no soporta videos.
-
+
+
+
+
+
+
+ Executive Learning & Capability Development
+
+
+ Desarrollamos capacidades para gestionar, liderar y transformar.
+
+
+ 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.
+
+
+
+
+
+
+
+
-
-
-
-
-
Executive Learning & Capability Development
-
Desarrollamos capacidades para gestionar, liderar y transformar
-
- 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.
-
-
-
-
+
+
-
APRENDER CON IDE
+
APRENDER CON IDE
Conocimiento que se conecta con la práctica
-
- Aprender no es solamente incorporar conceptos. Es comprender cómo aplicarlos, relacionarlos con otros saberes y convertirlos en mejores decisiones y formas de actuar.
-
- Por eso, en IDE Academy diseñamos experiencias de aprendizaje que parten de situaciones reales, integran herramientas aplicables y promueven el intercambio entre profesionales.
@@ -112,7 +128,7 @@
La experiencia y las perspectivas de quienes participan también forman parte del aprendizaje.
@@ -124,7 +140,7 @@
Buscamos que cada experiencia deje herramientas, criterios y capacidades que puedan seguir utilizándose después del curso.
@@ -137,198 +153,129 @@
-
-