/* FASE 4 · Cronograma
   Archivo aislado para no modificar estilos de las fases 1, 2 ni 3. */
.phase4-cronograma{
  padding:clamp(76px,8vw,116px) 0 clamp(92px,10vw,136px);
}

.phase4-cronograma__inner{
  width:min(100% - 34px, 900px);
}

.phase4-cronograma__title{
  margin:0 0 clamp(42px,5vw,64px);
  color:rgb(110,95,84);
  font-family:"Sloop Script","Sloop Script Pro",cursive;
  font-size:clamp(4.5rem,8vw,7rem);
  line-height:.85;
  font-weight:400;
  text-align:center;
}

.phase4-cronograma__timeline{
  --axis:#728071;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);
  grid-template-rows:repeat(6, minmax(150px,auto));
  max-width:760px;
  margin:0 auto;
  align-items:center;
}

.phase4-cronograma__timeline::before{
  content:"";
  position:absolute;
  left:50%;
  top:125px;
  bottom:111px;
  width:3.5px;
  transform:translateX(-50%);
  background:rgba(114,128,113,.76);
}

.phase4-cronograma__event{
  position:relative;
  width:min(200%,465px);
  color:rgb(110,95,84);
  text-align:center;
  font-family:"The Seasons","Cormorant Garamond",Georgia,serif;
  font-weight:450;
  z-index:1;
}

.phase4-cronograma__event--left{
  grid-column:1;
  justify-self:end;
  padding-right:108px;
}

.phase4-cronograma__event--right{
  grid-column:3;
  justify-self:start;
  padding-left:108px;
}

.phase4-cronograma__event--1{grid-row:1}
.phase4-cronograma__event--2{grid-row:2}
.phase4-cronograma__event--3{grid-row:3}
.phase4-cronograma__event--4{grid-row:4}
.phase4-cronograma__event--5{grid-row:5}
.phase4-cronograma__event--6{grid-row:6}

.phase4-cronograma__event::after{
  content:"";
  position:absolute;
  top:50%;
  width:58px;
  height:2.5px;
  background:rgba(114,128,113,.76);
}

.phase4-cronograma__event--left::after{
  right:-36px;
}

.phase4-cronograma__event--right::after{
  left:-36px;
}

.phase4-cronograma__icon{
  width:clamp(164px,19vw,230px);
  height:clamp(164px,19vw,230px);
  margin:0 auto 12px;
  color:rgba(114,128,113,.72);
}

.phase4-cronograma__icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.phase4-cronograma__event h3{
  margin:0;
  color:rgb(110,95,84);
  font-family:inherit;
  font-size:clamp(1.15rem,2.2vw,1.85rem);
  line-height:1.05;
  font-weight:700;
  letter-spacing:.025em;
  text-transform:uppercase;
}

.phase4-cronograma__event p{
  margin:8px 0 0;
  color:rgb(110,95,84);
  font-family:inherit;
  font-size:clamp(1.32rem,2.5vw,2.5rem);
  line-height:1;
  font-weight:500;
}

@media (max-width:900px){
  .phase4-cronograma{
    padding:30px 0 32px;
  }

  .phase4-cronograma__inner{
    width:min(55% - 10px, 600px);
  }

  .phase4-cronograma__timeline{
    grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);
    grid-template-rows:repeat(6, minmax(132px,auto));
    max-width:320px;
  }
}

@media (max-width:760px){
  .phase4-cronograma{
    padding:36px 0 32px;
  }

  .phase4-cronograma__inner{
    width:min(100% - 20px, 620px);
  }

  .phase4-cronograma__title{
    margin-bottom:10px;
    font-size:clamp(4.15rem,18vw,5.8rem);
  }

  .phase4-cronograma__timeline{
    grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);
    grid-template-rows:repeat(6, minmax(132px,auto));
    max-width:620px;
  }

  .phase4-cronograma__timeline::before{
    width:2px;
    top:122px;
    bottom:107px;
  }

  .phase4-cronograma__event{
    width:min(100%,255px);
  }

  .phase4-cronograma__event--left{
    padding-right:16px;
  }

  .phase4-cronograma__event--right{
    padding-left:16px;
  }

  .phase4-cronograma__event::after{
    height:2px;
    width:44px;
  }

  .phase4-cronograma__event--left::after{
    right:-22px;
  }

  .phase4-cronograma__event--right::after{
    left:-22px;
  }

  .phase4-cronograma__icon{
    width:88px;
    height:88px;
    margin-bottom:8px;
  }

  .phase4-cronograma__event h3{
    
    font-size:clamp(.92rem,4vw,1.75rem);
    line-height:0.95;
  }

  .phase4-cronograma__event p{
    margin-top:4px;
    font-size:clamp(1.18rem,5vw,1.95rem);
  }
}

@media (max-width:390px){
  .phase4-cronograma__inner{
    width:min(100% - 12px, 620px);
  }

  .phase4-cronograma__timeline{
    grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);
    grid-template-rows:repeat(6, minmax(124px,auto));
  }

  .phase4-cronograma__event{
    width:min(100%,170px);
  }

  .phase4-cronograma__event--left{padding-right:10px}
  .phase4-cronograma__event--right{padding-left:10px}

  .phase4-cronograma__event::after{width:25px;
  height:2px;}
  .phase4-cronograma__event--left::after{right:-17px}
  .phase4-cronograma__event--right::after{left:-17px}

  .phase4-cronograma__icon{
    width:61px;
    height:61px;
  }

  .phase4-cronograma__event h3{
    
    font-size:.86rem;
    letter-spacing:.015em;
  }

  .phase4-cronograma__event p{
    font-size:1.12rem;
  }
}


/* Líneas del cronograma vía SVG para mejorar la respuesta al cambio de ancho */
.phase4-cronograma__timeline{
  isolation:isolate;
}

.phase4-cronograma__lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  display:block;
}

.phase4-cronograma__lines--mobile{
  display:none;
}

/* Se desactivan las líneas construidas con pseudo-elementos */
.phase4-cronograma__timeline::before,
.phase4-cronograma__event::after{
  content:none !important;
  display:none !important;
}

.phase4-cronograma__event{
  z-index:1;
}

@media (max-width:760px){
  .phase4-cronograma__lines--desktop{
    display:none;
  }

  .phase4-cronograma__lines--mobile{
    display:block;
  }
}