/*====================================================
TRANSFORMACIÓN
====================================================*/

.transformation{

padding:170px 0;

background:#f8fbff;

}

.transform-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

margin-top:90px;

}

.feature{

display:flex;

gap:25px;

padding:28px;

margin-bottom:28px;

background:white;

border-radius:22px;

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

transition:.35s;

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

}

.feature:hover{

transform:translateX(12px);

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

border-color:#1565ff;

}

.feature-number{

width:70px;

height:70px;

border-radius:18px;

background:linear-gradient(135deg,#1565ff,#0d49d4);

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

font-weight:800;

flex-shrink:0;

}

.feature h3{

font-size:26px;

margin-bottom:10px;

color:var(--secondary);

}

.feature p{

font-size:17px;

color:var(--text-soft);

line-height:1.8;

}

.transform-right{

display:flex;

justify-content:center;

}

.transform-right img{

width:100%;

max-width:700px;

border-radius:22px;

box-shadow:0 35px 80px rgba(0,0,0,.18);

transition:.45s;

}

.transform-right img:hover{

transform:translateY(-10px) scale(1.02);

}

@media(max-width:1100px){

.transform-grid{

grid-template-columns:1fr;

}

}