/* ============================================================
   HISTORIA / RENÉ — story + timeline
   ============================================================ */
.story{
  padding:110px 0;
  background:var(--mist);
  position:relative;
}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.story-left .eyebrow{display:block;margin-bottom:16px}
.story-left h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(34px, 5vw, 56px);line-height:.96;
  letter-spacing:-.01em;text-transform:uppercase;
  color:var(--navy);margin-bottom:24px;
}
/* Override del artefacto: ancho fijo del título de historia (antes inline) */
.story-left h2.story-title--ancho{width:600px;max-width:100%}
.story-left h2 em{font-style:normal;color:var(--precision)}
.story-left .lead{font-size:17px;color:var(--graphite);line-height:1.65;margin-bottom:18px;font-weight:500}
.story-left p{font-size:15.5px;color:var(--steel);line-height:1.7;margin-bottom:16px}

.story-signature{
  margin-top:30px;padding-top:24px;
  border-top:1px solid var(--line);
  display:flex;align-items:center;gap:16px;
}
.story-signature .avatar{
  width:54px;height:54px;border-radius:50%;
  background:var(--navy);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:18px;
  flex:none;
}
.story-signature .info{display:flex;flex-direction:column}
.story-signature .info .name{font-family:var(--display);font-weight:800;font-size:16px;color:var(--navy);text-transform:uppercase;letter-spacing:.01em}
.story-signature .info .role{font-size:12.5px;color:var(--steel);font-weight:500}

/* Timeline */
.timeline{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:40px 38px;
  box-shadow:var(--shadow-md);
  position:relative;
  overflow:hidden;
}
.timeline::before{content:"";position:absolute;top:0;left:38px;right:38px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--precision),var(--precision-l))}
.timeline-head{
  font-family:var(--display);font-weight:600;font-size:11px;
  color:var(--steel);letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:30px;display:flex;align-items:center;gap:10px;
}
.timeline-head::after{content:"";flex:1;height:1px;background:var(--line)}
.timeline-item{
  display:grid;grid-template-columns:80px 1fr;gap:24px;
  padding:20px 0;border-bottom:1px solid var(--line);
  position:relative;transition:padding-left .3s var(--ease);
}
.timeline-item:hover{padding-left:6px}
.timeline-item:last-child{border-bottom:none}
.timeline-item .year{
  font-family:var(--display);font-weight:800;font-size:24px;
  color:var(--precision);line-height:1;
}
.timeline-item:last-child .year{color:var(--amber)}
.timeline-item .event{font-size:15px;color:var(--graphite);line-height:1.5;font-weight:500}
.timeline-item .event small{display:block;color:var(--steel);font-weight:400;font-size:13px;margin-top:4px}

@media(max-width:1080px){
  .story-grid{grid-template-columns:1fr;gap:48px}
}
@media(max-width:540px){
  .story{padding:72px 0}
  .timeline{padding:30px 24px}
  .timeline-item{grid-template-columns:60px 1fr;gap:16px}
}