/* contenedor sin desplazamiento lateral extra */
.process-container{
  position:relative;
  padding-left:60px;            /* espacio para círculos + texto */
}

/* línea vertical – centrada en el círculo 34 px → radio 17 px */
.process-container::before{
  content:"";
  position:absolute;
  left:17px;                    /* 17 px = centro del círculo */
  top:22px;                     /* arranca debajo del 1ᵉʳ círculo */
  bottom:0;
  width:2px;
  background:var(--azul-claro);
  z-index:0;
}

.step{position:relative;margin-bottom:2.5rem;}
.step-circle{
  position:absolute;
  left:-40px;top:0;             /* -40 px + 60 px padding ⇒ centro a 20 px */
  width:34px;height:34px;
  border-radius:50%;
  background:var(--azul-claro);
  color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  z-index:2;                    /* por encima de la línea */
}
.step h4{margin:0 0 .35rem;font-size:1.1rem}
.step:last-child{margin-bottom:0}

/* desktop: círculos un poco más grandes y línea ajustada */
@media(min-width:768px){
  .process-container{padding-left:80px;}  /* más aire para texto */
  .process-container::before{left:25px;}  /* 40 px círculo /2 + desplazamiento */
  .step-circle{
    left:-55px;                 /* -55 px + 80 px padding ⇒ centro a 25 px */
    width:40px;height:40px;font-size:1.05rem;
  }
}
/* ===== TIMELINE ALTERNADO ===== */
.process-section{padding:3.5rem 0;background:#fff;}
.process-container.alt{position:relative;padding:0;}
.process-container.alt::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;
  width:2px;background:var(--azul-claro);transform:translateX(-50%);
}

.step{position:relative;margin:0 0 3rem;}
.step-circle{
  position:absolute;top:0;
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,#0d6efd 0%,#0059ff 100%);
  color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));
  animation:pop .8s ease forwards;opacity:0;
}

/* Card */
.step-card{
  background:#fff;padding:1.25rem 1.5rem;border-radius:var(--radius);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  width:calc(50% - 60px);      /* 50% – medio círculo + margen */
  animation:slide 1s ease forwards;opacity:0;
}
.step-card h4{margin:0 0 .4rem;font-size:1.15rem}
.step-card p{margin:0;font-size:1rem;line-height:1.55}

/* posiciones izq/der */
.alt-left  .step-circle{left:calc(50% - 23px);}  /* 23 = 46/2 */
.alt-right .step-circle{left:calc(50% - 23px);}
.alt-left  .step-card{margin-left:0;margin-right:auto}
.alt-right .step-card{margin-left:auto;margin-right:0}

/* animaciones suaves */
@keyframes slide{
  0%{transform:translateY(50px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
@keyframes pop{
  0%{transform:scale(.3);opacity:0}
  60%{transform:scale(1.15);opacity:1}
  100%{transform:scale(1);opacity:1}
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
  .process-container.alt::before{display:none}
  .step-card{width:100%}
  .step-circle{left:0}
  .alt-left .step-card,
  .alt-right .step-card{margin-left:60px}
}

/* ===== SOBRE NOSOTROS “hero-lite” ===== */
.about-hero{
  background:linear-gradient(135deg,#f6f8fb 0%,#eef4ff 100%);
  padding:4.5rem 0 4rem;
  text-align:center;
}
.about-wrap{max-width:1100px;margin:0 auto}

/* disposición lado a lado (se apilan en mobile) */
.about-flex{
  display:flex;flex-wrap:wrap;
  gap:3rem;align-items:center;
}
.about-text{flex:1 1 400px;font-size:1.05rem;line-height:1.65;text-align:left}
.about-text .lead{font-size:1.2rem;margin-bottom:1rem}

/* métricas */
.about-stats{
  flex:0 0 260px;
  list-style:none;padding:0;margin:0 auto;
  display:flex;flex-direction:column;gap:1.8rem;
}
.stat-num{
  font-family:Montserrat, sans-serif;
  font-size:2.2rem;font-weight:700;
  color:var(--azul-claro);
  display:block;margin-bottom:.25rem;
}
.stat-label{
  font-size:.9rem;line-height:1.3;color:#333;
  text-transform:uppercase;letter-spacing:.5px;
}

/* CTA */
.about-cta{
  margin-top:3rem;display:inline-block;
}

/* mobile: centra texto y métricas */
@media(max-width:768px){
  .about-text{text-align:center}
  .about-stats{flex-direction:row;justify-content:center;gap:1.5rem}
  .stat-label{white-space:nowrap}
}

/* ======================
   INAES highlight (FIX)
====================== */
section#inaes{position:relative;padding-bottom:3.5rem}
section#inaes .inaes-highlight{margin-top:4rem} /* por si quedó algo raro */

section#inaes .inaes-grid{
  display:grid;
  grid-template-columns:1.4fr .9fr;
  gap:1.5rem;
  align-items:start;
}

section#inaes .inaes-card,
section#inaes .inaes-side__box{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:1.5rem;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

section#inaes .inaes-card__head h3{margin:.4rem 0 .5rem}

section#inaes .inaes-badge{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  font-weight:700;
  font-size:.9rem;
  color:#033366;
  background:rgba(3,51,102,.08);
  padding:.4rem .7rem;
  border-radius:999px;
}

section#inaes .inaes-cta{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:1.25rem;
}

section#inaes .inaes-note{
  display:block;
  margin-top:1rem;
  font-size:.9rem;
  opacity:.8;
}

/* lateral */
section#inaes .inaes-side{display:flex;flex-direction:column;gap:1rem}
section#inaes .inaes-side__box h4{margin:0 0 .6rem}
section#inaes .inaes-side__box ul{margin:.4rem 0 0;padding-left:1.1rem}
section#inaes .inaes-side__box li{margin:.25rem 0}
section#inaes .inaes-side__trust{
  background:linear-gradient(180deg, rgba(3,51,102,.06), rgba(3,51,102,.02));
}

/* Flecha: como es absolute, la sección debe tener padding-bottom */
section#inaes .srv-cue{bottom:1.2rem}

/* Responsive */
@media(max-width:900px){
  section#inaes .inaes-grid{grid-template-columns:1fr}
}