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

rf-v4.13-site finish

Browse Source
This commit is contained in:
fanfuso
2026-10-10 02:47:56 -03:00
parent 38c85162c2
commit fc6f8c62fc
24 changed files with 562 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/img/blur.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

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

After

Width:  |  Height:  |  Size: 2.0 MiB

assets/img/desafios/Gemini_Generated_Image_55j0jv55j0jv55j0.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

assets/img/desafios/Gemini_Generated_Image_7s2n7y7s2n7y7s2n.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

assets/img/desafios/Gemini_Generated_Image_kg48nbkg48nbkg48.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

assets/img/desafios/Gemini_Generated_Image_p3j78kp3j78kp3j7.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

assets/img/desafios/Gemini_Generated_Image_w91sfzw91sfzw91s.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

assets/img/desafios/d1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

assets/img/desafios/d2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

assets/img/desafios/d3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

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

After

Width:  |  Height:  |  Size: 2.9 MiB

assets/img/slide/slide-academy.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 988 KiB

assets/img/slide/slide-digital.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

css/desafio.css
+8 -7
View File
@@ -58,7 +58,7 @@
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: var(--bg-primary, #ffffff);
background: var(--bg-body);
min-height: 80px;
}
@@ -67,7 +67,7 @@
width: 48px;
height: 48px;
border-radius: 10px;
background: var(--bg-subtle, #f5f5f5);
background: var(--text-inverse);
display: flex;
align-items: center;
justify-content: center;
@@ -210,6 +210,7 @@
/* Columna 1: Textos */
.modal-compact__col-text {
background: var(--bg-subtle);
padding: 2rem 2rem 2rem 2.5rem;
border-right: 1px solid var(--border-color, #e0e0e0);
}
@@ -270,9 +271,9 @@
.modal-compact__list li {
padding: 0.75rem 1rem;
background: var(--bg-subtle, #f5f5f5);
background: var(--bg-subtle);
border-radius: 6px;
border-left: 3px solid var(--ide-primary, #0066cc);
border-left: 3px solid var(--ide-primary);
font-size: 0.88rem;
line-height: 1.5;
color: var(--text-body, #333);
@@ -280,7 +281,7 @@
}
.modal-compact__list li:hover {
background: var(--bg-primary, #ffffff);
background: var(--bg-body);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
transform: translateX(3px);
}
@@ -298,7 +299,7 @@
display: flex;
flex-direction: column;
gap: 1.5rem;
background: var(--bg-subtle, #f8f9fa);
background: var(--bg-subtle);
border-radius: 0 var(--radius-lg, 16px) var(--radius-lg, 16px) 0;
}
@@ -327,7 +328,7 @@
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: var(--bg-primary, #ffffff);
background: var(--bg-surface);
border-radius: 8px;
transition: all 0.2s ease;
}
css/ecosistema.css
+2 -2
View File
@@ -433,8 +433,8 @@
grid-template-columns: minmax(0, 40%) 1fr;
gap: 2rem;
align-items: stretch;
padding: clamp(2rem, 3.5vw, 3rem);
min-height: 440px;
padding: clamp(1rem, 2vw, 3rem);
min-height: 420px;
}
/* Columna principal: texto limitado al 40% */
css/index.css
+1 -1
View File
@@ -225,7 +225,7 @@
color: var(--text-muted, #888);
font-size: 0.85rem;
padding: 0.4rem 0.9rem;
border-radius: 6px;
border-radius: 50px;
cursor: pointer;
transition: all 200ms ease;
}
css/soluciones.css
+4 -3
View File
@@ -817,12 +817,13 @@
/* --- Botón circular --- */
.relacionada-card__btn {
width: 40px;
width: 100px;
height: 40px;
border-radius: 50%;
padding: 0 1rem;
border-radius: 9999px;
border: 1.5px solid currentColor;
background: transparent;
display: flex;
display: inline-flex;
align-items: center;
justify-content: center;
color: #1a1a2e;
css/styles.css
+364 -43
View File
@@ -89,7 +89,8 @@
/* Tema Oscuro (Elegante mate, sin negros puros #000 ni neón estridente) */
[data-theme="dark"] {
--ide-primary:#40ab8e;
--ide-primary:#4caf7a;
--ide-accent:#2c6d8c;
--bg-body: #11181D;
--bg-surface: #18222A;
--bg-surface-elevated: #202D37;
@@ -105,10 +106,6 @@
--border-hover:#40ab8e;
--ide-primary-light: #40ab8e;
--ide-primary-light2: #2c69ab;
--ide-excellence: #4fb389;
--ide-projects: #ed8d01;
--ide-academy: #a83c41;
--ide-digital: #2c69ab;
--teal-dark: #40ab8e;
--cta-hover:#0d5a91;
--bg-subtle: #03151c;;
@@ -207,7 +204,7 @@ h1 {
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ide-accent);
color: #4caf7a;
margin-bottom: 0.75rem;
}
.eyebrow-a {
@@ -378,10 +375,10 @@ p, li, .lead-text, .text-body, .text-muted {
background-image:
linear-gradient(
to right,
rgba(56,128,89, 1) 0%,
rgba(56,128,89, 0.5) 40%,
rgba(56,128,89, 0.2) 70%,
rgba(56,128,89, 0.05) 100%
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-desafios.png');
background-size: cover;
@@ -444,7 +441,34 @@ p, li, .lead-text, .text-body, .text-muted {
background-position: center;
background-repeat: no-repeat;
}
.herobg-8{
background-image:
linear-gradient(
to right,
rgba(30,74,94, 1) 30%,
rgba(30,74,94, 0.7) 60%,
rgba(30,74,94, 0.2) 80%,
rgba(30,74,94, 0.05) 100%
),
url('../assets/img/minera.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.herobg-9 {
background-image:
linear-gradient(
to right,
color-mix(in srgb, var(--bg-body) 100%, transparent) 30%,
color-mix(in srgb, var(--bg-body) 70%, transparent) 60%,
color-mix(in srgb, var(--bg-body) 20%, transparent) 80%,
color-mix(in srgb, var(--bg-body) 5%, transparent) 100%
),
url('../assets/img/blur.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* --- 5. Componentes: Header & Navbar --- */
@@ -502,7 +526,7 @@ p, li, .lead-text, .text-body, .text-muted {
}
.nav-link:hover, .nav-link.active {
color: var(--ide-accent);
color: #4caf7a;
}
.nav-link.active::after {
@@ -512,7 +536,7 @@ p, li, .lead-text, .text-body, .text-muted {
left: 0;
width: 100%;
height: 2px;
background-color: var(--ide-accent);
background-color: #4caf7a;
border-radius: 2px;
}
@@ -769,19 +793,6 @@ p, li, .lead-text, .text-body, .text-muted {
text-decoration: none;
}
.btn-primary {
background-color: var(--ide-primary);
color: #FFFFFF;
border-color: var(--ide-primary);
}
.btn-primary:hover {
background-color: var(--ide-primary-dark);
border-color: var(--ide-primary-dark);
color: #FFFFFF;
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.btn-academy {
background-color: var(--ide-academy);
color: #FFFFFF;
@@ -900,7 +911,7 @@ p, li, .lead-text, .text-body, .text-muted {
}
.btn-cta-unificado:hover {
background-color: var(--ide-primary-dark);
background-color: var(--ide-accent);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
@@ -916,6 +927,29 @@ p, li, .lead-text, .text-body, .text-muted {
font-size: 0.95rem;
padding: 0.5rem 1.25rem;
}
.btn-cta-outline {
padding: 0.75rem 2rem;
border-radius: 50px; /* Estilo píldora */
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 1.1rem;
color: var(--ide-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
display: inline-flex;
align-items: center;
gap: 0.5rem;
border: 1px solid var(--ide-primary);
transition: all var(--transition-fast);
}
.btn-cta-outline:hover {
background-color: var(--ide-accent);
color: #FFFFFF;
border-color: var(--ide-accent);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
/*==============================*/
@@ -1367,7 +1401,7 @@ p, li, .lead-text, .text-body, .text-muted {
.quiz-progress-fill {
height: 100%;
width: 0%;
background: var(--ide-accent, #0066cc);
background: #4caf7a;
border-radius: 8px;
transition: width 0.45s ease;
}
@@ -1417,7 +1451,6 @@ p, li, .lead-text, .text-body, .text-muted {
}
.quiz-option-card.selected {
background: var(--ide-primary-light, #e6f0ff);
border-color: var(--ide-primary, #0066cc);
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}
@@ -1440,21 +1473,7 @@ p, li, .lead-text, .text-body, .text-muted {
}
/* ---- Botón volver ---- */
.quiz-back-btn {
background: none;
border: none;
color: var(--text-muted, #6c757d);
font-size: 0.9rem;
cursor: pointer;
padding: 0.4rem 0.8rem;
border-radius: 0.4rem;
transition: all 0.2s ease;
}
.quiz-back-btn:hover {
color: var(--text-body);
background: var(--bg-body);
}
/* ---- Estilos para títulos con iconos SVG en las tarjetas del quiz ---- */
.quiz-option-card .opt-title {
font-family: 'Barlow Condensed', sans-serif;
@@ -3563,6 +3582,308 @@ canvas {
margin: 0.4rem 0 0 0;
}
/* ==========================================================================
SECCIÓN 2 — ¿Por qué sumarte? (grid de 5 en fila)
========================================================================== */
.sumarte-grid {
display: grid;
grid-template-columns: 0.8fr 1fr 1fr 1fr 1fr;
gap: 1.5rem;
align-items: start;
}
/* --- G1: Intro --- */
.sumarte-intro {
padding-top: 0.5rem;
}
.sumarte-intro .eyebrow {
font-size: 1.05rem;
line-height: 1.3;
letter-spacing: 0.14em;
}
/* --- Cards 2 a 5 --- */
.sumarte-card {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 1.25rem 1rem;
border-left: 2px solid var(--border-color);
transition: border-color var(--transition-normal);
}
.sumarte-card:hover {
border-left-color: var(--ide-accent);
}
.sumarte-card__icon {
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--ide-accent-soft);
color: var(--ide-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
margin-bottom: 0.35rem;
transition: transform var(--transition-fast),
background-color var(--transition-fast),
color var(--transition-fast);
}
.sumarte-card:hover .sumarte-card__icon {
transform: scale(1.08);
background-color: var(--ide-accent);
color: #FFFFFF;
}
.sumarte-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;
}
.sumarte-card__desc {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.55;
margin: 0;
}
/* ==========================================================================
SECCIÓN 3 — Nuestra forma de trabajar
========================================================================== */
.forma-trabajar {
display: grid;
grid-template-columns: 1fr auto 1.15fr;
gap: 3rem;
align-items: center;
}
/* --- Col 1: Título --- */
.forma-trabajar__intro {
display: flex;
flex-direction: column;
justify-content: center;
}
.forma-trabajar__title {
font-size: clamp(1.6rem, 2.8vw, 2.3rem);
line-height: 1.15;
margin: 0.25rem 0 0 0;
}
/* --- Divisor vertical --- */
.forma-trabajar__divider {
width: 3px;
height: 100%;
min-height: 180px;
background: linear-gradient(
180deg,
transparent 0%,
var(--ide-accent) 30%,
var(--ide-primary) 70%,
transparent 100%
);
border-radius: 2px;
align-self: stretch;
}
/* --- Col 2: Quote --- */
.forma-trabajar__quote {
position: relative;
padding-left: 0.5rem;
}
/* Comilla decorativa gigante */
.forma-trabajar__quote-mark {
position: absolute;
top: -3.5rem;
left: -1.25rem;
font-family: 'Bebas Neue', 'Barlow Semi Condensed', Georgia, serif;
font-size: 8rem;
line-height: 1;
color: var(--ide-accent);
opacity: 0.12;
pointer-events: none;
user-select: none;
z-index: 0;
}
.forma-trabajar__quote-lead {
position: relative;
z-index: 1;
font-family: 'Barlow Semi Condensed', sans-serif;
font-weight: 500;
font-size: clamp(1.15rem, 1.6vw, 1.35rem);
line-height: 1.5;
color: var(--text-main);
margin: 0 0 1.25rem 0;
}
.forma-trabajar__quote-body {
position: relative;
z-index: 1;
font-size: 1rem;
line-height: 1.75;
color: var(--text-body);
margin: 0;
}
/* ==========================================================================
SECCIÓN 4 — Formulario + imagen fundida a la derecha
========================================================================== */
.careers-form-section {
position: relative;
overflow: hidden;
}
/* Imagen fundida: ocupa la mitad derecha */
.careers-form-section__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 55%;
background-image: url('../assets/img/culture.png');
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
z-index: 0;
pointer-events: none;
/* Fade hacia la izquierda y hacia arriba/abajo para fundir con el fondo */
-webkit-mask-image: linear-gradient(
to left,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.85) 30%,
rgba(0, 0, 0, 0.4) 60%,
rgba(0, 0, 0, 0) 95%
);
mask-image: linear-gradient(
to left,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.85) 30%,
rgba(0, 0, 0, 0.4) 60%,
rgba(0, 0, 0, 0) 95%
);
/* Reducir un poco la intensidad general */
opacity: 0.9;
}
/* Reducción en modo oscuro para no quemar la vista */
[data-theme="dark"] .careers-form-section__bg {
opacity: 0.55;
}
/* Contenedor del formulario */
.careers-form-wrap {
position: relative;
z-index: 1;
max-width: 620px; /* deja la mitad derecha libre para la imagen */
margin-left: 10%;
}
.careers-form-card {
padding: clamp(1.75rem, 4vw, 2.5rem);
background-color: var(--bg-surface);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Forzar ligera transparencia para que se intuya la imagen detrás */
.careers-form-card {
background-color: color-mix(in srgb, var(--bg-surface) 92%, transparent);
}
[data-theme="dark"] .careers-form-card {
background-color: color-mix(in srgb, var(--bg-surface) 88%, transparent);
}
.careers-form-card__title {
font-size: 1.35rem;
margin-bottom: 0.5rem;
color: var(--ide-accent-hover);
}
.careers-form-card__lead {
font-size: 0.88rem;
color: var(--text-muted);
margin-bottom: 1.75rem;
line-height: 1.6;
}
.careers-form-card__note {
font-size: 0.82rem;
color: var(--text-muted);
margin: 0.75rem 0 0 0;
line-height: 1.5;
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
/* Tablet */
@media (max-width: 1100px) {
.sumarte-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.sumarte-intro {
grid-column: 1 / -1;
text-align: center;
margin-bottom: 0.5rem;
}
.careers-form-section__bg {
width: 45%;
opacity: 0.7;
}
.careers-form-wrap {
max-width: 100%;
}
}
/* Mobile */
@media (max-width: 768px) {
.sumarte-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.sumarte-card {
border-left: 2px solid var(--border-color);
padding: 1rem;
}
.careers-form-section__bg {
width: 100%;
opacity: 0.18;
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
}
[data-theme="dark"] .careers-form-section__bg {
opacity: 0.12;
}
.careers-form-card {
background-color: var(--bg-surface);
}
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
desafios.html
+18 -18
View File
@@ -23,13 +23,13 @@
<div class="container">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;">
<div>
<h1 style="margin-bottom: 1.25rem; font-size: 3rem; line-height: 1.1; color:white">
<h1 style="margin-bottom: 1.25rem; color:white">
¿Qué está pasando<br>en tu organización?
</h1>
<p class="lead-text" style="color:white">
A veces el desafío es evidente. Otras, aparece como una señal, una necesidad de cambio o una oportunidad. Empecemos por comprenderlo para identificar dónde intervenir.
</p>
<a href="contacto.html" class="btn btn-primary btn-cta-unificado"
<a href="contacto.html" class="btn btn-cta-unificado"
style="border-radius: 50px; align-items: center; gap: 0.5rem; margin-top: 1.5rem; display: inline-flex;">
HABLEMOS
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
@@ -46,7 +46,7 @@
</section>
<!-- Grilla de Desafíos con Modales -->
<section class="section-padding bg1">
<section class="section-padding bg7">
<div class="container">
@@ -63,7 +63,7 @@
<i class="fa-solid fa-sitemap"></i>
</div>
<h3 class="desafio-card__title">Crecimos y necesitamos ordenar la gestión.</h3>
<button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
<button class="btn btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;" aria-label="Abrir detalle"><i class="fa-solid fa-arrow-right"></i></i></button>
</div>
</div>
@@ -78,7 +78,7 @@
<i class="fa-solid fa-bullseye"></i>
</div>
<h3 class="desafio-card__title">Tenemos muchas iniciativas, pero cuesta convertirlas en resultados.</h3>
<button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
<button class="btn btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;" aria-label="Abrir detalle"><i class="fa-solid fa-arrow-right"></i></i></button>
</div>
</div>
@@ -93,7 +93,7 @@
<i class="fa-solid fa-people-arrows"></i>
</div>
<h3 class="desafio-card__title">Estamos impulsando cambios, pero cuesta llevarlos a la práctica.</h3>
<button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
<button class="btn btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;" aria-label="Abrir detalle"><i class="fa-solid fa-arrow-right"></i></i></button>
</div>
</div>
@@ -108,7 +108,7 @@
<i class="fa-solid fa-robot"></i>
</div>
<h3 class="desafio-card__title">Queremos aprovechar la tecnología y la IA con sentido.</h3>
<button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
<button class="btn btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;" aria-label="Abrir detalle"><i class="fa-solid fa-arrow-right"></i></i></button>
</div>
</div>
@@ -123,7 +123,7 @@
<i class="fa-solid fa-certificate"></i>
</div>
<h3 class="desafio-card__title">Necesitamos cumplir nuevos requisitos sin sumar burocracia.</h3>
<button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
<button class="btn btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;" aria-label="Abrir detalle"><i class="fa-solid fa-arrow-right"></i></i></button>
</div>
</div>
@@ -138,7 +138,7 @@
<i class="fa-solid fa-compass"></i>
</div>
<h3 class="desafio-card__title">Sabemos que algo debería cambiar, pero no tenemos claro por dónde empezar.</h3>
<button class="desafio-card__plus" aria-label="Abrir detalle"><i class="fa-solid fa-plus"></i></button>
<button class="btn btn-cta-unificado" style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem;" aria-label="Abrir detalle"><i class="fa-solid fa-arrow-right"></i></i></button>
</div>
</div>
@@ -148,12 +148,12 @@
</section>
<!--Seccion 3-->
<section class="section-padding bg2">
<section class="section-padding bg6">
<div class="container">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;">
<div>
<span class="eyebrow" style="text-transform: uppercase;">UNA MIRADA AMPLIA</span>
<h1 style="margin-bottom: 0.8rem; line-height: 1.1; color: var(--text-heading);">
<h1 style="margin-bottom: 0.8rem; line-height: 1.1; color: var(--ide-primary);">
Distintas señales pueden tener un mismo origen.
</h1>
<p class="lead-text" style="margin-bottom: 2.5rem;">
@@ -182,7 +182,7 @@
<!-- 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"
<a href="contacto.html" class="btn 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"
@@ -260,7 +260,7 @@
</div>
</div>
<a href="contacto.html" class="btn btn-primary btn-cta-unificado modal-compact__cta">HABLEMOS</a>
<a href="contacto.html" class="btn btn-cta-unificado modal-compact__cta">HABLEMOS</a>
</div>
</div>
</div>
@@ -319,7 +319,7 @@
</div>
</div>
<a href="contacto.html" class="btn btn-primary btn-cta-unificado modal-compact__cta">HABLEMOS</a>
<a href="contacto.html" class="btn btn-cta-unificado modal-compact__cta">HABLEMOS</a>
</div>
</div>
</div>
@@ -378,7 +378,7 @@
</div>
</div>
<a href="contacto.html" class="btn btn-primary btn-cta-unificado modal-compact__cta">HABLEMOS</a>
<a href="contacto.html" class="btn btn-cta-unificado modal-compact__cta">HABLEMOS</a>
</div>
</div>
</div>
@@ -436,7 +436,7 @@
</div>
</div>
<a href="contacto.html" class="btn btn-primary btn-cta-unificado modal-compact__cta">HABLEMOS</a>
<a href="contacto.html" class="btn btn-cta-unificado modal-compact__cta">HABLEMOS</a>
</div>
</div>
</div>
@@ -495,7 +495,7 @@
</div>
</div>
<a href="contacto.html" class="btn btn-primary btn-cta-unificado modal-compact__cta">HABLEMOS</a>
<a href="contacto.html" class="btn btn-cta-unificado modal-compact__cta">HABLEMOS</a>
</div>
</div>
</div>
@@ -545,7 +545,7 @@
</div>
</div>
<a href="index.html#brujula" class="btn btn-primary btn-cta-unificado modal-compact__cta">Orientarme con la Brújula IDE</a>
<a href="index.html#brujula" class="btn btn-cta-unificado modal-compact__cta">Orientarme con la Brújula IDE</a>
</div>
</div>
</div>
includes/footer.html
+1 -1
View File
@@ -29,7 +29,7 @@
<!-- 3. CTA -->
<div class="footer-cta">
<a href="contacto.html" class="btn btn-primary footer-cta-btn">
<a href="contacto.html" class="btn btn-cta-unificado">
HABLEMOS
<svg width="16" height="16" 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>
includes/header.html
+9 -4
View File
@@ -20,13 +20,18 @@
<li class="nav-item dropdown">
<a href="ecosistema.html" class="nav-link dropdown-toggle">Ecosistema</a>
<ul class="dropdown-menu">
<li><a href="ecosistema.html#excellence" class="nav-link">Excellence</a></li>
<li><a href="ecosistema.html#projects" class="nav-link">Projects</a></li>
<li><a href="ecosistema.html#digital" class="nav-link">Digital</a></li>
<li><a href="ecosistema.html#eco-excellence" class="nav-link">Excellence</a></li>
<li><a href="ecosistema.html#eco-projects" class="nav-link">Projects</a></li>
<li><a href="ecosistema.html#eco-digital" class="nav-link">Digital</a></li>
<li><a href="ide-academy.html" class="nav-link">Academy</a></li>
</ul>
</li>
<li><a href="somos-ide.html" class="nav-link">Somos IDE</a></li>
<li class="nav-item dropdown">
<a href="somos-ide.html" class="nav-link dropdown-toggle">Somos IDE</a>
<ul class="dropdown-menu">
<li><a href="trabaja-con-nosotros.html" class="nav-link">Trabaja con nosotros</a></li>
</ul>
</li>
<li><a href="insights.html" class="nav-link">Insights</a></li>
</ul>
index.html
+9 -7
View File
@@ -37,10 +37,10 @@
<div>
<span class="eyebrow" style="text-transform: uppercase;">¿Qué pasa cuando dejamos de mirar los problemas por
separado?</span>
<h1 style="margin-bottom: 0.8rem; line-height: 1.1; color: white;">
<h1 style="margin-bottom: 1rem; font-size: 5.5rem; line-height: 1.1; color: white;">
Conectamos el todo
</h1>
<p class="lead-text" style="margin-bottom: 2.5rem;">
<p class="lead-text" style="margin-bottom: 2.5rem;color:white">
En IDE entendemos cómo funciona el sistema para identificar dónde intervenir, integrar las capacidades
necesarias y generar valor en el conjunto.
</p>
@@ -61,7 +61,7 @@
</svg>
</button>
</form>
<a href="contacto.html" class="btn btn-primary btn-cta-unificado"
<a href="contacto.html" class="btn 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"
@@ -360,6 +360,7 @@
<!-- BOTÓN VOLVER GLOBAL -->
<button id="global-quiz-back-btn" class="quiz-back-btn" onclick="goBack()" style="display: none;">← Volver</button>
<!-- ==========================================================
PASO 1: Situación actual
========================================================== -->
@@ -738,10 +739,11 @@
</div>
<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: center; width:100%;">
<a id="resultCTA" href="desafios.html" class="btn btn-primary" style="font-size: 0.85rem; padding: 0.5rem 1.25rem;">
<a id="resultCTA" href="desafios.html" class="btn btn-cta-unificado" style="font-size: 0.85rem; padding: 0.5rem 1.25rem;">
Explorar por desafío →</a>
<a href="contacto.html" class="btn btn-ghost btn-sm" style="font-size: 0.8rem; padding: 0.3rem 0.8rem;">Hablemos directamente</a>
<button class="btn btn-outline btn-sm" onclick="restartQuiz()" style="font-size: 0.8rem; padding: 0.3rem 0.8rem;">Reiniciar</button>
<a class="btn btn-cta-outline" style="font-size: 0.85rem; padding: 0.5rem 1.25rem;" href="contacto.html">Hablemos directamente</a>
<a class="btn btn-cta-outline" style="font-size: 0.85rem; padding: 0.5rem 1.25rem;" onclick="restartQuiz()">Reiniciar</a>
</div>
</div>
</div>
@@ -763,7 +765,7 @@
<!-- 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"
<a href="contacto.html" class="btn 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"
soluciones.html
+21 -62
View File
@@ -24,13 +24,13 @@
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;">
<div>
<span class="eyebrow" style="text-transform: uppercase;">SOLUCIONES</span>
<h1 style="margin-bottom: 1.25rem; font-size: 3rem; line-height: 1.1; color:white">
<h1 style="margin-bottom: 1.25rem; color:white">
De la necesidad a los resultados concretos.
</h1>
<p class="lead-text" style="color:white">
Soluciones integradas de gestión, proyectos, tecnología y desarrollo de capacidades para que tu organización avance.
</p>
<a href="contacto.html" class="btn btn-primary btn-cta-unificado"
<a href="contacto.html" class="btn btn-cta-unificado"
style="border-radius: 50px; align-items: center; gap: 0.5rem; margin-top: 1.5rem; display: inline-flex;">
HABLEMOS
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
@@ -67,7 +67,7 @@
<div class="solucion-card__body">
<h3 class="solucion-card__title">Sistema de gestión y certificaciones</h3>
<p class="solucion-card__subtitle">Para convertir requisitos en herramientas de gestión.</p>
<a href="contacto.html" class="solucion-card__btn" aria-label="Contactar sobre Sistemas de Gestión">
<a href="contacto.html" class="btn btn-cta-outline" style="max-width: 100px;" aria-label="Contactar sobre Sistemas de Gestión">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
@@ -86,7 +86,7 @@
<div class="solucion-card__body">
<h3 class="solucion-card__title">Procesos y mejora organizacional</h3>
<p class="solucion-card__subtitle">Para transformar la forma en que la organización funciona.</p>
<a href="contacto.html" class="solucion-card__btn" aria-label="Contactar sobre Procesos y Mejora">
<a href="contacto.html" class="btn btn-cta-outline" style="max-width: 100px;" aria-label="Contactar sobre Procesos y Mejora">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
@@ -105,7 +105,7 @@
<div class="solucion-card__body">
<h3 class="solucion-card__title">Proyectos y PMO</h3>
<p class="solucion-card__subtitle">Para convertir iniciativas estratégicas en resultados.</p>
<a href="contacto.html" class="solucion-card__btn" aria-label="Contactar sobre Proyectos y PMO">
<a href="contacto.html" class="btn btn-cta-outline" style="max-width: 100px;" aria-label="Contactar sobre Proyectos y PMO">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
@@ -124,7 +124,7 @@
<div class="solucion-card__body">
<h3 class="solucion-card__title">Desarrollo de Capacidades</h3>
<p class="solucion-card__subtitle">Para transformar conocimiento en capacidad de acción.</p>
<a href="contacto.html" class="solucion-card__btn" aria-label="Contactar sobre Desarrollo de Capacidades">
<a href="contacto.html" class="btn btn-cta-outline" style="max-width: 100px;" aria-label="Contactar sobre Desarrollo de Capacidades">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
@@ -143,7 +143,7 @@
<div class="solucion-card__body">
<h3 class="solucion-card__title">Transformación digital e IA</h3>
<p class="solucion-card__subtitle">Para poner la tecnología al servicio de la gestión.</p>
<a href="contacto.html" class="solucion-card__btn" aria-label="Contactar sobre Transformación Digital">
<a href="contacto.html" class="btn btn-cta-outline" style="max-width: 100px;" aria-label="Contactar sobre Transformación Digital">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
@@ -162,7 +162,7 @@
<div class="solucion-card__body">
<h3 class="solucion-card__title">Educación y gobierno</h3>
<p class="solucion-card__subtitle">Para transformar conocimiento, procesos y capacidades en mejoras.</p>
<a href="contacto.html" class="solucion-card__btn" aria-label="Contactar sobre Educación y Gobierno">
<a href="contacto.html" class="btn btn-cta-outline" style="max-width: 100px;" aria-label="Contactar sobre Educación y Gobierno">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
@@ -181,7 +181,7 @@
<div class="solucion-card__body">
<h3 class="solucion-card__title">Soluciones sectoriales</h3>
<p class="solucion-card__subtitle">Para responder a desafíos que requieren conocimiento del contexto.</p>
<a href="contacto.html" class="solucion-card__btn" aria-label="Contactar sobre Soluciones Sectoriales">
<a href="contacto.html" class="btn btn-cta-outline" style="max-width: 100px;" aria-label="Contactar sobre Soluciones Sectoriales">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
@@ -196,7 +196,7 @@
<div class="solucion-card__body">
<h3 class="solucion-card__title">A medida</h3>
<p class="solucion-card__subtitle">Contactanos si necesitas soluciones específicas.</p>
<a href="contacto.html" class="solucion-card__btn" aria-label="Contactar sobre Soluciones a Medida">
<a href="contacto.html" class="btn btn-cta-outline" style="max-width: 100px;" aria-label="Contactar sobre Soluciones a Medida">
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
@@ -229,7 +229,7 @@
<p class="relacionada-card__text">
Sistemas de gestión y mejora continua
</p>
<a href="#" class="relacionada-card__btn" aria-label="Ver más sobre IDE Excellence">
<a href="ecosistema.html#eco-excellence" class="relacionada-card__btn" aria-label="Ver más sobre IDE Excellence">
<i class="fa-solid fa-arrow-right"></i>
</a>
</article>
@@ -242,7 +242,7 @@
<p class="relacionada-card__text">
Implementación de proyectos de mejora
</p>
<a href="#" class="relacionada-card__btn" aria-label="Ver más sobre IDE Projects">
<a href="ecosistema.html#eco-projects" class="relacionada-card__btn" aria-label="Ver más sobre IDE Projects">
<i class="fa-solid fa-arrow-right"></i>
</a>
</article>
@@ -255,7 +255,7 @@
<p class="relacionada-card__text">
Automatización y soluciones digitales
</p>
<a href="#" class="relacionada-card__btn" aria-label="Ver más sobre IDE Digital">
<a href="ecosistema.html#eco-digital" class="relacionada-card__btn" aria-label="Ver más sobre IDE Digital">
<i class="fa-solid fa-arrow-right"></i>
</a>
</article>
@@ -268,7 +268,7 @@
<p class="relacionada-card__text">
Formación en gestión por procesos
</p>
<a href="#" class="relacionada-card__btn" aria-label="Ver más sobre IDE Academy">
<a href="ide-academy.html" class="relacionada-card__btn" aria-label="Ver más sobre IDE Academy">
<i class="fa-solid fa-arrow-right"></i>
</a>
</article>
@@ -297,9 +297,8 @@
Integramos las capacidades necesarias para diseñar una respuesta que tenga sentido para tu organización y su contexto.
</p>
<!-- 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"
<a href="contacto.html" class="btn 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"
@@ -339,16 +338,6 @@
</div>
<div class="modal-infografia__body">
<p class="modal-infografia__intro">
Diseñamos, implementamos e integramos sistemas de gestión que permiten ordenar procesos,
gestionar riesgos, mejorar el desempeño y responder a requisitos normativos sin sumar
burocracia innecesaria.
</p>
<h3 class="modal-infografia__section-title">
<i class="fa-solid fa-award"></i>
Normas y Sistemas de Gestión
</h3>
<div class="normas-grid">
<div class="norma-card">
@@ -383,7 +372,7 @@
<div class="norma-card__content">
<h4 class="norma-card__title">ISO 21001</h4>
<p class="norma-card__subtitle">Organizaciones Educativas</p>
<p class="norma-card__text">Sistema de gestión para organizaciones educativas orientado a fortalecer sus procesos y responder a las necesidades de estudiantes y otras partes interesadas.</p>
<p class="norma-card__text">Sistema de gestión para organizaciones educativas orientado a fortalecer sus procesos.</p>
</div>
</div>
@@ -402,7 +391,7 @@
<div class="destacado-card__icon"><i class="fa-solid fa-puzzle-piece"></i></div>
<div class="destacado-card__content">
<h4 class="destacado-card__title">Sistemas Integrados de Gestión</h4>
<p class="destacado-card__text">Integración de diferentes normas y referenciales bajo una arquitectura común para reducir duplicaciones y gestionar el conjunto.</p>
<p class="destacado-card__text">Integración de diferentes normas y referenciales bajo una arquitectura común para gestionar el conjunto.</p>
</div>
</div>
@@ -410,7 +399,7 @@
<div class="destacado-card__icon"><i class="fa-solid fa-clipboard-check"></i></div>
<div class="destacado-card__content">
<h4 class="destacado-card__title">Auditorías y preparación para la certificación</h4>
<p class="destacado-card__text">Diagnóstico de brechas, auditorías internas, tratamiento de hallazgos y acompañamiento para implementar, mantener o ampliar sistemas y certificaciones.</p>
<p class="destacado-card__text">Diagnóstico de brechas, auditorías internas, tratamiento de hallazgos y acompañamiento para implementar sistemas y certificaciones.</p>
</div>
</div>
</div>
@@ -449,12 +438,6 @@
que el trabajo fluya de manera más eficiente, con responsabilidades claras y decisiones
basadas en información confiable.
</p>
<h3 class="modal-infografia__section-title">
<i class="fa-solid fa-diagram-predecessor"></i>
Capacidades de Mejora Organizacional
</h3>
<div class="normas-grid">
<div class="norma-card">
<div class="norma-card__icon"><i class="fa-solid fa-diagram-project"></i></div>
@@ -546,10 +529,6 @@
de madurez y necesidades.
</p>
<h3 class="modal-infografia__section-title">
<i class="fa-solid fa-diagram-project"></i>
Capacidades en Gestión de Proyectos
</h3>
<div class="normas-grid">
<div class="norma-card">
@@ -642,11 +621,6 @@
realidad de cada organización.
</p>
<h3 class="modal-infografia__section-title">
<i class="fa-solid fa-book-bookmark"></i>
Formación y Desarrollo
</h3>
<div class="normas-grid">
<div class="norma-card">
<div class="norma-card__icon"><i class="fa-solid fa-chalkboard-user"></i></div>
@@ -738,11 +712,6 @@
organizacional.
</p>
<h3 class="modal-infografia__section-title">
<i class="fa-solid fa-robot"></i>
Transformación Digital
</h3>
<div class="normas-grid">
<div class="norma-card">
<div class="norma-card__icon"><i class="fa-solid fa-magnifying-glass-chart"></i></div>
@@ -834,11 +803,6 @@
adaptados a su contexto y desafíos específicos.
</p>
<h3 class="modal-infografia__section-title">
<i class="fa-solid fa-chalkboard-user"></i>
Soluciones para Educación y Gobierno
</h3>
<div class="normas-grid">
<div class="norma-card">
<div class="norma-card__icon"><i class="fa-solid fa-award"></i></div>
@@ -863,7 +827,7 @@
<div class="norma-card__content">
<h4 class="norma-card__title">Procesos e indicadores</h4>
<p class="norma-card__subtitle">Gestión por procesos</p>
<p class="norma-card__text">Diseño y mejora de procesos académicos, administrativos y de servicios, acompañados por indicadores que permitan transformar información en decisiones.</p>
<p class="norma-card__text">Diseño y mejora de procesos académicos, administrativos y de servicios, con indicadores que transformen información en decisiones.</p>
</div>
</div>
@@ -890,7 +854,7 @@
<div class="norma-card__content">
<h4 class="norma-card__title">Transformación digital e IA</h4>
<p class="norma-card__subtitle">Digitalización y automatización</p>
<p class="norma-card__text">Digitalización, automatización y aplicación de inteligencia artificial para simplificar procesos, mejorar el acceso a la información y fortalecer la gestión.</p>
<p class="norma-card__text">Digitalización, automatización y aplicación de IA para simplificar procesos, mejorar el acceso a la información y fortalecer la gestión.</p>
</div>
</div>
</div>
@@ -929,11 +893,6 @@
soluciones adaptadas a los desafíos, normativas y particularidades de cada industria.
</p>
<h3 class="modal-infografia__section-title">
<i class="fa-solid fa-clipboard-question"></i>
Sectores de Especialización
</h3>
<div class="normas-grid">
<div class="norma-card">
<div class="norma-card__icon"><i class="fa-solid fa-wheat-awn"></i></div>
@@ -985,7 +944,7 @@
<div class="norma-card__content">
<h4 class="norma-card__title">Educación & Gobierno</h4>
<p class="norma-card__subtitle">Sistemas y capacidades</p>
<p class="norma-card__text">Sistemas de gestión, procesos, proyectos, indicadores y desarrollo de capacidades adaptados a organizaciones educativas y del sector público.</p>
<p class="norma-card__text">Sistemas de gestión, procesos, proyectos, indicadores y desarrollo de capacidades adaptados para organizaciones públicas.</p>
</div>
</div>
</div>
trabaja-con-nosotros.html
+123 -71
View File
@@ -17,78 +17,129 @@
<main>
<!-- Header Trabaja con Nosotros -->
<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.15;
z-index: 0;
pointer-events: none;
">
<source src="/assets/video/desktop_working.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>
<!-- Contenido -->
<div class="container container-narrow text-center" style="position: relative; z-index: 2;">
<span class="eyebrow" style="color: var(--text-main)">TELENTO & RED</span>
<h1 style="margin-bottom: 1.25rem; color:var(--text-main);">Sumá tu experiencia al Ecosistema IDE</h1>
<p class="lead-text" style="color:var(--text-main)">
Construimos una red de profesionales y especialistas con experiencias diversas y una forma compartida de entender la gestión: comprender el contexto, conectar capacidades y generar valor desde la práctica.
<!-- Seccion 1: Hero -->
<section class="section-padding herobg-8">
<div class="container">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;">
<div>
<span class="eyebrow" style="text-transform: uppercase;">TRABAJÁ CON NOSOTROS</span>
<h1 style="margin-bottom: 1.25rem; color:white">
Sumemos capacidades <br>para <span style="color: var(--ide-accent);">ir más lejos</span>
</h1>
<p class="lead-text" style="color:white">
En IDE creemos en el poder de las alianzas. Construimos una red de profesionales y especialistas con experiencias
diversas y una forma compartida de entender la gestión: comprender el contexto, conectar capacidades y generar
valor desde la práctica.”
</p>
</div>
</div>
</div>
</section>
<!-- Cultura y Formulario de Postulación -->
<section class="section-padding">
<!-- Seccion 2: ¿Por qué sumarte? -->
<section class="section-padding-md">
<div class="container">
<div class="sumarte-grid">
<!-- G1: Eyebrow -->
<div class="sumarte-intro">
<span class="eyebrow">¿POR QUÉ SUMARTE?</span>
</div>
<!-- G2: Proyectos con impacto -->
<div class="sumarte-card">
<div class="sumarte-card__icon">
<i class="fa-solid fa-handshake"></i>
</div>
<h3 class="sumarte-card__title">Proyectos con impacto</h3>
<p class="sumarte-card__desc">
Participá en iniciativas que generan valor real en organizaciones de distintos sectores.
</p>
</div>
<!-- G3: Trabajo colaborativo -->
<div class="sumarte-card">
<div class="sumarte-card__icon">
<i class="fa-solid fa-people-group"></i>
</div>
<h3 class="sumarte-card__title">Trabajo colaborativo</h3>
<p class="sumarte-card__desc">
Formá parte de un equipo interdisciplinario y de una red de profesionales de excelencia.
</p>
</div>
<!-- G4: Desarrollo profesional -->
<div class="sumarte-card">
<div class="sumarte-card__icon">
<i class="fa-solid fa-bullseye"></i>
</div>
<h3 class="sumarte-card__title">Desarrollo profesional</h3>
<p class="sumarte-card__desc">
Accedé a proyectos desafiantes, intercambio de conocimiento y aprendizaje continuo.
</p>
</div>
<!-- G5: Flexibilidad -->
<div class="sumarte-card">
<div class="sumarte-card__icon">
<i class="fa-solid fa-gear"></i>
</div>
<h3 class="sumarte-card__title">Flexibilidad</h3>
<p class="sumarte-card__desc">
Colaborá en función de tus intereses, disponibilidad y experiencia.
</p>
</div>
</div>
</div>
</section>
<!-- Seccion 3: Nuestra forma de trabajar -->
<section class="section-padding-xs">
<div class="container">
<div class="forma-trabajar">
<!-- Col 1: Título -->
<div class="forma-trabajar__intro">
<span class="eyebrow">NUESTRA FORMA DE TRABAJAR</span>
<h2 class="forma-trabajar__title">
Experiencias diferentes.<br>
Una construcción compartida.
</h2>
</div>
<!-- Divisor vertical -->
<div class="forma-trabajar__divider" aria-hidden="true"></div>
<!-- Col 2: Texto en estilo quote -->
<div class="forma-trabajar__quote">
<span class="forma-trabajar__quote-mark" aria-hidden="true">"</span>
<p class="forma-trabajar__quote-lead">
Creemos en el trabajo colaborativo, el intercambio de perspectivas y la complementariedad de capacidades.
</p>
<p class="forma-trabajar__quote-body">
Valoramos la curiosidad, el criterio profesional, la escucha y el compromiso con generar soluciones que tengan sentido para cada contexto.
</p>
</div>
</div>
</div>
</section>
<!-- Seccion 4: Formulario -->
<section class="section-padding-md careers-form-section">
<div class="container">
<div class="grid-2" style="gap: 3.5rem; align-items: flex-start;">
<!-- Imagen de fondo fundida a la derecha -->
<div class="careers-form-section__bg" aria-hidden="true"></div>
<!-- Cultura y Áreas -->
<div>
<span class="eyebrow">NUESTRA FORMA DE TRABAJAR</span>
<h2>Experiencias diferentes. <br>Una construcción compartida.</h2>
<p style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin: 1rem 0 1.5rem 0;">
Creemos en el trabajo colaborativo, el intercambio de perspectivas y la complementariedad de capacidades. Valoramos la curiosidad, el criterio profesional, la escucha y el compromiso con generar soluciones que tengan sentido para cada contexto.</p>
<div class="card" style="margin-bottom: 1.5rem; padding: 1.5rem;">
<h3 style="font-size: 1.15rem; color: var(--ide-primary); margin-bottom: 0.75rem;">¿DÓNDE PODÉS SUMAR VALOR?</h3>
<ul style="list-style: none; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.9rem; color: var(--text-muted);">
<li>• <strong>IDE Excellence:</strong> Gestión · Procesos · Mejora continua · Sistemas de gestión · Sostenibilidad</li>
<li>• <strong>IDE Project:</strong> Gestión de proyectos · PMO · Planificación · Riesgos · Agilidad</li>
<li>• <strong>IDE Digital:</strong> Digitalización · Automatización · Inteligencia Artificial · Datos · Business Intelligence</li>
<li>• <strong>IDE Academy:</strong> Facilitación · Formación ejecutiva · Diseño de experiencias de aprendizaje · Desarrollo de capacidades</li>
<li>• <strong>¿Tu especialidad no aparece acá?</strong> También queremos conocerla. El Ecosistema puede crecer incorporando nuevas capacidades.</li>
</ul>
</div>
<div class="card-trabajo"></div>
</div>
<!-- Formulario de Talento -->
<div class="card" style="padding: clamp(1.75rem, 4vw, 2.5rem);">
<h3 style="font-size: 1.35rem; margin-bottom: 0.5rem; color: var(--ide-accent-hover);">CONECTEMOS CAPACIDADES</h3>
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
Si compartís nuestra forma de entender la gestión y creés que tu experiencia puede complementar las capacidades del Ecosistema, queremos conocerte.<br> Compartinos tus datos para conocerte y considerarte en futuras oportunidades de colaboración.
<!-- Formulario (desplazado a la izquierda) -->
<div class="careers-form-wrap">
<div class="card careers-form-card">
<h3 class="careers-form-card__title">CONECTEMOS CAPACIDADES</h3>
<p class="careers-form-card__lead">
Si compartís nuestra forma de entender la gestión y creés que tu experiencia puede complementar las capacidades del Ecosistema, queremos conocerte.<br>
Compartinos tus datos para considerarte en futuras oportunidades de colaboración.
</p>
<form id="ide-careers-form">
@@ -129,19 +180,20 @@
<div class="form-group">
<label for="careers-mensaje" class="form-label">Breve presentación o trayectoria destacada</label>
<textarea id="careers-mensaje" name="mensaje" class="form-control" rows="3" placeholder="Contanos brevemente sobre tu experiencia y cómo podrías sumar valor a IDE..."></textarea>
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.75rem;">
* campos obligatorios.<br> <i>La información que compartas será utilizada únicamente para gestionar tu contacto con IDE.</i></p>
</div>
<button type="submit" class="btn btn-accent btn-lg" style="width: 100%; margin-top: 0.5rem;">
SUMARME A LA RED IDE →
<p class="careers-form-card__note">
* campos obligatorios.<br>
<i>La información que compartas será utilizada únicamente para gestionar tu contacto con IDE.</i>
</p>
<button type="submit" class="btn btn-primary btn-cta-unificado" style="margin-top: 0.5rem;">
SUMARME A LA RED IDE
</button>
<div id="careers-form-alert" class="form-alert"></div>
</form>
</div>
</div>
</div>