rf-v4.11-ecosistema listo
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
|
Before Width: | Height: | Size: 300 KiB After Width: | Height: | Size: 300 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 MiB |
+234
-91
@@ -1,3 +1,8 @@
|
||||
/* ==========================================================================
|
||||
ECOSISTEMA IDE — Sección con 4 tarjetas y paneles expandibles in-place
|
||||
Con imagen de fondo + overlay + aside glass + texto al 40%
|
||||
========================================================================== */
|
||||
|
||||
.animacion-infinito {
|
||||
width: 80%;
|
||||
min-width: 600px;
|
||||
@@ -5,20 +10,19 @@
|
||||
aspect-ratio: 2 / 1;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.capa-svg-lineas {
|
||||
.capa-svg-lineas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
/* Fuerza al navegador a usar la Tarjeta Gráfica (GPU) */
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
.capa-html-nodos {
|
||||
.capa-html-nodos {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -26,9 +30,9 @@
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nodo-circulo {
|
||||
.nodo-circulo {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
@@ -39,53 +43,43 @@
|
||||
pointer-events: auto;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
overflow: hidden;
|
||||
background-color: #fff; /* Fondo por si usas logos PNG transparentes */
|
||||
}
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.nodo-circulo:hover {
|
||||
.nodo-circulo:hover {
|
||||
transform: translate(-50%, -55%) scale(1.05);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/* Estilos para insertar logos como pediste */
|
||||
.nodo-contenido {
|
||||
.nodo-contenido {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nodo-contenido img {
|
||||
width: 70%; /* Ajusta el tamaño de tu logo aquí */
|
||||
.nodo-contenido img {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
/* Estilos de las líneas base SVG */
|
||||
.linea-base {
|
||||
.linea-base {
|
||||
fill: none;
|
||||
stroke-width: 1.5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Estilo de los Pulsos */
|
||||
.linea-pulso {
|
||||
.linea-pulso {
|
||||
fill: none;
|
||||
stroke: #ffffff;
|
||||
stroke-width: 6;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 0 2000;
|
||||
filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
|
||||
opacity: 1;
|
||||
/* Le avisa al navegador que esto es lo único que se va a animar */
|
||||
will-change: stroke-dashoffset;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
ECOSISTEMA IDE — Sección con 4 tarjetas y paneles expandibles in-place
|
||||
========================================================================== */
|
||||
}
|
||||
|
||||
/* ---------- Variables locales por unidad ---------- */
|
||||
.ecosistema-section {
|
||||
@@ -96,19 +90,35 @@
|
||||
|
||||
.eco-panel--excellence,
|
||||
.eco-card--excellence,
|
||||
.eco-pill--excellence { --unit: var(--ide-excellence); --unit-dark: var(--ide-excellence-dark); --unit-soft: rgba(0, 158, 143, 0.10); }
|
||||
.eco-pill--excellence {
|
||||
--unit: var(--ide-excellence);
|
||||
--unit-dark: var(--ide-excellence-dark);
|
||||
--unit-soft: rgba(0, 158, 143, 0.10);
|
||||
}
|
||||
|
||||
.eco-panel--projects,
|
||||
.eco-card--projects,
|
||||
.eco-pill--projects { --unit: var(--ide-projects); --unit-dark: var(--ide-projects-dark); --unit-soft: rgba(242, 140, 43, 0.10); }
|
||||
.eco-pill--projects {
|
||||
--unit: var(--ide-projects);
|
||||
--unit-dark: var(--ide-projects-dark);
|
||||
--unit-soft: rgba(242, 140, 43, 0.10);
|
||||
}
|
||||
|
||||
.eco-panel--digital,
|
||||
.eco-card--digital,
|
||||
.eco-pill--digital { --unit: var(--ide-digital); --unit-dark: var(--ide-digital-dark); --unit-soft: rgba(29, 113, 184, 0.10); }
|
||||
.eco-pill--digital {
|
||||
--unit: var(--ide-digital);
|
||||
--unit-dark: var(--ide-digital-dark);
|
||||
--unit-soft: rgba(29, 113, 184, 0.10);
|
||||
}
|
||||
|
||||
.eco-panel--academy,
|
||||
.eco-card--academy,
|
||||
.eco-pill--academy { --unit: var(--ide-academy); --unit-dark: var(--ide-academy-dark); --unit-soft: rgba(200, 16, 46, 0.10); }
|
||||
.eco-pill--academy {
|
||||
--unit: var(--ide-academy);
|
||||
--unit-dark: var(--ide-academy-dark);
|
||||
--unit-soft: rgba(200, 16, 46, 0.10);
|
||||
}
|
||||
|
||||
/* ---------- Header del ecosistema ---------- */
|
||||
.eco-header {
|
||||
@@ -125,7 +135,7 @@
|
||||
/* ---------- Grid de 4 tarjetas ---------- */
|
||||
.eco-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@@ -133,6 +143,7 @@
|
||||
position: relative;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
|
||||
@@ -146,16 +157,20 @@
|
||||
|
||||
.eco-card__btn {
|
||||
all: unset;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: .85rem;
|
||||
padding: 2rem 1.6rem 1.75rem;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.eco-card__btn:focus-visible {
|
||||
@@ -164,7 +179,6 @@
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
/* Ícono circular */
|
||||
.eco-card__icon-wrap {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
@@ -199,6 +213,8 @@
|
||||
line-height: 1.2;
|
||||
color: var(--text-main);
|
||||
margin: 0;
|
||||
hyphens: auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.eco-card__text {
|
||||
@@ -206,6 +222,8 @@
|
||||
color: var(--text-muted);
|
||||
line-height: 1.55;
|
||||
margin: 0 0 auto;
|
||||
overflow-wrap: break-word;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.eco-card__cta {
|
||||
@@ -224,7 +242,6 @@
|
||||
.eco-card__cta i { transition: transform .3s ease; }
|
||||
.eco-card:hover .eco-card__cta i { transform: translateX(5px); }
|
||||
|
||||
/* Curva decorativa inferior por tarjeta */
|
||||
.eco-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -318,25 +335,79 @@
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ---------- Panel de unidad ---------- */
|
||||
/* ==========================================================================
|
||||
PANEL DE UNIDAD — Imagen + overlay + glass aside + texto 40%
|
||||
========================================================================== */
|
||||
|
||||
.eco-panel {
|
||||
position: relative;
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: clamp(2rem, 4vw, 3rem);
|
||||
isolation: isolate;
|
||||
/* Sin padding general: el grid interno y la strip manejan sus espacios */
|
||||
}
|
||||
|
||||
/* Fondo con curvas SVG teñidas por el color de la unidad */
|
||||
.eco-panel__bg {
|
||||
/* ---------- Capa 0: imagen de fondo ---------- */
|
||||
.eco-panel__media {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
color: var(--unit);
|
||||
opacity: .12;
|
||||
}
|
||||
|
||||
.eco-panel__media img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center right;
|
||||
display: block;
|
||||
filter: saturate(.85) contrast(1.02);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
/* ---------- Capa 1: overlay con gradiente horizontal ---------- */
|
||||
.eco-panel__overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
/* Color de unidad a la izquierda → transparente a la derecha */
|
||||
background:
|
||||
linear-gradient(
|
||||
90deg,
|
||||
color-mix(in srgb, var(--unit) 92%, black 8%) 0%,
|
||||
color-mix(in srgb, var(--unit) 78%, black 22%) 28%,
|
||||
color-mix(in srgb, var(--unit) 40%, transparent) 55%,
|
||||
transparent 80%
|
||||
);
|
||||
}
|
||||
|
||||
/* Velo inferior para fundir con la strip */
|
||||
.eco-panel__overlay::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent 0%,
|
||||
transparent 72%,
|
||||
color-mix(in srgb, var(--bg-surface) 60%, transparent) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Capa 2: curvas SVG fundidas con el gradiente ---------- */
|
||||
.eco-panel__bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
color: #ffffff;
|
||||
opacity: .16;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
.eco-panel__bg svg {
|
||||
@@ -354,15 +425,25 @@
|
||||
.eco-panel__bg path:nth-child(1) { opacity: .9; }
|
||||
.eco-panel__bg path:nth-child(2) { opacity: .5; }
|
||||
|
||||
/* Grid principal del panel */
|
||||
/* ---------- Capa 3: contenido (texto 40% | aside glass al borde derecho) ---------- */
|
||||
.eco-panel__grid {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: 3;
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 1fr;
|
||||
gap: 2.5rem;
|
||||
align-items: start;
|
||||
margin-bottom: 2.5rem;
|
||||
grid-template-columns: minmax(0, 40%) 1fr;
|
||||
gap: 2rem;
|
||||
align-items: stretch;
|
||||
padding: clamp(2rem, 3.5vw, 3rem);
|
||||
min-height: 440px;
|
||||
}
|
||||
|
||||
/* Columna principal: texto limitado al 40% */
|
||||
.eco-panel__main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: .9rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.eco-panel__brand {
|
||||
@@ -370,41 +451,60 @@
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
letter-spacing: .32em;
|
||||
font-size: 1rem;
|
||||
color: var(--unit);
|
||||
margin-bottom: .75rem;
|
||||
color: #ffffff;
|
||||
opacity: .92;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
.eco-panel__title {
|
||||
font-family: 'Barlow Semi Condensed', sans-serif;
|
||||
font-size: clamp(1.8rem, 3vw, 2.4rem);
|
||||
line-height: 1.15;
|
||||
color: var(--text-main);
|
||||
margin-bottom: 1rem;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.eco-panel__lead {
|
||||
font-size: 1.02rem;
|
||||
color: var(--text-body);
|
||||
line-height: 1.65;
|
||||
margin-bottom: 1.5rem;
|
||||
max-width: 52ch;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* CTA invertido para máximo contraste sobre el color de la unidad */
|
||||
.eco-panel__cta {
|
||||
background-color: var(--unit);
|
||||
border-color: var(--unit);
|
||||
}
|
||||
.eco-panel__cta:hover {
|
||||
background-color: var(--unit-dark);
|
||||
border-color: var(--unit-dark);
|
||||
align-self: flex-start;
|
||||
background-color: #ffffff;
|
||||
border-color: #ffffff;
|
||||
color: var(--unit-dark);
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
/* Lista lateral de capacidades */
|
||||
.eco-panel__cta:hover {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border-color: rgba(255, 255, 255, 0.9);
|
||||
color: var(--unit-dark);
|
||||
}
|
||||
|
||||
/* ---------- Aside glass pegado al borde derecho ---------- */
|
||||
.eco-panel__side {
|
||||
background: color-mix(in srgb, var(--unit) 5%, var(--bg-surface));
|
||||
border: 1px solid color-mix(in srgb, var(--unit) 22%, var(--border-color));
|
||||
align-self: center;
|
||||
justify-self: end;
|
||||
width: min(380px, 100%);
|
||||
padding: 1.5rem 1.5rem 1.35rem;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem 1.4rem;
|
||||
|
||||
background: color-mix(in srgb, var(--unit) 50%, transparent);
|
||||
border: 1px solid color-mix(in srgb, #ffffff 32%, transparent);
|
||||
backdrop-filter: blur(14px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(14px) saturate(140%);
|
||||
box-shadow:
|
||||
0 18px 40px -20px rgba(0, 0, 0, .35),
|
||||
inset 0 1px 0 rgba(255, 255, 255, .18);
|
||||
|
||||
color: #ffffff;
|
||||
/* Sangrado hacia el borde derecho para “tocar” el borde del panel */
|
||||
margin-right: clamp(-2.5rem, -2vw, -1rem);
|
||||
}
|
||||
|
||||
.eco-panel__side-title {
|
||||
@@ -413,64 +513,69 @@
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
font-size: .95rem;
|
||||
color: var(--unit);
|
||||
color: #ffffff;
|
||||
opacity: .92;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.eco-panel__list {
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: .9rem;
|
||||
gap: .85rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.eco-panel__list li {
|
||||
display: flex;
|
||||
gap: .75rem;
|
||||
gap: .7rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.eco-panel__li-icon {
|
||||
flex-shrink: 0;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--unit-soft);
|
||||
color: var(--unit);
|
||||
font-size: .85rem;
|
||||
background: rgba(255, 255, 255, .16);
|
||||
border: 1px solid rgba(255, 255, 255, .25);
|
||||
color: #ffffff;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.eco-panel__list strong {
|
||||
display: block;
|
||||
font-family: 'Barlow Condensed', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
color: var(--text-main);
|
||||
font-size: .98rem;
|
||||
color: #ffffff;
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
|
||||
.eco-panel__list p {
|
||||
font-size: .85rem;
|
||||
color: var(--text-muted);
|
||||
font-size: .82rem;
|
||||
color: rgba(255, 255, 255, .85);
|
||||
line-height: 1.45;
|
||||
margin: .1rem 0 0;
|
||||
}
|
||||
|
||||
/* Franja inferior con minicards */
|
||||
/* ---------- Franja inferior: fondo sólido, corta la imagen ---------- */
|
||||
.eco-panel__strip {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-top: 1px solid color-mix(in srgb, var(--unit) 20%, var(--border-color));
|
||||
padding-top: 1.75rem;
|
||||
z-index: 3;
|
||||
/*background: var(--bg-surface);*/
|
||||
bottom: 0;
|
||||
|
||||
padding: 0rem clamp(2rem, 3.5vw, 3rem) clamp(1rem, 1vw, 1rem);
|
||||
/*border-top: 1px solid color-mix(in srgb, var(--unit) 22%, var(--border-color));*/
|
||||
}
|
||||
|
||||
.eco-panel__strip-title {
|
||||
font-family: 'Barlow Semi Condensed', sans-serif;
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-main);
|
||||
color: var(--text-inverse);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@@ -511,15 +616,48 @@
|
||||
========================================================================== */
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.eco-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.eco-panel__grid { grid-template-columns: 1fr; gap: 1.75rem; }
|
||||
.eco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
|
||||
.eco-panel__grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.75rem;
|
||||
min-height: 0;
|
||||
padding: 1.75rem;
|
||||
}
|
||||
|
||||
.eco-panel__side {
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.eco-panel__media img {
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.eco-panel__strip-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.eco-grid { grid-template-columns: 1fr; }
|
||||
.eco-panel { padding: 1.5rem; }
|
||||
.eco-grid { grid-template-columns: minmax(0, 1fr); }
|
||||
|
||||
.eco-panel__grid {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* En mobile el gradiente pasa a vertical porque el texto ya no está a la izquierda */
|
||||
.eco-panel__overlay {
|
||||
background:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
color-mix(in srgb, var(--unit) 92%, black 8%) 0%,
|
||||
color-mix(in srgb, var(--unit) 60%, transparent) 60%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
.eco-panel__strip-grid { grid-template-columns: 1fr; }
|
||||
|
||||
.eco-unit__topbar { flex-direction: column; align-items: stretch; }
|
||||
.eco-unit__nav { justify-content: flex-start; }
|
||||
}
|
||||
@@ -529,7 +667,11 @@
|
||||
[data-theme="dark"] .eco-panel {
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
[data-theme="dark"] .eco-panel__side,
|
||||
|
||||
[data-theme="dark"] .eco-panel__media img {
|
||||
filter: saturate(.8) brightness(.88) contrast(1.02);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .eco-mini {
|
||||
background: color-mix(in srgb, var(--unit) 10%, var(--bg-surface));
|
||||
}
|
||||
@@ -541,7 +683,8 @@
|
||||
.eco-card__cta i,
|
||||
.eco-mini,
|
||||
.eco-unit__back,
|
||||
.eco-state--unit {
|
||||
.eco-state--unit,
|
||||
.eco-panel__media img {
|
||||
transition: none !important;
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
@@ -308,6 +308,10 @@ p, li, .lead-text, .text-body, .text-muted {
|
||||
.section-padding-npb {
|
||||
padding-top: clamp(1rem, 2vw, 3.5rem);
|
||||
}
|
||||
.section-padding-xs {
|
||||
padding-top: clamp(0.5rem, 1vw, 1.5rem);
|
||||
padding-bottom: clamp(1rem, 2vw, 1.5rem);
|
||||
}
|
||||
|
||||
.bg1{
|
||||
background: radial-gradient(circle at 20% 80%, var(--ide-accent-soft) 0%, transparent 50%), var(--bg-body);
|
||||
@@ -374,6 +378,20 @@ p, li, .lead-text, .text-body, .text-muted {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.herobg-5{
|
||||
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/CTA2.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -2606,6 +2624,26 @@ canvas {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.1;
|
||||
}
|
||||
.parallax-bg-layer3 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
/* Imagen de fondo */
|
||||
background-image: url('../assets/img/hero/curvas.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.1;
|
||||
}
|
||||
/* Cortina suave en bordes superior e inferior para fundir con el header/footer */
|
||||
.parallax-overlay {
|
||||
position: absolute;
|
||||
|
||||
+2
-5
@@ -46,11 +46,8 @@
|
||||
</section>
|
||||
|
||||
<!-- Grilla de Desafíos con Modales -->
|
||||
<section class="section-padding contact-parallax-section">
|
||||
<div class="parallax-wrapper" aria-hidden="true">
|
||||
<div id="contact-parallax-bg" class="parallax-bg-layer2"></div>
|
||||
<div class="parallax-overlay"></div>
|
||||
</div>
|
||||
<section class="section-padding bg1">
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="grid-3 desafios-grid" style="gap: 1.5rem;">
|
||||
|
||||
+67
-141
@@ -34,7 +34,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="#ecosistema-ide" class="btn btn-primary btn-cta-unificado"
|
||||
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem;">
|
||||
Conocé el Ecosistema
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
@@ -63,8 +63,14 @@
|
||||
</section>
|
||||
|
||||
<!-- Seccion 2: Ecosistema IDE -->
|
||||
<section id="ecosistema-ide" class="section-padding bg2 ecosistema-section" aria-labelledby="ecosistema-title">
|
||||
<section id="ecosistema-ide" class="section-padding contact-parallax-section ecosistema-section" aria-labelledby="ecosistema-title">
|
||||
<div class="parallax-wrapper" aria-hidden="true">
|
||||
<div id="contact-parallax-bg" class="parallax-bg-layer3"></div>
|
||||
<div class="parallax-overlay"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- ============ ESTADO 1: ECOSISTEMA (4 tarjetas) ============ -->
|
||||
<div class="eco-state eco-state--ecosystem" data-eco-state="ecosystem">
|
||||
<header class="eco-header">
|
||||
@@ -85,7 +91,7 @@
|
||||
<i class="fa-solid fa-award eco-card__icon"></i>
|
||||
</span>
|
||||
<span class="eco-card__badge">IDE EXCELLENCE</span>
|
||||
<h3 class="eco-card__title">Excelencia operacional y sistemas de gestión</h3>
|
||||
<h3 class="eco-card__title">Excelencia operacional y <br>sistemas de gestión</h3>
|
||||
<p class="eco-card__text">Procesos, ISO, riesgos y mejora continua para sostener el desempeño.</p>
|
||||
<span class="eco-card__cta">
|
||||
Explorar unidad <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
|
||||
@@ -146,14 +152,13 @@
|
||||
<!-- ============ ESTADO 2: UNIDAD EXPANDIDA ============ -->
|
||||
<div class="eco-state eco-state--unit" data-eco-state="unit" hidden>
|
||||
|
||||
<!-- Botón volver -->
|
||||
<!-- Botón volver + pills -->
|
||||
<div class="eco-unit__topbar">
|
||||
<button type="button" class="eco-unit__back" data-eco-close>
|
||||
<i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
|
||||
<span>Volver al ecosistema</span>
|
||||
</button>
|
||||
|
||||
<!-- Pills de navegación entre unidades -->
|
||||
<nav class="eco-unit__nav" aria-label="Cambiar de unidad">
|
||||
<button type="button" class="eco-pill eco-pill--excellence" data-eco-open="excellence">Excellence</button>
|
||||
<button type="button" class="eco-pill eco-pill--projects" data-eco-open="projects">Projects</button>
|
||||
@@ -162,28 +167,26 @@
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Paneles de unidad -->
|
||||
<div class="eco-panels">
|
||||
|
||||
<!-- ============ PANEL: EXCELLENCE ============ -->
|
||||
<article class="eco-panel eco-panel--excellence" id="eco-panel-excellence" data-eco-panel="excellence" hidden>
|
||||
<div class="eco-panel__bg" aria-hidden="true">
|
||||
<svg viewBox="0 0 1200 600" preserveAspectRatio="none">
|
||||
<path d="M-100,500 C200,300 400,650 700,400 C900,250 1100,450 1300,300" />
|
||||
<path d="M-100,200 C150,50 400,300 650,150 C900,0 1100,250 1300,100" />
|
||||
</svg>
|
||||
|
||||
<!-- Imagen de fondo -->
|
||||
<div class="eco-panel__media" aria-hidden="true">
|
||||
<img src="assets/img/ecosistema/excellence.jpg" alt="" loading="lazy" decoding="async">
|
||||
</div>
|
||||
|
||||
<!-- Overlay con gradiente del color de la unidad -->
|
||||
<div class="eco-panel__overlay" aria-hidden="true"></div>
|
||||
|
||||
<div class="eco-panel__grid">
|
||||
<div class="eco-panel__main">
|
||||
<span class="eco-panel__brand">IDE EXCELLENCE</span>
|
||||
<h2 class="eco-panel__title">Fortalecer la gestión para mejorar el desempeño.</h2>
|
||||
<p class="eco-panel__lead">
|
||||
Ayudamos a las organizaciones a comprender cómo funcionan sus procesos, ordenar su gestión y desarrollar sistemas capaces de sostener la mejora en el tiempo.
|
||||
Ayudamos a las organizaciones a comprender cómo funcionan sus procesos, ordenar su gestión y desarrollar sistemas capaces de sostener la mejora en el tiempo. Combinamos excelencia operacional, gestión por procesos, sistemas de gestión, análisis de riesgos e información para transformar requisitos y oportunidades de mejora en mejores formas de gestionar.
|
||||
</p>
|
||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado eco-panel__cta">
|
||||
HABLEMOS <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<aside class="eco-panel__side" aria-label="Capacidades de IDE Excellence">
|
||||
@@ -234,6 +237,13 @@
|
||||
|
||||
<!-- ============ PANEL: PROJECTS ============ -->
|
||||
<article class="eco-panel eco-panel--projects" id="eco-panel-projects" data-eco-panel="projects" hidden>
|
||||
|
||||
<div class="eco-panel__media" aria-hidden="true">
|
||||
<img src="assets/img/ecosistema/projects.png" alt="" loading="lazy" decoding="async">
|
||||
</div>
|
||||
|
||||
<div class="eco-panel__overlay" aria-hidden="true"></div>
|
||||
|
||||
<div class="eco-panel__bg" aria-hidden="true">
|
||||
<svg viewBox="0 0 1200 600" preserveAspectRatio="none">
|
||||
<path d="M-100,450 C200,250 400,600 700,350 C900,200 1100,400 1300,250" />
|
||||
@@ -246,11 +256,8 @@
|
||||
<span class="eco-panel__brand">IDE PROJECTS</span>
|
||||
<h2 class="eco-panel__title">Convertir iniciativas en resultados.</h2>
|
||||
<p class="eco-panel__lead">
|
||||
Fortalecemos la capacidad de seleccionar, priorizar, planificar y ejecutar proyectos, programas y portafolios, conectando iniciativas con la estrategia y los recursos.
|
||||
Ayudamos a las organizaciones a fortalecer su capacidad para seleccionar, priorizar, planificar y ejecutar proyectos, programas y portafolios, conectando las iniciativas con los objetivos estratégicos y los recursos disponibles. Integramos metodologías, gobernanza, información y capacidades de gestión para acompañar todo el ciclo de vida de los proyectos y mejorar su contribución a los resultados de la organización.
|
||||
</p>
|
||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado eco-panel__cta">
|
||||
HABLEMOS <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<aside class="eco-panel__side" aria-label="Capacidades de IDE Projects">
|
||||
@@ -301,6 +308,13 @@
|
||||
|
||||
<!-- ============ PANEL: DIGITAL ============ -->
|
||||
<article class="eco-panel eco-panel--digital" id="eco-panel-digital" data-eco-panel="digital" hidden>
|
||||
|
||||
<div class="eco-panel__media" aria-hidden="true">
|
||||
<img src="assets/img/ecosistema/digital.jpg" alt="" loading="lazy" decoding="async">
|
||||
</div>
|
||||
|
||||
<div class="eco-panel__overlay" aria-hidden="true"></div>
|
||||
|
||||
<div class="eco-panel__bg" aria-hidden="true">
|
||||
<svg viewBox="0 0 1200 600" preserveAspectRatio="none">
|
||||
<path d="M-100,520 C200,320 400,670 700,420 C900,270 1100,470 1300,320" />
|
||||
@@ -313,11 +327,9 @@
|
||||
<span class="eco-panel__brand">IDE DIGITAL</span>
|
||||
<h2 class="eco-panel__title">Tecnología con sentido.</h2>
|
||||
<p class="eco-panel__lead">
|
||||
Identificamos dónde la tecnología genera valor y transformamos esas oportunidades en soluciones digitales aplicables a la realidad de cada organización.
|
||||
Ayudamos a las organizaciones a identificar dónde la tecnología puede generar valor y a transformar esas oportunidades en soluciones digitales aplicables a su realidad. Integramos procesos, datos, automatización e inteligencia artificial para simplificar la gestión, mejorar el acceso a la información y fortalecer la toma de decisiones, priorizando soluciones útiles, escalables y sostenibles.
|
||||
</p>
|
||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado eco-panel__cta">
|
||||
HABLEMOS <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<aside class="eco-panel__side" aria-label="Capacidades de IDE Digital">
|
||||
@@ -372,115 +384,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Profundización de las 4 Capacidades -->
|
||||
<section class="section-padding-sm" >
|
||||
<div class="container">
|
||||
<div class="seccion-servicios-tarjetas">
|
||||
<span class="eyebrow">CAPACIDADES</span>
|
||||
<h2>Conocé Nuestro Ecosistema en detalle</h2>
|
||||
</div>
|
||||
<!-- 1. IDE Excellence -->
|
||||
<div id="excellence" style="margin-bottom: 4rem; padding: 2rem; background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border-color);">
|
||||
<div class="grid-2" style="align-items: center; gap: 3rem;">
|
||||
<div>
|
||||
<h3 style="font-size: 2rem; color: var(--ide-excellence); margin-bottom: 0.5rem; text-transform: uppercase;">IDE Excellence</h3>
|
||||
<p style="font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; color: var(--ide-primary);">Para fortalecer la gestión y mejorar el desempeño</p>
|
||||
<p style="color: var(--text-body); margin-bottom: 1.5rem;">
|
||||
Integramos procesos, sistemas de gestión, mejora continua y sostenibilidad para ayudar a las organizaciones a gestionar mejor, optimizar su desempeño y generar valor sostenible.
|
||||
</p>
|
||||
<div class="pills-list" style="margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Procesos</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Sistemas de gestión</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Mejora continua</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Desempeño</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Riesgos</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Sostenibilidad</span>
|
||||
</div>
|
||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="background-color: var(--ide-excellence); border-color: var(--ide-excellence);">HABLEMOS →</a>
|
||||
</div>
|
||||
<div>
|
||||
<img src="assets/img/excellence.png" alt="IDE Excellence" style="width: 100%; border-radius: var(--radius-md);">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. IDE Project -->
|
||||
<div id="project" style="margin-bottom: 4rem; padding: 2rem; background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border-color);">
|
||||
<div class="grid-2" style="align-items: center; gap: 3rem;">
|
||||
<div>
|
||||
<img src="assets/img/projects.png" alt="IDE Project" style="width: 100%; border-radius: var(--radius-md);">
|
||||
</div>
|
||||
<div>
|
||||
<h3 style="font-size: 2rem; color: var(--ide-projects); margin-bottom: 0.5rem; text-transform: uppercase;">IDE Project</h3>
|
||||
<p style="font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; color: var(--ide-primary);">Para convertir iniciativas en resultados</p>
|
||||
<p style="color: var(--text-body); margin-bottom: 1.5rem;">
|
||||
Fortalecemos la capacidad de las organizaciones para seleccionar, priorizar y gestionar proyectos, conectando estrategia, recursos y ejecución para transformar iniciativas en resultados.
|
||||
</p>
|
||||
<div class="pills-list" style="margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Proyectos</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">PMO</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Portafolios</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Gobernanza</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Metodologías</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Resultados</span>
|
||||
</div>
|
||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="background-color: var(--ide-projects); border-color: var(--ide-projects);">HABLEMOS →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. IDE Digital -->
|
||||
<div id="digital" style="margin-bottom: 4rem; padding: 2rem; background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border-color);">
|
||||
<div class="grid-2" style="align-items: center; gap: 3rem;">
|
||||
<div>
|
||||
<h3 style="font-size: 2rem; color: var(--ide-digital); margin-bottom: 0.5rem; text-transform: uppercase;">IDE Digital</h3>
|
||||
<p style="font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; color: var(--ide-primary);">Tecnología con sentido</p>
|
||||
<p style="color: var(--text-body); margin-bottom: 1.5rem;">
|
||||
Conectamos gestión, procesos, datos e inteligencia artificial para identificar dónde la tecnología puede simplificar, automatizar y potenciar la forma en que las organizaciones trabajan y toman decisiones.
|
||||
</p>
|
||||
<div class="pills-list" style="margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Digitalización</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Automatización</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Datos</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Inteligencia Artificial</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Integración</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Decisiones</span>
|
||||
</div>
|
||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado" style="background-color: var(--ide-digital); border-color: var(--ide-digital);">HABLEMOS →</a>
|
||||
</div>
|
||||
<div>
|
||||
<img src="assets/img/digital.png" alt="IDE Digital" style="width: 100%; border-radius: var(--radius-md);">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. IDE Academy -->
|
||||
<div id="academy" style="margin-bottom: 4rem; padding: 2rem; background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border-color);">
|
||||
<div class="grid-2" style="align-items: center; gap: 3rem;">
|
||||
<div>
|
||||
<img src="assets/img/academy.png" alt="IDE Academy" style="width: 100%; border-radius: var(--radius-md);">
|
||||
</div>
|
||||
<div>
|
||||
<h3 style="font-size: 2rem; color: var(--ide-academy); margin-bottom: 0.5rem; text-transform: uppercase;">IDE Academy</h3>
|
||||
<p style="font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; color: var(--ide-primary);">Para desarrollar capacidades</p>
|
||||
<p style="color: var(--text-body); margin-bottom: 1.5rem;">
|
||||
Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para fortalecer las capacidades que profesionales, equipos y organizaciones necesitan para gestionar, liderar y transformar.
|
||||
</p>
|
||||
<div class="pills-list" style="margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Formación Ejecutiva</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">In-Company</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Programas</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Talleres</span>
|
||||
<span class="pill-item" style="background: var(--bg-subtle); padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.85rem;">Rutas de aprendizaje</span>
|
||||
</div>
|
||||
<a href="ide-academy.html" class="btn btn-primary btn-cta-unificado" style="background-color: var(--ide-academy); border-color: var(--ide-academy);">EXPLORAR ACADEMY →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PREGUNTAS FRECUENTES-->
|
||||
<!-- Seccion 3: Preguntas Frecuentes -->
|
||||
<section class="section-padding bg-subtle-section">
|
||||
<div class="container">
|
||||
|
||||
@@ -581,16 +485,38 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Final -->
|
||||
<section class="section-padding" style="background-color: var(--teal-dark); border-top: 1px solid var(--border-color);">
|
||||
<div class="container container-narrow">
|
||||
<h2 style="color: var(--text-inverse); margin-bottom: 1rem;">¿Dónde podemos generar mayor impacto en tu organización?</h2>
|
||||
<p class="lead-text-cta" style="margin-bottom: 1.5rem;">
|
||||
Conversemos para comprender tu desafío e identificar qué capacidades pueden aportar mayor valor.
|
||||
<!-- Sección 4: CTA -->
|
||||
<section class="section-padding-xs herobg-5">
|
||||
<div class="container container-wide">
|
||||
<div class="hero-grid">
|
||||
<div>
|
||||
|
||||
<h2 style="margin-bottom: 0.8rem; line-height: 1.1; color: white;">
|
||||
Una única solución no siempre <br>encaja para todos los desafíos.
|
||||
</h2>
|
||||
<p class="lead-text" style="margin-bottom: 2.5rem; color: white;">
|
||||
Integramos las capacidades necesarias para diseñar una respuesta que tenga sentido para tu organización y su contexto.
|
||||
</p>
|
||||
<div style="display: flex; justify-content: left; gap: 1rem; flex-wrap: wrap;">
|
||||
<a href="contacto.html" class="btn btn-primary-cta btn-sm">HABLEMOS</a>
|
||||
<a href="desafios.html" class="btn btn-outline-cta btn-sm">Explorar Punto de Partida</a>
|
||||
|
||||
<!-- Hero Actions -->
|
||||
<div class="hero-actions" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
|
||||
<a href="contacto.html" class="btn btn-primary btn-cta-unificado"
|
||||
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem;">
|
||||
HABLEMOS
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<polyline points="12 16 16 12 12 8"></polyline>
|
||||
<line x1="8" y1="12" x2="16" y2="12"></line>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual"
|
||||
style="width: 100%; height: 300px; position: relative; display: flex; justify-content: center; align-items: center;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
+1
-1
@@ -123,7 +123,7 @@
|
||||
<div class="eco-slide__text">
|
||||
<h3>Fortalecer la gestión</h3>
|
||||
<p>Sistemas de gestión, normas ISO (9001, 14001, 45001, 50001, 22000, 27001, 28000, 39001, 21001 y 29993), gestión por procesos, calidad y mejora continua con sentido de negocio.</p>
|
||||
<a href="ecosistema.html#excellence" class="eco-slide__link">Explorar Excellence →</a>
|
||||
<a href="ecosistema.html#eco-excellence" class="eco-slide__link">Explorar Excellence →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+102
-45
@@ -1,5 +1,6 @@
|
||||
/* ==========================================================================
|
||||
ECOSISTEMA IDE — Cambio in-place entre tarjetas y paneles de unidad
|
||||
ECOSISTEMA IDE — Cambio in-place + deep link por hash
|
||||
URLs válidas: #eco-excellence | #eco-projects | #eco-digital | #ecosistema
|
||||
========================================================================== */
|
||||
(function () {
|
||||
'use strict';
|
||||
@@ -14,117 +15,173 @@
|
||||
const backBtn = section.querySelector('[data-eco-close]');
|
||||
const pills = Array.from(section.querySelectorAll('.eco-pill'));
|
||||
|
||||
let lastFocusedTrigger = null;
|
||||
const VALID_UNITS = ['excellence', 'projects', 'digital'];
|
||||
const HASH_PREFIX = '#eco-';
|
||||
const HASH_ECOSYSTEM = '#ecosistema';
|
||||
|
||||
/* --- Mostrar panel de una unidad --- */
|
||||
function openUnit(id) {
|
||||
let lastFocusedTrigger = null;
|
||||
let currentUnit = null; // null = ecosistema
|
||||
|
||||
/* ---------- Utilidades de URL ---------- */
|
||||
function unitFromHash() {
|
||||
const h = window.location.hash;
|
||||
if (h === HASH_ECOSYSTEM) return null;
|
||||
if (h.startsWith(HASH_PREFIX)) {
|
||||
const id = h.slice(HASH_PREFIX.length);
|
||||
return VALID_UNITS.includes(id) ? id : null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function hashForUnit(id) {
|
||||
return id ? HASH_PREFIX + id : HASH_ECOSYSTEM;
|
||||
}
|
||||
|
||||
/* ---------- Render (no toca la URL) ---------- */
|
||||
function renderUnit(id) {
|
||||
const panel = panels.find(p => p.dataset.ecoPanel === id);
|
||||
if (!panel) return;
|
||||
|
||||
// Guardamos el trigger que originó el cambio (para devolver foco)
|
||||
const origin = triggers.find(t => t.dataset.ecoOpen === id);
|
||||
if (origin) lastFocusedTrigger = origin;
|
||||
|
||||
// Ocultar ecosistema, mostrar estado unidad
|
||||
stateEcosystem.hidden = true;
|
||||
stateUnit.hidden = false;
|
||||
|
||||
// Alternar paneles
|
||||
panels.forEach(p => {
|
||||
const isActive = p.dataset.ecoPanel === id;
|
||||
p.hidden = !isActive;
|
||||
if (isActive) {
|
||||
// Re-trigger de la animación de entrada
|
||||
p.style.animation = 'none';
|
||||
// Forzar reflow
|
||||
void p.offsetWidth;
|
||||
void p.offsetWidth; // reflow para reiniciar animación
|
||||
p.style.animation = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Aria expandido en tarjetas
|
||||
triggers.forEach(t => {
|
||||
const isThis = t.dataset.ecoOpen === id;
|
||||
t.setAttribute('aria-expanded', isThis ? 'true' : 'false');
|
||||
t.setAttribute('aria-expanded', t.dataset.ecoOpen === id ? 'true' : 'false');
|
||||
});
|
||||
|
||||
// Pills activas
|
||||
pills.forEach(pill => {
|
||||
pill.classList.toggle('is-active', pill.dataset.ecoOpen === id);
|
||||
});
|
||||
|
||||
// Foco accesible al título del panel
|
||||
const title = panel.querySelector('.eco-panel__title');
|
||||
if (title) {
|
||||
title.setAttribute('tabindex', '-1');
|
||||
// Pequeño timeout para asegurar visibilidad tras el cambio de estado
|
||||
requestAnimationFrame(() => title.focus({ preventScroll: false }));
|
||||
}
|
||||
|
||||
// Scroll suave al inicio de la sección (solo si quedó fuera de vista)
|
||||
const rect = section.getBoundingClientRect();
|
||||
if (rect.top < -80) {
|
||||
section.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
currentUnit = id;
|
||||
}
|
||||
|
||||
/* --- Volver al estado ecosistema --- */
|
||||
function closeUnit() {
|
||||
function renderEcosystem({ restoreFocus = true } = {}) {
|
||||
stateUnit.hidden = true;
|
||||
stateEcosystem.hidden = false;
|
||||
|
||||
triggers.forEach(t => t.setAttribute('aria-expanded', 'false'));
|
||||
pills.forEach(p => p.classList.remove('is-active'));
|
||||
|
||||
// Devolver foco a la tarjeta origen
|
||||
if (restoreFocus) {
|
||||
if (lastFocusedTrigger && typeof lastFocusedTrigger.focus === 'function') {
|
||||
lastFocusedTrigger.focus({ preventScroll: false });
|
||||
} else {
|
||||
// Fallback: primer botón del grid
|
||||
const first = triggers[0];
|
||||
if (first) first.focus({ preventScroll: false });
|
||||
} else if (triggers[0]) {
|
||||
triggers[0].focus({ preventScroll: false });
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Listeners --- */
|
||||
currentUnit = null;
|
||||
}
|
||||
|
||||
/* ---------- API con URL ---------- */
|
||||
function openUnit(id, { push = true, scroll = true } = {}) {
|
||||
if (!VALID_UNITS.includes(id)) return;
|
||||
renderUnit(id);
|
||||
|
||||
if (push) {
|
||||
const url = window.location.pathname + window.location.search + hashForUnit(id);
|
||||
history.pushState({ eco: id }, '', url);
|
||||
}
|
||||
|
||||
if (scroll) {
|
||||
const rect = section.getBoundingClientRect();
|
||||
if (rect.top < -80 || rect.top > 200) {
|
||||
section.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function closeUnit({ push = true, scroll = false } = {}) {
|
||||
renderEcosystem();
|
||||
if (push) {
|
||||
const url = window.location.pathname + window.location.search + HASH_ECOSYSTEM;
|
||||
history.pushState({ eco: null }, '', url);
|
||||
}
|
||||
if (scroll) {
|
||||
section.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Listeners de UI ---------- */
|
||||
triggers.forEach(trigger => {
|
||||
trigger.addEventListener('click', (e) => {
|
||||
const id = trigger.dataset.ecoOpen;
|
||||
if (!id) return;
|
||||
// Si es un <a> real (academy), dejamos que navegue
|
||||
// Academy es <a href="academy.html">: dejamos navegar
|
||||
if (trigger.tagName === 'A' && trigger.getAttribute('href')) return;
|
||||
e.preventDefault();
|
||||
openUnit(id);
|
||||
});
|
||||
|
||||
// Soporte teclado para tarjetas no-button (por si acaso)
|
||||
trigger.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
if (e.key !== 'Enter' && e.key !== ' ') return;
|
||||
const id = trigger.dataset.ecoOpen;
|
||||
if (!id) return;
|
||||
if (trigger.tagName === 'A') return;
|
||||
e.preventDefault();
|
||||
openUnit(id);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (backBtn) backBtn.addEventListener('click', closeUnit);
|
||||
if (backBtn) backBtn.addEventListener('click', () => closeUnit({ scroll: true }));
|
||||
|
||||
// Escape cierra el panel expandido
|
||||
section.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && !stateUnit.hidden) {
|
||||
closeUnit();
|
||||
}
|
||||
if (e.key === 'Escape' && !stateUnit.hidden) closeUnit();
|
||||
});
|
||||
|
||||
/* --- Deep link opcional por hash (#eco-projects) sin recargar --- */
|
||||
function readHash() {
|
||||
const hash = window.location.hash.replace('#eco-', '');
|
||||
if (['excellence', 'projects', 'digital'].includes(hash)) {
|
||||
openUnit(hash);
|
||||
/* ---------- Sincronización con la URL ---------- */
|
||||
function syncFromLocation() {
|
||||
const id = unitFromHash();
|
||||
if (id && id !== currentUnit) {
|
||||
renderUnit(id);
|
||||
} else if (!id && currentUnit !== null) {
|
||||
renderEcosystem({ restoreFocus: false });
|
||||
}
|
||||
}
|
||||
window.addEventListener('hashchange', readHash);
|
||||
readHash();
|
||||
|
||||
// Carga inicial: si el hash trae unidad, abrir + scroll
|
||||
(function initFromUrl() {
|
||||
const id = unitFromHash();
|
||||
if (id) {
|
||||
renderUnit(id);
|
||||
requestAnimationFrame(() => {
|
||||
section.scrollIntoView({ behavior: 'auto', block: 'start' });
|
||||
});
|
||||
} else {
|
||||
renderEcosystem({ restoreFocus: false });
|
||||
}
|
||||
})();
|
||||
|
||||
// Cambios manuales del hash (pegar link, editar barra, links compartidos)
|
||||
window.addEventListener('hashchange', syncFromLocation);
|
||||
|
||||
// Atrás/adelante del navegador
|
||||
window.addEventListener('popstate', syncFromLocation);
|
||||
|
||||
/* ---------- API pública opcional ---------- */
|
||||
window.EcoIDE = {
|
||||
open: openUnit,
|
||||
close: closeUnit,
|
||||
current: () => currentUnit,
|
||||
};
|
||||
})();
|
||||
+40
-10
@@ -116,7 +116,7 @@ const nodosData = [
|
||||
|
||||
// Crear pulsos
|
||||
conn.pulsos = [];
|
||||
const cantPulsos = 10;
|
||||
const cantPulsos = 6;
|
||||
|
||||
for (let i = 0; i < cantPulsos; i++) {
|
||||
const pathPulso = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||
@@ -149,24 +149,54 @@ const nodosData = [
|
||||
});
|
||||
}, 1200);
|
||||
|
||||
// 4. Motor de Animación Ultraligero
|
||||
function animarFrame() {
|
||||
// 4. Motor de Animación Ultraligero
|
||||
let animando = false;
|
||||
let rafId = null;
|
||||
|
||||
function animarFrame() {
|
||||
if (!animando) return; // corta el loop cuando no es visible
|
||||
conexiones.forEach(conn => {
|
||||
conn.pulsos.forEach(p => {
|
||||
p.dash -= p.speed;
|
||||
|
||||
// OPTIMIZACIÓN EXTREMA: Solo interactuamos con el DOM si el pulso saltó de carril
|
||||
if (p.needsPathUpdate) {
|
||||
p.el.setAttribute('d', conn.rutasCache[p.currentOffset]);
|
||||
p.needsPathUpdate = false;
|
||||
}
|
||||
|
||||
// Lo único que se actualiza contínuamente es el desplazamiento
|
||||
p.el.style.strokeDashoffset = p.dash;
|
||||
});
|
||||
});
|
||||
rafId = requestAnimationFrame(animarFrame);
|
||||
}
|
||||
|
||||
requestAnimationFrame(animarFrame);
|
||||
function iniciarAnimacion() {
|
||||
if (animando) return;
|
||||
animando = true;
|
||||
rafId = requestAnimationFrame(animarFrame);
|
||||
}
|
||||
|
||||
function detenerAnimacion() {
|
||||
animando = false;
|
||||
if (rafId) cancelAnimationFrame(rafId);
|
||||
}
|
||||
|
||||
// Detectar visibilidad de la sección del header
|
||||
const heroVisual = document.querySelector('.hero-visual');
|
||||
if (heroVisual && 'IntersectionObserver' in window) {
|
||||
const io = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) iniciarAnimacion();
|
||||
else detenerAnimacion();
|
||||
});
|
||||
}, { threshold: 0.05 });
|
||||
io.observe(heroVisual);
|
||||
} else {
|
||||
iniciarAnimacion(); // fallback
|
||||
}
|
||||
|
||||
// Pausar también cuando la pestaña queda oculta
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.hidden) detenerAnimacion();
|
||||
else if (heroVisual && heroVisual.getBoundingClientRect().top < window.innerHeight) {
|
||||
iniciarAnimacion();
|
||||
}
|
||||
|
||||
animarFrame();
|
||||
});
|
||||
+5
-1
@@ -46,7 +46,11 @@
|
||||
</section>
|
||||
|
||||
<!-- Seccion 2: Soluciones -->
|
||||
<section class="section-padding">
|
||||
<section class="section-padding contact-parallax-section">
|
||||
<div class="parallax-wrapper" aria-hidden="true">
|
||||
<div id="contact-parallax-bg" class="parallax-bg-layer2"></div>
|
||||
<div class="parallax-overlay"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="grid-4">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user