/* ============================ 03 · EXPERIENCIA ============================ */
#experiencia.ex{position:relative;padding-block:clamp(24px,4vw,48px) clamp(72px,9vw,120px)}
#experiencia .ex-panel{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(22px,4vw,56px);padding:clamp(26px,4vw,46px) clamp(24px,4vw,52px);border-radius:var(--r-xl);
  background:linear-gradient(150deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 60%);border:1px solid var(--line-2);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 50px 100px -60px rgba(0,0,0,.9)}
#experiencia .ex-panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(40% 120% at 0% 50%,rgba(46,123,255,.10),transparent 70%)}

#experiencia .ex-sello{position:relative;width:clamp(92px,11vw,124px);aspect-ratio:1;display:grid;place-items:center}
#experiencia .ex-anillo{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
#experiencia .ex-anillo circle{fill:none}
#experiencia .ex-pista{stroke:var(--line-2);stroke-width:1}
#experiencia .ex-arco{stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1) .2s}
#experiencia .ex-interior{fill:rgba(255,255,255,.03)!important;stroke:rgba(255,255,255,.06);stroke-width:1}
#experiencia .ex-ico{position:relative;width:34%;height:34%;color:var(--white);opacity:0;transform:scale(.7);transition:opacity .8s var(--ease) .5s,transform .8s var(--ease) .5s}
#experiencia .ex-panel.vis .ex-arco{stroke-dashoffset:18}
#experiencia .ex-panel.vis .ex-ico{opacity:1;transform:none}
html:not(.js) #experiencia .ex-arco{stroke-dashoffset:18}
html:not(.js) #experiencia .ex-ico{opacity:1;transform:none}

#experiencia .ex-cifra{font-family:var(--display);color:var(--white);line-height:.9;letter-spacing:-.04em;display:flex;align-items:baseline;gap:.08em}
#experiencia .ex-num{font-size:clamp(3.4rem,6.4vw,5.4rem);font-weight:700;font-variant-numeric:tabular-nums}
#experiencia .ex-mas{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:600;color:var(--accent)}
#experiencia .ex-anios{font-size:clamp(1rem,1.6vw,1.3rem);font-weight:600;letter-spacing:.24em;margin-left:.5em;color:var(--silver)}
#experiencia h2{font-family:var(--body);font-size:clamp(.98rem,1.3vw,1.12rem);font-weight:400;letter-spacing:0;line-height:1.5;color:var(--mist);margin-top:12px;max-width:34ch}

#experiencia .ex-hechos{list-style:none;display:grid;gap:12px;padding-left:clamp(22px,3vw,44px);border-left:1px solid var(--line)}
#experiencia .ex-hechos li{position:relative;padding-left:22px;font-size:.88rem;color:var(--silver);line-height:1.45}
#experiencia .ex-hechos li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:5px;border-left:1.4px solid var(--accent);border-bottom:1.4px solid var(--accent);transform:rotate(-45deg)}

@media (max-width:980px){
  #experiencia .ex-panel{grid-template-columns:auto 1fr}
  #experiencia .ex-hechos{grid-column:1/-1;padding-left:0;border-left:0;padding-top:22px;border-top:1px solid var(--line);grid-template-columns:repeat(3,1fr)}
}
@media (max-width:620px){
  #experiencia .ex-panel{grid-template-columns:1fr;text-align:left;gap:18px}
  #experiencia .ex-sello{width:84px;position:absolute;top:24px;right:22px}
  #experiencia .ex-hechos{grid-template-columns:1fr;gap:10px}
  #experiencia h2{max-width:24ch}
}

/* retrato de marca */
#experiencia .ex-foto{width:150px;flex:none;aspect-ratio:3/4;border-radius:var(--r-lg);margin:0;border:1px solid var(--line-2)}
#experiencia .ex-foto::after{background:linear-gradient(200deg,rgba(46,123,255,.25),transparent 55%),linear-gradient(0deg,rgba(4,7,14,.75),transparent 60%)}
@media (max-width:1180px){ #experiencia .ex-foto{display:none} }

@media (min-width:1181px){ #experiencia .ex-panel{grid-template-columns:auto auto 1fr auto} }