/* styles/sobre-mi.css */
.about{
  --a-bg:#0f1b33;
  --a-card:#15233f;
  --a-border:rgba(255,255,255,.09);
  --a-blue:#6b82ff;
  --a-text:#fff;
  --a-muted:rgba(255,255,255,.62);
  background:var(--a-bg);
  color:var(--a-text);
  font-family:'Inter',system-ui,sans-serif;
  padding:clamp(64px,9vw,130px) clamp(16px,5vw,64px);
}
.about__inner{max-width:1200px;margin:0 auto}

.about__eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--a-blue);
  margin-bottom:22px;
}

.about__layout{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px,5vw,80px);align-items:start;
}

/* ---------- Izquierda ---------- */
.about__photo{
  border-radius:20px;overflow:hidden;aspect-ratio:3/4;
  border:1px solid var(--a-border);background:var(--a-card);
}
.about__photo img{width:100%;height:100%;object-fit:cover;display:block}

.about__stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.stat{
  background:var(--a-card);border:1px solid var(--a-border);border-radius:14px;
  padding:20px 12px;text-align:center;display:flex;flex-direction:column;gap:8px;
}
.stat__value{font-family:'Space Grotesk','Inter',sans-serif;font-weight:500;font-size:clamp(22px,2.4vw,30px)}
.stat:first-child .stat__value{color:var(--a-blue)}
.stat__label{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--a-muted);
}

.about__logo{display:block;margin-top:44px;width:min(300px,70%);height:auto}

/* ---------- Derecha ---------- */
.about__name{
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:500;
  font-size:clamp(30px,4vw,54px);line-height:1.05;letter-spacing:-.01em;
}
.about__role{margin-top:14px;font-size:15px;line-height:1.55;color:var(--a-muted);max-width:640px}

.about__badges{list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:28px 0 40px}
.about__badges li{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--a-muted);
  border:1px solid var(--a-border);border-radius:999px;padding:9px 18px;
}

.about__sub{font-family:'Space Grotesk','Inter',sans-serif;font-weight:500;font-size:17px;margin-bottom:20px}

/* ---------- Timeline de formación ---------- */
.timeline{list-style:none;display:flex;flex-direction:column;gap:18px}
.timeline li{
  border-left:2px solid rgba(107,130,255,.55);
  padding-left:20px;display:flex;flex-direction:column;gap:5px;
}
.timeline strong{font-size:14.5px;font-weight:600}
.timeline span{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--a-muted)}
.flag{width:18px;height:auto;flex:none;border-radius:2px;display:block}

/* ---------- Bio y cédulas ---------- */
.about__bio{margin-top:40px;font-size:15px;line-height:1.75;color:var(--a-muted)}
.about__cedulas{
  margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 28px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);
}

/* ---------- Animación de entrada (la activa el JS) ---------- */
.js .about__photo,.js .about__stats,.js .about__right>*{
  opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;
}
.js .is-in{opacity:1!important;transform:none!important}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .about__layout{grid-template-columns:1fr}
  .about__photo{max-width:480px;aspect-ratio:4/5}
  .about__stats{max-width:480px}
  .about__logo{margin-top:28px}
  /* en móvil el logo baja al final visualmente natural; si prefieres ocultarlo: display:none */
}
@media (max-width:560px){
  .about__badges li{border-radius:16px;line-height:1.5}
  .about__cedulas{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .js .about__photo,.js .about__stats,.js .about__right>*{opacity:1;transform:none;transition:none}
}