/*=========================================================
 POLITECH PANEL360
 ECOSISTEMA
=========================================================*/

.ecosystem{

padding:150px 0;

background:linear-gradient(
180deg,
#ffffff 0%,
#f4f7fb 100%);

position:relative;

overflow:hidden;

}


/*=============================
LAYOUT
=============================*/

.ecosystem-wrapper{

margin-top:90px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

align-items:center;

}


/*=============================
MÓDULOS
=============================*/

.module{

background:#fff;

border:1px solid var(--border);

border-radius:22px;

padding:35px;

box-shadow:var(--shadow-sm);

transition:.35s;

position:relative;

overflow:hidden;

cursor:default;

min-height:230px;

display:flex;

flex-direction:column;

justify-content:flex-start;

}


.module::before{

content:"";

position:absolute;

left:0;

top:0;

width:4px;

height:100%;

background:linear-gradient(
180deg,
var(--primary),
#6ba8ff);

opacity:0;

transition:.35s;

}


.module:hover{

transform:
translateY(-12px)
scale(1.03);

border-color:#7aaeff;

box-shadow:
0 25px 60px rgba(21,101,255,.18);

}

.module::after{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle at center,

rgba(21,101,255,.06),

transparent 70%);

opacity:0;

transition:.35s;

}

.module:hover::after{

opacity:1;

}


.module:hover::before{

opacity:1;

}


.module-icon{

width:72px;

height:72px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

background:#eef5ff;

margin-bottom:25px;

}


.module h3{

font-size:26px;

margin-bottom:15px;

color:var(--secondary);

}


.module p{

font-size:17px;

color:var(--text-soft);

line-height:1.7;

}


/*=============================
IA CENTRAL
=============================*/

.center-core{

background:linear-gradient(
145deg,
#1565ff,
#0b46ca);

border-radius:30px;

padding:55px 35px;

color:white;

text-align:center;

box-shadow:0 30px 70px rgba(21,101,255,.35);

position:relative;

overflow:hidden;

}


.center-core::before{

content:"";

position:absolute;

width:350px;

height:350px;

background:rgba(255,255,255,.08);

border-radius:50%;

top:-150px;

right:-120px;

}


.center-core img{

width:90px;

margin-bottom:25px;

}


.center-core h3{

font-size:34px;

margin-bottom:20px;

font-weight:800;

}


.center-core p{

font-size:18px;

line-height:1.8;

opacity:.95;

}


/*=============================
HOVER
=============================*/

.center-core{

transition:.45s;

}

.center-core:hover{

transform:translateY(-10px);

}


/*=============================
RESPONSIVE
=============================*/

@media(max-width:1100px){

.ecosystem-wrapper{

grid-template-columns:repeat(2,1fr);

}

.center-core{

grid-column:span 2;

}

}


@media(max-width:780px){

.ecosystem{

padding:90px 0;

}

.ecosystem-wrapper{

grid-template-columns:1fr;

}

.center-core{

grid-column:auto;

}

.module{

min-height:auto;

}

}

/*=========================================================
DASHBOARD CENTRAL
=========================================================*/

.dashboard-screen{

background:#ffffff;

border-radius:18px;

padding:12px;

margin-bottom:30px;

box-shadow:

0 20px 45px rgba(0,0,0,.18);

overflow:hidden;

animation:dashboardPulse 5s ease infinite;

}

.dashboard-screen img{

width:100%;

display:block;

border-radius:10px;

}

.ia-core{

padding-top:10px;

}

.ia-core img{

width:72px;

margin-bottom:18px;

}

.ia-core h3{

font-size:30px;

margin-bottom:15px;

}

.ia-core p{

font-size:17px;

line-height:1.7;

opacity:.95;

}

/*=========================================================
RED DEL ECOSISTEMA
=========================================================*/

.ecosystem-wrapper{

position:relative;

}

.ecosystem-network{

position:absolute;

inset:0;

pointer-events:none;

z-index:0;

}

.network-svg{

width:100%;

height:100%;

position:absolute;

left:0;

top:0;

overflow:visible;

}

.network-svg line{

stroke:#8ab7ff;

stroke-width:2.2;

stroke-linecap:round;

stroke-dasharray:12 8;

opacity:.45;

animation:networkMove 10s linear infinite;

}

@keyframes networkMove{

from{

stroke-dashoffset:0;

}

to{

stroke-dashoffset:-300;

}

}


/*=============================
LOS MÓDULOS SOBRE EL SVG
=============================*/

.module{

position:relative;

z-index:3;

}

.center-core{

position:relative;

z-index:5;

}

@keyframes dashboardPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.015);

}

100%{

transform:scale(1);

}

}

/*=====================================================
MÓDULOS RELACIONADOS
=====================================================*/

.module.linked{

transform:translateY(-10px);

border-color:#1565ff;

box-shadow:

0 20px 60px rgba(21,101,255,.28);

}

.module.linked .module-icon{

background:#1565ff;

color:white;

transform:scale(1.08);

}