/*=====================================================
CICLO ESTRATÉGICO
=====================================================*/

.cycle-section{

padding:170px 0;

background:white;

position:relative;

overflow:hidden;

}

.cycle-wrapper{

width:900px;

height:900px;

margin:auto;

position:relative;

}

.cycle-center{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:270px;

height:270px;

border-radius:50%;

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

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

color:white;

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

z-index:10;

}

.cycle-center img{

width:85px;

margin-bottom:20px;

}

.cycle-center h3{

font-size:34px;

margin-bottom:12px;

}

.cycle-center p{

width:70%;

text-align:center;

line-height:1.6;

}

.step{

position:absolute;

width:190px;

background:white;

padding:25px;

border-radius:22px;

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

text-align:center;

transition:.35s;

}

.step:hover{

transform:scale(1.05);

}

.number{

width:48px;

height:48px;

border-radius:50%;

background:#1565ff;

color:white;

display:flex;

justify-content:center;

align-items:center;

font-weight:700;

margin:auto auto 20px;

}

.s1{top:10px;left:355px;}
.s2{top:170px;right:40px;}
.s3{bottom:170px;right:40px;}
.s4{bottom:10px;left:355px;}
.s5{bottom:170px;left:40px;}

.cycle-svg{

position:absolute;

inset:0;

width:100%;

height:100%;

z-index:1;

}

.cycle-line{

fill:none;

stroke:#d8e7ff;

stroke-width:3;

stroke-dasharray:16;

animation:rotateDash 18s linear infinite;

}

@keyframes rotateDash{

to{

stroke-dashoffset:-500;

}

}

@media(max-width:980px){

.cycle-wrapper{

transform:scale(.72);

transform-origin:top center;

height:680px;

}

}

@media(max-width:680px){

/* =====================================================
   CICLO EN CELULAR — VERSION VERTICAL
   Antes esto era `display:none` y la seccion quedaba con el
   titulo, la bajada y un hueco blanco enorme. El circulo mide
   900x900 fijos y no achica, asi que en celular se desarma:
   los pasos dejan de estar posicionados en absoluto y se
   apilan en columna. El SVG del circulo se oculta.
   El JS de cycle.js sigue funcionando: recorre `.step` igual.
===================================================== */

.cycle-section{

padding:90px 0;

}

.cycle-wrapper{

display:flex;

flex-direction:column;

align-items:center;

gap:16px;

width:100%;

height:auto;

transform:none;

}

.cycle-center{

position:static;

transform:none;

width:100%;

max-width:300px;

height:auto;

padding:38px 26px;

border-radius:26px;

margin-bottom:14px;

}

.cycle-center img{

width:62px;

margin-bottom:14px;

}

.cycle-center h3{

font-size:26px;

margin-bottom:8px;

}

.cycle-center p{

width:100%;

font-size:15px;

}

.step{

position:static;

width:100%;

max-width:340px;

padding:22px 24px;

}

/* Las coordenadas fijas no aplican con position:static,
   pero se anulan igual para que no reaparezcan si alguien
   toca el position mas adelante. */

.s1,.s2,.s3,.s4,.s5{

top:auto;

right:auto;

bottom:auto;

left:auto;

}

.number{

width:40px;

height:40px;

margin-bottom:14px;

}

.cycle-svg{

display:none;

}

/* El zoom del paso activo se achica: en una columna angosta
   un 1.08 desborda el ancho de la pantalla. */

.step.active-step{

transform:scale(1.03);

}

}

/*=====================================================
STEP ACTIVO
=====================================================*/

.step{

border:1px solid transparent;

}

.step.active-step{

transform:scale(1.08);

border-color:#1565ff;

box-shadow:

0 25px 60px rgba(21,101,255,.30);

}

.step.active-step .number{

background:#0d49d4;

box-shadow:

0 0 25px rgba(21,101,255,.45);

}

.step.active-step h4{

color:#1565ff;

}

.step.active-step::before{

content:"";

position:absolute;

inset:0;

border-radius:22px;

background:

linear-gradient(

135deg,

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

transparent);

pointer-events:none;

}