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

rf-v4.11-ecosistema listo

Browse Source
This commit is contained in:
fanfuso
2026-10-09 11:08:14 -03:00
parent dd7d31698a
commit 34a251efb9
18 changed files with 562 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/ecosistema.css
+289 -146
View File
@@ -1,92 +1,86 @@
.animacion-infinito {
width: 80%;
min-width: 600px;
max-width: 1000px;
aspect-ratio: 2 / 1;
position: relative;
background-color: transparent;
}
.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 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
}
.nodo-circulo {
position: absolute;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15), inset 0 -4px 10px rgba(0,0,0,0.1);
transform: translate(-50%, -50%);
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 */
}
.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 {
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í */
height: 70%;
object-fit: contain;
}
/* Estilos de las líneas base SVG */
.linea-base {
fill: none;
stroke-width: 1.5;
opacity: 0.5;
}
/* Estilo de los Pulsos */
.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
Con imagen de fondo + overlay + aside glass + texto al 40%
========================================================================== */
.animacion-infinito {
width: 80%;
min-width: 600px;
max-width: 1000px;
aspect-ratio: 2 / 1;
position: relative;
background-color: transparent;
}
.capa-svg-lineas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transform: translateZ(0);
}
.capa-html-nodos {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
}
.nodo-circulo {
position: absolute;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15), inset 0 -4px 10px rgba(0,0,0,0.1);
transform: translate(-50%, -50%);
pointer-events: auto;
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
background-color: #fff;
}
.nodo-circulo:hover {
transform: translate(-50%, -55%) scale(1.05);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.nodo-contenido {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nodo-contenido img {
width: 70%;
height: 70%;
object-fit: contain;
}
.linea-base {
fill: none;
stroke-width: 1.5;
opacity: 0.5;
}
.linea-pulso {
fill: none;
stroke: #ffffff;
stroke-width: 6;
stroke-linecap: round;
stroke-dasharray: 0 2000;
opacity: 1;
}
/* ---------- Variables locales por unidad ---------- */
.ecosistema-section {
--unit: var(--ide-primary);
@@ -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;
}