/* ============================================================
   about.css — bio, facts, education timeline, IntegrarTEC,
   skills by level
   ============================================================ */

/* intro split */
.about-hero{padding:80px 0 0}
.about-split{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.about-copy h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,6.4vw,76px);line-height:1;letter-spacing:-.02em;margin:18px 0 30px}
.about-copy h1 em{font-style:italic;color:var(--accent)}
.about-copy .eyebrow{margin-bottom:0}
.about-copy p{font-size:16.5px;color:var(--fg2);line-height:1.74;margin-bottom:18px;max-width:52ch}
.about-photo{position:relative;margin:0;max-width:360px;width:100%;justify-self:end}
.about-photo image-slot{width:100%;height:auto;min-height:340px;aspect-ratio:4/5;display:block;border:1px solid var(--line)}
.about-photo .frame{position:absolute;inset:-12px -12px auto auto;width:58%;height:60%;border:1px solid var(--line2);z-index:-1}
.about-facts{margin-top:42px;display:grid;grid-template-columns:140px 1fr;border-top:1px solid var(--line)}
.about-facts dt{color:var(--fg3);letter-spacing:.04em;font-size:14px;padding:14px 18px 14px 0;border-bottom:1px solid var(--line)}
.about-facts dd{color:var(--fg);font-size:14px;padding:14px 0;border-bottom:1px solid var(--line)}
@media(max-width:820px){
  .about-split{grid-template-columns:1fr;gap:40px}
  .about-photo{max-width:340px;justify-self:start}
  .about-photo image-slot{min-height:320px}
}

/* staggered entrance for the intro copy (and photo) */
@media(prefers-reduced-motion:no-preference){
  .about-copy > *,.about-photo{animation:aboutIn .8s cubic-bezier(.2,.7,.2,1) both}
  .about-copy .eyebrow{animation-delay:.05s}
  .about-copy h1{animation-delay:.16s}
  .about-copy p:nth-of-type(1){animation-delay:.30s}
  .about-copy p:nth-of-type(2){animation-delay:.40s}
  .about-copy p:nth-of-type(3){animation-delay:.50s}
  .about-copy .about-facts{animation-delay:.60s}
  .about-photo{animation-delay:.22s;animation-name:aboutPhotoIn}
}
@keyframes aboutIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes aboutPhotoIn{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:none}}

/* anchor offset so sticky nav doesn't cover scrolled-to sections */
#it-detail,#utn-detail,#gl-detail{scroll-margin-top:92px}

/* education item as a link that scrolls to its detail */
.edu[href]{cursor:pointer;text-decoration:none}
.edu .go{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);display:inline-flex;gap:7px;align-items:center;transition:color .2s,gap .25s}
.edu:hover .go{color:var(--accent);gap:11px}

/* education timeline */
.edu-list{border-top:1px solid var(--line);list-style:none}
.edu{display:grid;grid-template-columns:120px 1fr auto;gap:30px;padding:34px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:background .3s,padding .3s}
.edu .year{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--fg3)}
.edu .ebody{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.edu .ebody h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,3vw,30px);letter-spacing:-.01em}
.edu .ebody .org{font-size:14.5px;color:var(--fg2)}
.edu .ebody .now-badge{display:inline-flex;gap:8px;align-items:center;margin-top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.edu .etag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);white-space:nowrap}
.edu:hover{background:var(--card);padding-left:16px;padding-right:16px}
@media(max-width:720px){
  .edu{grid-template-columns:1fr;gap:8px}
  .edu .etag{order:-1}
}

/* IntegrarTEC detail */
.it-block{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start;margin-top:8px}
.it-intro .it-name{font-family:var(--serif);font-size:clamp(30px,4.2vw,46px);font-weight:400;letter-spacing:-.01em;margin:6px 0 6px}
.it-intro .it-role{font-size:15px;color:var(--accent);letter-spacing:.02em;margin-bottom:24px}
.it-intro p{font-size:15.5px;color:var(--fg2);line-height:1.72;max-width:46ch}
.it-intro .it-period{display:inline-flex;gap:9px;align-items:center;margin-top:24px;font-size:13px;color:var(--fg3);border:1px solid var(--line);border-radius:99px;padding:8px 16px}

.it-plan h3{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg3);margin-bottom:18px}
.mod{border-top:1px solid var(--line)}
.mod-item{border-bottom:1px solid var(--line)}
.mod-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;color:var(--fg);
  display:flex;align-items:center;gap:18px;padding:20px 4px;font-family:var(--sans);
}
.mod-q .mn{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--accent);flex:none;width:30px}
.mod-q .mt{font-size:16.5px;font-weight:500;flex:1}
.mod-q .mi{font-size:18px;color:var(--fg3);transition:transform .3s;flex:none}
.mod-item[open] .mod-q .mi{transform:rotate(45deg)}
.mod-a{list-style:none;padding:2px 4px 22px 52px;display:flex;flex-direction:column;gap:9px;animation:modOpen .35s ease}
@keyframes modOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mod-a li{font-size:14px;color:var(--fg2);line-height:1.5;position:relative;padding-left:18px}
.mod-a li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--accent)}
@media(max-width:820px){.it-block{grid-template-columns:1fr;gap:36px}}

/* detail card (UTN perfil) */
.detail-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px 30px 32px}
.detail-card h3{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg3);margin-bottom:16px}
.detail-card p{font-size:15.5px;color:var(--fg2);line-height:1.74}

/* G&L technical pillars */
.pillars{list-style:none;border-top:1px solid var(--line)}
.pillars li{font-size:15px;color:var(--fg2);line-height:1.55;padding:16px 0 16px 22px;border-bottom:1px solid var(--line);position:relative}
.pillars li::before{content:"";position:absolute;left:0;top:24px;width:9px;height:1px;background:var(--accent)}

/* skills by level */
.sk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:42px 56px;list-style:none}
.sk-cat h3{font-family:var(--serif);font-weight:400;font-size:22px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sk-cat ul{list-style:none;display:flex;flex-direction:column;gap:0}
.sk-cat li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.sk-cat li:last-child{border-bottom:none}
.sk-name{font-size:15px;color:var(--fg)}
.lvl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 11px;border-radius:99px;border:1px solid var(--line2);color:var(--fg2)}
.lvl.adv{background:var(--accent);color:#fff;border-color:var(--accent)}
.lvl.mid{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.lvl.learning{border-style:dashed;color:var(--fg3)}
.sk-note{margin-top:30px;font-size:13px;color:var(--fg3);font-style:italic}
@media(max-width:680px){.sk-grid{grid-template-columns:1fr;gap:32px}}