/* ============================================================
 * En5cronia · logo5 — logo vectorial con el 5 héroe
 * El 5: trazo fluido y orgánico, degradado violeta→dorado,
 * giro 3D (flip tipo moneda) al cargar, al tocar y cada 8 s.
 * ============================================================ */
.e5logo{display:inline-flex;align-items:center;gap:.16em;font-weight:900;line-height:1;letter-spacing:.5px;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.brand .e5logo{font-size:1.28rem}
.e5logo .e5-txt{color:inherit!important}
.e5-five{display:inline-flex;align-items:center;justify-content:center;perspective:700px;position:relative}
.e5-five-svg{display:block;height:1.44em;width:auto;overflow:visible;transform-style:preserve-3d;filter:drop-shadow(0 3px 12px rgba(6,182,212,.55))}
/* (a) Vuelta de moneda premium: acelera, cruza de canto con brillo,
   desacelera y se asienta con micro-escala y pulso de resplandor */
.e5-five.flip .e5-five-svg{animation:e5coin 1.05s cubic-bezier(.3,.55,.25,1)}
@keyframes e5coin{
  0%{transform:rotateY(0deg) scale(1);filter:drop-shadow(0 3px 12px rgba(6,182,212,.55)) brightness(1)}
  30%{transform:rotateY(140deg) scale(1.05);filter:drop-shadow(0 4px 16px rgba(6,182,212,.7)) brightness(1.12)}
  50%{transform:rotateY(205deg) scale(1.1);filter:drop-shadow(0 5px 22px rgba(45,212,191,.85)) brightness(1.28)}
  76%{transform:rotateY(328deg) scale(1.03);filter:drop-shadow(0 4px 16px rgba(6,182,212,.7)) brightness(1.1)}
  88%{transform:rotateY(360deg) scale(.965);filter:drop-shadow(0 6px 30px rgba(6,182,212,.95)) brightness(1.22)}
  94%{transform:rotateY(360deg) scale(1.018);filter:drop-shadow(0 5px 20px rgba(6,182,212,.75)) brightness(1.08)}
  100%{transform:rotateY(360deg) scale(1);filter:drop-shadow(0 3px 12px rgba(6,182,212,.55)) brightness(1)}
}
/* (b)+(c) Giros en el plano: a favor y en contra, con asentamiento elástico */
.e5-five.spin-cw .e5-five-svg{animation:e5spinz 1s cubic-bezier(.25,.7,.3,1)}
.e5-five.spin-ccw .e5-five-svg{animation:e5spinzr 1s cubic-bezier(.25,.7,.3,1)}
@keyframes e5spinz{
  0%{transform:rotate(0deg) scale(1);filter:drop-shadow(0 3px 12px rgba(6,182,212,.55)) brightness(1)}
  42%{transform:rotate(298deg) scale(1.07);filter:drop-shadow(0 5px 22px rgba(45,212,191,.85)) brightness(1.24)}
  68%{transform:rotate(352deg) scale(1.03);filter:drop-shadow(0 4px 16px rgba(6,182,212,.7)) brightness(1.1)}
  84%{transform:rotate(360deg) scale(.962);filter:drop-shadow(0 6px 30px rgba(6,182,212,.95)) brightness(1.2)}
  92%{transform:rotate(360deg) scale(1.016);filter:drop-shadow(0 5px 20px rgba(6,182,212,.75)) brightness(1.07)}
  100%{transform:rotate(360deg) scale(1);filter:drop-shadow(0 3px 12px rgba(6,182,212,.55)) brightness(1)}
}
@keyframes e5spinzr{
  0%{transform:rotate(0deg) scale(1);filter:drop-shadow(0 3px 12px rgba(6,182,212,.55)) brightness(1)}
  42%{transform:rotate(-298deg) scale(1.07);filter:drop-shadow(0 5px 22px rgba(45,212,191,.85)) brightness(1.24)}
  68%{transform:rotate(-352deg) scale(1.03);filter:drop-shadow(0 4px 16px rgba(6,182,212,.7)) brightness(1.1)}
  84%{transform:rotate(-360deg) scale(.962);filter:drop-shadow(0 6px 30px rgba(6,182,212,.95)) brightness(1.2)}
  92%{transform:rotate(-360deg) scale(1.016);filter:drop-shadow(0 5px 20px rgba(6,182,212,.75)) brightness(1.07)}
  100%{transform:rotate(-360deg) scale(1);filter:drop-shadow(0 3px 12px rgba(6,182,212,.55)) brightness(1)}
}
/* Destello de luz que cruza el 5 mientras se mueve */
.e5-five::after{content:"";position:absolute;inset:-6% -14%;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.95) 50%,transparent 68%);background-size:260% 100%;background-position:135% 0;mix-blend-mode:screen;border-radius:50%}
.e5-five.flip::after,.e5-five.spin-cw::after,.e5-five.spin-ccw::after{animation:e5sheen 1.05s ease-out}
@keyframes e5sheen{0%{opacity:0;background-position:135% 0}30%{opacity:.85}62%{opacity:.85}100%{opacity:0;background-position:-35% 0}}
/* Versión héroe (portada): grande, con anillo orbital de sincronía */
.e5logo--hero{font-size:clamp(2.4rem,7.5vw,3.6rem);flex-direction:row;margin:6px auto 26px;filter:drop-shadow(0 6px 30px rgba(6,182,212,.4))}
.e5logo--hero .e5-five-svg{height:1.5em}
.e5hero-ring{position:absolute;left:50%;top:50%;width:2.7em;height:2.7em;margin:-1.35em 0 0 -1.35em;border:2px solid rgba(6,182,212,.55);border-radius:50%;pointer-events:none;animation:e5orbit 44s linear infinite}
.e5hero-ring.e5-rev{animation-direction:reverse}
.e5hero-ring::after{content:"";position:absolute;left:50%;top:-7px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe9a8,#D4AF37);box-shadow:0 0 12px rgba(212,175,55,.9)}
@keyframes e5orbit{to{transform:rotate(360deg)}}
/* Versión mini (pie de página): solo el glifo */
.e5logo--mini .e5-five-svg{height:42px}
.hero-logo{margin-bottom:26px}

/* ===== Franja del ecosistema en movimiento ===== */
.eco-ticker{background:#efeafd;border-top:1px solid rgba(139,92,246,.25);border-bottom:1px solid rgba(139,92,246,.25);overflow:hidden;padding:13px 0;position:relative;z-index:2}
.eco-ticker-track{display:flex;width:max-content;animation:e5tick 32s linear infinite}
.eco-ticker:hover .eco-ticker-track{animation-play-state:paused}
.eco-ticker-track span{white-space:nowrap;padding:0 6px 0 24px;font-weight:800;color:#4c1d95;font-size:.95rem;letter-spacing:1.5px}
.eco-ticker-track span i{color:#8B5CF6;font-style:normal;padding-left:18px}
@keyframes e5tick{to{transform:translateX(-50%)}}

/* ===== Banda de cifras animadas ===== */
.stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:34px auto 46px;max-width:900px}
.stat{background:#fff;border:1px solid rgba(139,92,246,.3);border-radius:16px;padding:20px 12px;text-align:center;box-shadow:0 10px 30px rgba(124,58,237,.10)}
.stat-num{font-size:2.1rem;font-weight:900;color:#7C3AED;line-height:1.1}
.stat-suf{font-size:1.4rem;font-weight:900;color:#7C3AED}
.stat-lbl{display:block;font-size:.82rem;color:#5b5570;font-weight:600;margin-top:6px}
@media(max-width:640px){.stats-band{grid-template-columns:repeat(2,1fr)}}

/* ===== Onda de sincronía sobre los nodos ===== */
.sync-visual .node{animation:e5sync 3.8s ease-in-out infinite}
.sync-visual .node:nth-child(3){animation-delay:.5s}
.sync-visual .node:nth-child(5){animation-delay:1s}
.sync-visual .node:nth-child(7){animation-delay:1.5s}
.sync-visual .node:nth-child(9){animation-delay:2s}
.sync-visual .node:nth-child(11){animation-delay:2.5s}
@keyframes e5sync{0%,100%{box-shadow:0 0 0 rgba(139,92,246,0);transform:scale(1)}14%{box-shadow:0 0 28px rgba(139,92,246,.7);transform:scale(1.07)}28%{box-shadow:0 0 0 rgba(139,92,246,0);transform:scale(1)}}

/* ===== Entradas animadas al hacer scroll (complemento) ===== */
.e5-rv-init{opacity:0;transform:translateY(26px)}
.e5-rv-in{opacity:1!important;transform:none!important;transition:opacity .7s ease,transform .7s ease}

/* ===== Micro-interacciones ===== */
.cta,.plat-btn,.btn-ghost,.b-buy{transition:transform .15s ease,box-shadow .25s ease}
.cta:active,.plat-btn:active,.btn-ghost:active,.b-buy:active{transform:scale(.96)}
header.topbar{transition:box-shadow .3s ease}
header.topbar.e5-scrolled{box-shadow:0 10px 34px rgba(36,31,61,.25)!important}
.topnav a.e5-active{color:#7C3AED!important;box-shadow:inset 0 -3px 0 #7C3AED}

/* ===== Movimiento reducido: todo quieto ===== */
@media (prefers-reduced-motion:reduce){
  .e5-five.flip .e5-five-svg,.e5-five.spin-cw .e5-five-svg,.e5-five.spin-ccw .e5-five-svg,.eco-ticker-track,.sync-visual .node,.e5hero-ring{animation:none!important}
  .e5-five::after{animation:none!important;opacity:0!important}
  .e5-rv-init{opacity:1;transform:none}
  .e5logo{cursor:default}
}

/* ===== Puertas de decisión (home): el usuario elige su camino ===== */
.doors{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;width:100%;max-width:1150px;margin:30px auto 8px;text-align:left}
.door{background:#fff;border:1px solid rgba(139,92,246,.35);border-radius:20px;padding:26px 24px;box-shadow:0 12px 34px rgba(124,58,237,.12);display:flex;flex-direction:column;gap:10px;position:relative;transition:transform .25s,box-shadow .25s,border-color .25s}
.door:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(124,58,237,.22);border-color:#7C3AED}
.door:nth-child(1),.door:nth-child(2),.door:nth-child(3){grid-column:span 2}
.door:nth-child(4),.door:nth-child(5),.door:nth-child(6){grid-column:span 2}
.door-icon{font-size:2.3rem;line-height:1}
.door h3{font-size:1.16rem;color:#241f3d;line-height:1.3}
.door p{color:#5b5570;font-size:.95rem}
.door-dest{font-size:.78rem;letter-spacing:1px;text-transform:uppercase;color:#554E73;font-weight:700}
.door-dest b{color:#7C3AED}
.door-cta{margin-top:auto;display:inline-block;background:linear-gradient(135deg,#8B5CF6,#7C3AED);color:#fff!important;font-weight:800;padding:12px 22px;border-radius:999px;text-decoration:none;align-self:flex-start;box-shadow:0 6px 20px rgba(124,58,237,.35)}
.door-cta.stretched::after{content:"";position:absolute;inset:0;border-radius:20px}
.door-fork{background:#f1edfd;border:1px dashed rgba(124,58,237,.5);border-radius:12px;padding:12px 14px;font-size:.9rem;color:#454165;position:relative;z-index:2}
.door-fork span{display:block;font-weight:700;color:#4c1d95;margin-bottom:4px}
.door-fork .door-fork-note{font-weight:600;color:#5b5570;margin:4px 0 0}
.door-alt{color:#7C3AED!important;font-weight:800;text-decoration:none;position:relative;z-index:2}
.door-alt:hover{text-decoration:underline}
.t1-door{margin:26px auto 4px;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;background:rgba(255,255,255,.9);border:1px solid rgba(139,92,246,.35);border-radius:999px;padding:12px 14px 12px 26px;max-width:660px;box-shadow:0 10px 30px rgba(124,58,237,.12)}
.t1-door-q{font-weight:700;color:#241f3d}
.t1-door-btn{background:#241f3d;color:#fff;border:none;font-weight:800;padding:12px 24px;border-radius:999px;cursor:pointer;font-size:1rem;font-family:inherit;box-shadow:0 6px 20px rgba(36,31,61,.35);transition:transform .15s}
.t1-door-btn:active{transform:scale(.96)}
.hero-alt-links{margin-top:18px;font-size:.95rem}
.hero-alt-links a{color:#4c1d95;font-weight:700}
@media(max-width:900px){.doors{grid-template-columns:repeat(2,1fr)}.door:nth-child(1),.door:nth-child(2),.door:nth-child(3),.door:nth-child(4),.door:nth-child(5),.door:nth-child(6){grid-column:auto}}
@media(max-width:600px){.doors{grid-template-columns:1fr}.door:nth-child(5){grid-column:auto}.t1-door{border-radius:20px;padding:16px;text-align:center}.hero{padding-top:96px}.e5logo--hero{margin-bottom:14px}}

/* ===== Puerta 5: dos grupos (Informática SeiX / Negocio y legal) ===== */
.door-groups{display:flex;flex-direction:column;gap:12px;position:relative;z-index:2}
.door-group{background:#f8f6fe;border:1px solid rgba(139,92,246,.25);border-radius:12px;padding:12px 14px}
.door-group-t{display:block;font-weight:800;color:#241f3d;font-size:.95rem;margin-bottom:8px}
.door-chips{display:flex;flex-wrap:wrap;gap:6px}
.door-chips span{font-size:.76rem;font-weight:700;background:#fff;border:1px solid rgba(124,58,237,.4);color:#4c1d95;padding:4px 10px;border-radius:999px}
.door-group-note{display:block;font-size:.8rem;color:#5b5570;margin-top:8px}
.door-group .door-alt{display:inline-block;margin-top:8px}

/* ===== Puerta 5: grupos expandibles (detalle al tocar) ===== */
.door-group{position:relative}
.door-group summary{cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.door-group summary::-webkit-details-marker{display:none}
.door-group summary::after{content:"+";position:absolute;top:8px;right:14px;font-weight:900;color:#7C3AED;font-size:1.15rem}
.door-group[open ] summary::after{content:"–"}
.door-group-hint{display:block;font-size:.8rem;color:#554E73;font-weight:600;margin-top:2px}
.door-group .door-chips{margin-top:10px}
.door-group summary .door-group-t{margin-bottom:0}

/* ===== Puerta 2: pensum Gestor de Soluciones ===== */
.door-pensum{margin:10px 0 0;padding-left:1.35em;font-size:.92rem;color:#4a4468;line-height:1.7;font-weight:600}

/* ============================================================
 * COLOR DINÁMICO 20261014 — violeta eléctrico → fucsia
 * Primario con energía sobre la plataforma clara; el dorado
 * queda como chispa de marca (el 5 no se toca). Lavados de
 * degradado animados en el héroe y en las bandas, e identidad
 * de color propia para cada puerta de decisión.
 * ============================================================ */
:root{--en5v:#7C3AED;--en5f:#D946EF;--en5ft:#A21CAF;--en5grad:linear-gradient(135deg,#7C3AED 0%,#9333EA 55%,#D946EF 100%)}

/* Botones principales: degradado eléctrico, sólidos y con contraste */
.cta,.plat-btn,.en5-submit{background:var(--en5grad)!important;color:#fff!important}
.svc-actions .b-buy{background:var(--en5grad)}
@keyframes ctaglow{0%,100%{box-shadow:0 4px 24px rgba(168,85,247,.45)}50%{box-shadow:0 4px 44px rgba(217,70,239,.7)}}

/* Titulares con degradado violeta → fucsia */
.hero h1 .gold,.sec-title .gold{background:linear-gradient(115deg,#7C3AED 10%,#D946EF 90%);-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:none;filter:drop-shadow(0 3px 14px rgba(217,70,239,.30))}
.hero p.lead .gold{background:linear-gradient(115deg,#7C3AED,#D946EF);-webkit-background-clip:text;background-clip:text;color:transparent!important}

/* Héroe: lavados de degradado suaves y ANIMADOS (violeta/fucsia/dorado) */
.hero{isolation:isolate}
.hero::before{content:"";position:absolute;inset:-18%;z-index:0;pointer-events:none;background:radial-gradient(42% 38% at 18% 22%,rgba(217,70,239,.20),transparent 70%),radial-gradient(36% 32% at 84% 16%,rgba(212,175,55,.16),transparent 70%),radial-gradient(55% 45% at 50% 108%,rgba(124,58,237,.20),transparent 72%),radial-gradient(30% 26% at 78% 82%,rgba(56,189,248,.10),transparent 70%);animation:e5wash 26s ease-in-out infinite alternate}
.hero>*:not(.hero-video){position:relative;z-index:1}
@keyframes e5wash{from{transform:translate3d(-2.5%,-1.5%,0) scale(1)}to{transform:translate3d(2.5%,2%,0) scale(1.09)}}

/* Banda del ecosistema: degradado en movimiento */
.eco-ticker{background:linear-gradient(90deg,#f1e8fd,#fdeffb,#fff6e0,#f1e8fd);background-size:220% 100%;animation:e5band 20s linear infinite}
.eco-ticker-track span i{color:#D946EF}
@keyframes e5band{to{background-position:220% 0}}

/* Cifras de la banda Sincronía con degradado */
.stat-num,.stat-suf{background:linear-gradient(120deg,#7C3AED,#D946EF);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Nodos de sincronía: resplandor fucsia */
@keyframes e5sync{0%,100%{box-shadow:0 0 0 rgba(217,70,239,0);transform:scale(1)}14%{box-shadow:0 0 28px rgba(217,70,239,.65);transform:scale(1.07)}28%{box-shadow:0 0 0 rgba(217,70,239,0);transform:scale(1)}}

/* ===== Identidad de color por puerta ===== */
.door{--acc1:#7C3AED;--acc2:#D946EF;--accT:#6D28D9}
.door:nth-child(1){--acc1:#F97316;--acc2:#F59E0B;--accT:#C2410C}
.door:nth-child(3){--acc1:#0D9488;--acc2:#2DD4BF;--accT:#0F766E}
.door:nth-child(4){--acc1:#E11D48;--acc2:#F43F5E;--accT:#BE123C}
.door:nth-child(5){--acc1:#2563EB;--acc2:#38BDF8;--accT:#1D4ED8}
.door:nth-child(6){--acc1:#0891B2;--acc2:#7C3AED;--accT:#0E7490}
.door::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;border-radius:20px 20px 0 0;background:linear-gradient(90deg,var(--acc1),var(--acc2));opacity:.5;transition:opacity .25s}
.door:hover::before{opacity:1}
.door-icon{display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:18px;background:#f4f1fe;background:color-mix(in srgb,var(--acc1) 12%,#fff);box-shadow:inset 0 0 0 1px rgba(139,92,246,.25);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc1) 32%,#fff);transition:transform .25s}
.door:hover .door-icon{transform:scale(1.07)}
.door-f{font-size:2.05rem;font-weight:900;line-height:1;background:linear-gradient(135deg,#06B6D4,#7C3AED);-webkit-background-clip:text;background-clip:text;color:transparent}
.door:hover{border-color:var(--acc1);box-shadow:0 20px 48px rgba(124,58,237,.20);box-shadow:0 20px 48px color-mix(in srgb,var(--acc1) 30%,transparent)}
.door-cta{background:linear-gradient(135deg,var(--acc1),var(--acc2));box-shadow:0 6px 20px rgba(124,58,237,.35);box-shadow:0 6px 20px color-mix(in srgb,var(--acc1) 42%,transparent)}
.door-dest b{color:var(--accT)}
.door-alt{color:var(--accT)!important}
.door-fork span{color:var(--accT)}
.door-group summary::after{color:var(--accT)}
.door .door-chips span{border-color:rgba(124,58,237,.4);border-color:color-mix(in srgb,var(--acc1) 45%,#fff);color:var(--accT)}

/* Movimiento reducido: lavados y banda quietos */
@media (prefers-reduced-motion:reduce){
  .hero::before,.eco-ticker{animation:none!important}
}

/* ============================================================
 * VIDA 20261014 — nueva familia protagonista AZUL ELÉCTRICO →
 * TURQUESA (más fresca y dinámica). El fucsia queda como acento
 * puntual; el dorado intacto como chispa de marca; el 5 conserva
 * su degradado violeta→dorado con halo azul-turquesa. Vida y
 * micro-movimiento en toda la página, sin oscurecer la plataforma.
 * ============================================================ */
:root{
  --en5b:#2563EB;--en5c:#06B6D4;--en5t:#2DD4BF;--en5deep:#1D4ED8;
  --en5grad:linear-gradient(120deg,#2563EB 0%,#0284C7 42%,#06B6D4 72%,#2DD4BF 105%);
  --en5gradtxt:linear-gradient(100deg,#2563EB 5%,#0891B2 52%,#14B8A6 98%);
}
html,body{overflow-x:clip}

/* Botones principales: degradado azul→turquesa con más cuerpo */
.cta,.plat-btn,.en5-submit{background:var(--en5grad)!important;background-size:170% 170%!important;background-position:0% 50%;color:#fff!important;box-shadow:0 8px 28px rgba(2,132,199,.45),inset 0 1px 0 rgba(255,255,255,.35)!important;transition:background-position .55s ease,transform .18s ease,box-shadow .3s ease}
.cta:hover,.plat-btn:hover,.en5-submit:hover{background-position:95% 50%}
.svc-actions .b-buy{background:var(--en5grad);background-size:170% 170%;background-position:0% 50%}
@keyframes ctaglow{0%,100%{box-shadow:0 6px 26px rgba(37,99,235,.45),inset 0 1px 0 rgba(255,255,255,.35)}50%{box-shadow:0 8px 46px rgba(6,182,212,.75),inset 0 1px 0 rgba(255,255,255,.35)}}

/* Titulares con degradado azul eléctrico → turquesa */
.hero h1 .gold,.sec-title .gold{background:var(--en5gradtxt);-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:none;filter:drop-shadow(0 3px 16px rgba(6,182,212,.38))}
.hero p.lead .gold{background:var(--en5gradtxt);-webkit-background-clip:text;background-clip:text;color:transparent!important}
/* Regla viva bajo cada titular de sección: respira en degradado */
.sec-title::after{content:"";display:block;width:76px;height:4px;border-radius:99px;margin:16px auto 2px;background:var(--en5grad);background-size:220% 100%;animation:e5rule 5.5s ease-in-out infinite;transform-origin:center}
@keyframes e5rule{0%,100%{background-position:0% 0;transform:scaleX(1);opacity:.85}50%{background-position:100% 0;transform:scaleX(1.18);opacity:1}}

/* Kicker y distintivo en vivo: marco azul, punto fucsia (acento) */
.kicker{color:var(--en5deep);border-color:rgba(6,182,212,.6);background:rgba(255,255,255,.65);box-shadow:0 0 0 0 rgba(6,182,212,.35);animation:e5kick 3.2s ease-in-out infinite}
@keyframes e5kick{0%,100%{box-shadow:0 0 0 0 rgba(6,182,212,.32)}55%{box-shadow:0 0 0 9px rgba(6,182,212,0)}}
.live-badge{color:var(--en5deep);border-color:rgba(6,182,212,.65);background:rgba(255,255,255,.7)}
.live-dot{background:#D946EF;box-shadow:0 0 12px rgba(217,70,239,.8)}

/* Héroe: lavados con más saturación y presencia */
.hero::before{background:radial-gradient(42% 38% at 16% 20%,rgba(37,99,235,.30),transparent 70%),radial-gradient(38% 34% at 85% 14%,rgba(45,212,191,.30),transparent 70%),radial-gradient(55% 46% at 50% 110%,rgba(6,182,212,.30),transparent 72%),radial-gradient(28% 24% at 80% 84%,rgba(212,175,55,.20),transparent 70%)}

/* Banda del ecosistema: degradado azul fluyendo; separadores fucsia */
.eco-ticker{background:linear-gradient(90deg,#dbeafe,#cffafe,#ccfbf1,#e0f2fe,#dbeafe);background-size:220% 100%;animation:e5band 18s linear infinite;border-top:1px solid rgba(6,182,212,.4);border-bottom:1px solid rgba(6,182,212,.4)}
.eco-ticker-track span{color:#1E40AF}
.eco-ticker-track span i{color:#D946EF}

/* Cifras Sincronía en degradado nuevo y tarjetas que respiran */
.stat-num,.stat-suf{background:linear-gradient(120deg,#2563EB,#06B6D4,#14B8A6);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat{border-color:rgba(6,182,212,.45);animation:e5breathe 4.6s ease-in-out infinite}
.stat:nth-child(2){animation-delay:.7s}.stat:nth-child(3){animation-delay:1.4s}.stat:nth-child(4){animation-delay:2.1s}
@keyframes e5breathe{0%,100%{box-shadow:0 10px 30px rgba(2,132,199,.13)}50%{box-shadow:0 14px 42px rgba(6,182,212,.30)}}

/* Nodos de sincronía: resplandor turquesa, nodo central en degradado */
@keyframes e5sync{0%,100%{box-shadow:0 0 0 rgba(6,182,212,0);transform:scale(1)}14%{box-shadow:0 0 30px rgba(6,182,212,.75);transform:scale(1.07)}28%{box-shadow:0 0 0 rgba(6,182,212,0);transform:scale(1)}}
.node.gold{background:var(--en5grad);color:#fff;box-shadow:0 8px 30px rgba(2,132,199,.45)}
.arrow{color:#0891B2}

/* ===== Bandas vivas entre secciones (degradado en movimiento) ===== */
#sincronia,#oportunidades,#ecosistema,.video-sec,.contact{position:relative;isolation:isolate}
#sincronia::before,#oportunidades::before,#ecosistema::before,.video-sec::before,.contact::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;background-size:230% 230%;animation:e5bandmove 24s ease-in-out infinite alternate}
#sincronia::before{background-image:linear-gradient(115deg,rgba(37,99,235,.13),rgba(6,182,212,.16),rgba(45,212,191,.10),rgba(37,99,235,.13))}
#oportunidades::before{background-image:linear-gradient(115deg,rgba(45,212,191,.14),rgba(6,182,212,.13),rgba(37,99,235,.11),rgba(45,212,191,.14));animation-delay:-8s}
.video-sec::before{background-image:linear-gradient(115deg,rgba(6,182,212,.12),rgba(56,189,248,.14),rgba(45,212,191,.12),rgba(6,182,212,.12));animation-delay:-4s}
#ecosistema::before{background-image:linear-gradient(115deg,rgba(37,99,235,.12),rgba(212,175,55,.10),rgba(6,182,212,.15),rgba(37,99,235,.12));animation-delay:-14s}
.contact::before{background-image:linear-gradient(115deg,rgba(6,182,212,.15),rgba(37,99,235,.13),rgba(45,212,191,.13),rgba(6,182,212,.15));animation-delay:-18s}
@keyframes e5bandmove{from{background-position:0% 40%}to{background-position:100% 60%}}
/* Línea de degradado vivo sobre cada banda */
#sincronia::after,#oportunidades::after,#ecosistema::after,.video-sec::after,.contact::after{content:"";position:absolute;top:0;left:50%;width:100vw;transform:translateX(-50%);height:3px;background:var(--en5grad);background-size:220% 100%;animation:e5rule 7s linear infinite;opacity:.75;pointer-events:none}

/* Tarjetas y plataformas: bordes y resplandores de la familia nueva */
.card:hover{box-shadow:0 16px 44px rgba(2,132,199,.22)}
.card .icon{transition:transform .25s ease}
.card:hover .icon{transform:translateY(-3px) scale(1.1)}
.platform{border-color:rgba(6,182,212,.4)}
.platform:hover,.platform.active{border-color:#06B6D4;box-shadow:0 22px 60px rgba(2,132,199,.28)}
.plat-glow{animation:e5glowpulse 3.8s ease-in-out infinite}
@keyframes e5glowpulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.95;transform:scale(1.12)}}
.dvm-banner{border-color:rgba(6,182,212,.55);box-shadow:0 16px 44px rgba(2,132,199,.16)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(6,182,212,.28);outline:none}
.topnav a.e5-active{color:var(--en5deep)!important;box-shadow:inset 0 -3px 0 #06B6D4}

/* ===== Puertas rearmonizadas a la familia azul–turquesa =====
   Cada puerta conserva su color propio y distinguible; el
   conjunto se lee de la nueva paleta (dorado y fucsia = acentos). */
.door:nth-child(1){--acc1:#D97706;--acc2:#F59E0B;--accT:#B45309}
.door:nth-child(2){--acc1:#2563EB;--acc2:#2DD4BF;--accT:#1D4ED8}
.door:nth-child(3){--acc1:#0D9488;--acc2:#2DD4BF;--accT:#0F766E}
.door:nth-child(4){--acc1:#DB2777;--acc2:#F472B6;--accT:#BE185D}
.door:nth-child(5){--acc1:#0369A1;--acc2:#38BDF8;--accT:#075985}
.door::before{opacity:.85}
.door{border-color:rgba(6,182,212,.35);border-color:color-mix(in srgb,var(--acc1) 38%,#fff);box-shadow:0 14px 38px rgba(2,132,199,.13);box-shadow:0 14px 38px color-mix(in srgb,var(--acc1) 17%,transparent)}
.door:hover .door-icon{animation:e5floaty 1.7s ease-in-out infinite}
@keyframes e5floaty{0%,100%{transform:translateY(0) rotate(0deg) scale(1.06)}50%{transform:translateY(-4px) rotate(2.5deg) scale(1.1)}}

/* Entradas al scroll con rebote suave y bloques que se abren con vida */
.e5-rv-in{transition:opacity .65s ease,transform .65s cubic-bezier(.34,1.45,.5,1)!important}
.door-group[open ] .door-chips,.door-group[open ] .door-pensum{animation:e5pop .38s cubic-bezier(.34,1.5,.5,1)}
@keyframes e5pop{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.door-group summary{transition:color .2s}
.door-group summary:hover .door-group-t{color:var(--accT)}

/* Movimiento reducido: todo quieto, sin destellos ni derivas */
@media (prefers-reduced-motion:reduce){
  .kicker,.stat,.plat-glow,.sec-title::after,#sincronia::before,#oportunidades::before,#ecosistema::before,.video-sec::before,.contact::before,#sincronia::after,#oportunidades::after,#ecosistema::after,.video-sec::after,.contact::after,.door:hover .door-icon,.door-group[open ] .door-chips,.door-group[open ] .door-pensum{animation:none!important}
  .e5-rv-in{transition:none!important}
}

/* ============================================================
 * ROJO TRANSLÚCIDO 20261014 — calor de marca sobre el blanco:
 * veladuras y resplandores rojos translúcidos sobre el héroe y
 * los tramos claros, mezclados con
 * el azul→turquesa. No tapa texto ni tarjetas, no vuelve la
 * página rosa ni dominante roja. Los resplandores se mueven con
 * las derivas lentas ya existentes (e5wash / e5bandmove), que se
 * detienen con prefers-reduced-motion.
 * INTENSIFICADO (Jhonn, 08:59: «más intenso el rojo
 * transparente»): héroe .34/.27 con radios mayores, bandas
 * .21–.25, calor interior .15–.18, halos proporcionales.
 * ============================================================ */
/* Héroe: dos resplandores rojos dentro de la pila de lavados */
.hero::before{background:
  radial-gradient(54% 46% at 74% 26%,rgba(230,57,70,.34),transparent 72%),
  radial-gradient(42% 36% at 20% 78%,rgba(230,57,70,.27),transparent 72%),
  radial-gradient(48% 28% at 52% 97%,rgba(230,57,70,.20),transparent 72%),
  radial-gradient(42% 38% at 16% 20%,rgba(37,99,235,.30),transparent 70%),
  radial-gradient(38% 34% at 85% 14%,rgba(45,212,191,.30),transparent 70%),
  radial-gradient(55% 46% at 50% 110%,rgba(6,182,212,.30),transparent 72%),
  radial-gradient(28% 24% at 80% 84%,rgba(212,175,55,.20),transparent 70%)}
/* Bandas claras entre secciones: un resplandor rojo por tramo */
#sincronia::before{background-image:radial-gradient(46% 64% at 84% 16%,rgba(230,57,70,.24),transparent 72%),linear-gradient(115deg,rgba(37,99,235,.13),rgba(6,182,212,.16),rgba(45,212,191,.10),rgba(37,99,235,.13))}
#oportunidades::before{background-image:radial-gradient(44% 62% at 10% 82%,rgba(230,57,70,.21),transparent 72%),linear-gradient(115deg,rgba(45,212,191,.14),rgba(6,182,212,.13),rgba(37,99,235,.11),rgba(45,212,191,.14))}
.video-sec::before{background-image:radial-gradient(44% 62% at 88% 80%,rgba(230,57,70,.22),transparent 72%),linear-gradient(115deg,rgba(6,182,212,.12),rgba(56,189,248,.14),rgba(45,212,191,.12),rgba(6,182,212,.12))}
#ecosistema::before{background-image:radial-gradient(46% 64% at 12% 14%,rgba(230,57,70,.22),transparent 72%),linear-gradient(115deg,rgba(37,99,235,.12),rgba(212,175,55,.10),rgba(6,182,212,.15),rgba(37,99,235,.12))}
.contact::before{background-image:radial-gradient(46% 64% at 80% 20%,rgba(230,57,70,.25),transparent 72%),linear-gradient(115deg,rgba(6,182,212,.15),rgba(37,99,235,.13),rgba(45,212,191,.13),rgba(6,182,212,.15))}
/* Franja del ecosistema: un paso cálido dentro del flujo azul */
.eco-ticker{background:linear-gradient(90deg,#dbeafe,#ffe3e6,#cffafe,#ccfbf1,#e0f2fe,#dbeafe);background-size:220% 100%}
/* Blancos de tarjetas y puertas: calor interior apenas presente */
.door{background-image:radial-gradient(120% 62% at 100% 0%,rgba(230,57,70,.17),transparent 55%)}
.card{box-shadow:0 10px 30px rgba(2,132,199,.12),inset 0 0 56px rgba(230,57,70,.17)}
.node{box-shadow:0 4px 18px rgba(230,57,70,.15)}
/* Halos rojos transparentes en elementos clave */
.live-badge{box-shadow:0 0 0 5px rgba(230,57,70,.16)}
.t1-door{box-shadow:0 10px 30px rgba(2,132,199,.14),0 0 0 1px rgba(230,57,70,.18)}
footer{box-shadow:inset 0 70px 60px -50px rgba(230,57,70,.26)}
@keyframes ctaglow{0%,100%{box-shadow:0 6px 26px rgba(37,99,235,.45),inset 0 1px 0 rgba(255,255,255,.35)}50%{box-shadow:0 8px 46px rgba(6,182,212,.72),0 0 30px rgba(230,57,70,.42),inset 0 1px 0 rgba(255,255,255,.35)}}

/* ============================================================
 * ANCHO AMPLIO 20261014 (Jhonn, 09:01: «que no se vea un espacio
 * a los lados: expande más la información y deja un solo y
 * estrecho espacio a los lados»). En pantallas grandes los
 * contenedores principales (secciones con sus bandas y lavados,
 * parrilla de puertas, contenedores .wrap) aprovechan casi todo
 * el ancho: un único margen estrecho por lado (~3%: 32–48 px en
 * 1920). Los textos conservan su medida legible (.lead, .sec-sub,
 * .faq, .article no se tocan): se ensanchan contenedores, tarjetas
 * y bloques, no las líneas de párrafo. Tableta y móvil intactos.
 * ============================================================ */
@media (min-width:1400px){
  section{max-width:96.5vw!important}
  .doors{max-width:100%}
  .stats-band{max-width:1240px}
  .video-wrap{max-width:960px}
  .wrap{max-width:96.5vw}
}

/* ============================================================
 * DINÁMICO 20261014 (Jhonn, 09:07: «que sea dinámico… coloca
 * un poco de color en transparente según el color que tiene en
 * sus botones… hazlas dinámicas, que se muevan esos cuadros»):
 * 1) Cada puerta lleva una veladura translúcida de SU color de
 *    botón (sus --acc1/--acc2, los mismos del degradado de su
 *    .door-cta): más presente arriba y en los bordes, con una
 *    deriva lenta de la luz. Los bloques interiores (grupo y
 *    bifurcación) heredan un toque del mismo tinte. Se conserva
 *    el calor rojo de marca en la esquina superior (capa 3).
 * 2) Las tarjetas FLOTAN de verdad: suben y bajan con balanceo
 *    mínimo y la sombra respirando a la par, cada una con su
 *    ciclo (6,3–7,9 s) y su fase (nunca suben todas a la vez).
 *    Se anima la propiedad `translate` (no `transform`) para
 *    no chocar con el reveal (.e5-rv-in fija transform:none
 *    !important) ni con la elevación del hover, con la que se
 *    compone. Al cursor, la tarjeta se aquieta (sin animación)
 *    y se eleva como siempre.
 * 3) Las .card del sistema (secciones y páginas internas que
 *    comparten clases) reciben la misma flotación, más suave.
 * Todo el movimiento se detiene con prefers-reduced-motion.
 * ============================================================ */
.door{--t1:rgba(37,99,235,.12);--t2:rgba(45,212,191,.18)}
.door:nth-child(1){--t1:rgba(217,119,6,.14);--t2:rgba(245,158,11,.21)}
.door:nth-child(2){--t1:rgba(37,99,235,.13);--t2:rgba(45,212,191,.20)}
.door:nth-child(3){--t1:rgba(13,148,136,.13);--t2:rgba(45,212,191,.20)}
.door:nth-child(4){--t1:rgba(219,39,119,.13);--t2:rgba(244,114,182,.21)}
.door:nth-child(5){--t1:rgba(3,105,161,.13);--t2:rgba(56,189,248,.21)}
.door{background-image:
  radial-gradient(135% 80% at 50% -12%,var(--t2),transparent 62%),
  linear-gradient(180deg,var(--t1),transparent 78%),
  radial-gradient(120% 62% at 100% 0%,rgba(230,57,70,.17),transparent 55%);
  background-size:170% 150%,100% 100%,100% 100%;
  animation:e5doorfloat 6.8s ease-in-out -2.1s infinite alternate,e5tintdrift 11s ease-in-out -4s infinite alternate;
  transition:transform .25s,box-shadow .25s,border-color .25s,translate .3s ease}
.door:nth-child(1){animation-duration:7.4s,11s;animation-delay:-.6s,-3s}
.door:nth-child(2){animation-duration:6.3s,12.5s;animation-delay:-2.9s,-7s}
.door:nth-child(3){animation-duration:7.9s,10.4s;animation-delay:-4.4s,-1.5s}
.door:nth-child(4){animation-duration:6.6s,11.8s;animation-delay:-1.7s,-5.5s}
.door:nth-child(5){animation-duration:7.2s,10.8s;animation-delay:-3.6s,-8.5s}
@keyframes e5doorfloat{
  from{translate:0 3px;rotate:-.22deg;box-shadow:0 10px 28px rgba(36,31,61,.10);box-shadow:0 10px 28px color-mix(in srgb,var(--acc1) 14%,transparent)}
  to{translate:0 -4px;rotate:.22deg;box-shadow:0 24px 50px rgba(36,31,61,.12);box-shadow:0 24px 50px color-mix(in srgb,var(--acc1) 28%,transparent)}}
@keyframes e5tintdrift{from{background-position:50% 0%,0 0,0 0}to{background-position:50% 100%,0 0,0 0}}
.door:hover{animation:none}
/* Los bloques interiores heredan el tinte de su puerta */
.door-group{background:#f8f6fe;background:color-mix(in srgb,var(--acc1) 7%,#fff)}
.door-fork{background:#f1edfd;background:color-mix(in srgb,var(--acc1) 9%,#fff)}
/* Tarjetas del sistema: misma flotación, más suave */
.card{animation:e5cardfloat 9s ease-in-out -2s infinite alternate}
.card:nth-child(2n){animation-duration:10.6s;animation-delay:-4.5s}
.card:nth-child(3n){animation-duration:8.3s;animation-delay:-6.2s}
.card:hover{animation-play-state:paused}
@keyframes e5cardfloat{from{translate:0 2px}to{translate:0 -3px}}
/* Movimiento reducido: cuadros quietos, sin deriva ni flotación */
@media (prefers-reduced-motion:reduce){
  .door,.card{animation:none!important}
}