/* Currículum: se carga después de landing.css y reutiliza sus variables, fondo y botones */

/* El modo "una pantalla" es solo de la página principal: aquí el contenido se desplaza */
body.cv-page{height:auto;display:block;overflow:visible;min-height:100vh;min-height:100svh}
html:has(body.cv-page){height:auto;scroll-behavior:smooth;scroll-padding-top:5rem}
.cv-page main{position:relative;z-index:2}

.cv-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:80rem;margin:0 auto;padding:1.4rem var(--pad) 0;position:relative;z-index:3}
.cv-top .brand img{height:2.6rem;width:auto}
.btn-sm{padding:.6rem 1.1rem;font-size:.8rem}

.cv-hero{max-width:80rem;margin:0 auto;padding:clamp(2rem,6vw,4.5rem) var(--pad) clamp(1.5rem,3vw,2.5rem)}
.cv-title{font-size:clamp(2.8rem,7vw,5.2rem);margin-bottom:1.2rem}
.cv-hero .lead{max-width:44ch}

/* ---------- Barra de filtros (queda fija arriba al hacer scroll) ---------- */
.cv-filterbar{position:sticky;top:0;z-index:20;background:rgba(20,24,27,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cv-filterbar-in{max-width:80rem;margin:0 auto;padding:.8rem var(--pad);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.chip-btn{display:inline-flex;align-items:center;gap:.55rem;font:600 .85rem var(--sans);padding:.55rem 1rem;border:1px solid var(--line-2);background:transparent;color:#d7dde0;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.chip-btn:hover{border-color:var(--gold);color:#fff}
.chip-btn[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.chip-btn .n{font:700 .72rem var(--sans);padding:.05rem .4rem;border:1px solid currentColor;opacity:.85}
.chip-btn.ghost{color:var(--gold-lt);border-color:var(--gold)}
.chip-btn.ghost[aria-pressed="true"]{background:transparent;color:var(--gold-lt);box-shadow:inset 0 0 0 1px var(--gold)}

/* ---------- Línea temporal ---------- */
.tl{position:relative;max-width:68rem;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) var(--pad) clamp(3rem,7vw,5rem);--p:0}
.tl-line{position:absolute;left:50%;top:clamp(2rem,5vw,3.5rem);bottom:clamp(3rem,7vw,5rem);width:2px;transform:translateX(-1px);background:var(--line-2)}
.tl-line i{position:absolute;inset:0;background:linear-gradient(var(--gold-lt),var(--gold));transform:scaleY(var(--p));transform-origin:top;box-shadow:0 0 14px rgba(218,165,34,.55)}
.tl-list{list-style:none;margin:0;padding:0;position:relative}

.tl-item{position:relative;width:50%;padding-bottom:clamp(1.4rem,3vw,2.2rem);transition:opacity .3s ease,transform .3s ease}
.tl-item[hidden]{display:none}
.tl-item[data-side="left"]{padding-right:clamp(2rem,4.5vw,3.5rem)}
.tl-item[data-side="right"]{margin-left:50%;padding-left:clamp(2rem,4.5vw,3.5rem)}

/* conector entre la tarjeta y la línea */
.tl-item::before{content:"";position:absolute;top:1.55rem;height:2px;width:clamp(2rem,4.5vw,3.5rem);background:var(--line-2);transform:scaleX(0);transition:transform .6s var(--ease) .15s,background .3s}
.tl-item[data-side="left"]::before{right:0;transform-origin:right}
.tl-item[data-side="right"]::before{left:0;transform-origin:left}
.tl-item.in::before{transform:scaleX(1)}
.tl-item:hover::before,.tl-item.open::before{background:var(--gold)}

/* punto sobre la línea: la forma depende de la categoría */
.tl-dot{position:absolute;top:1.55rem;width:1.05rem;height:1.05rem;margin-top:-.5rem;background:var(--ink);border:2px solid var(--gold);z-index:2;transition:background .3s,transform .3s var(--ease),box-shadow .3s}
.tl-item[data-side="left"] .tl-dot{right:-.52rem}
.tl-item[data-side="right"] .tl-dot{left:-.52rem}
.tl-item[data-cat="reglada"] .tl-dot{background:var(--gold)}
.tl-item[data-cat="exp"] .tl-dot{background:var(--gold);border-radius:50%}
.tl-item[data-cat="master"] .tl-dot::after{content:"";position:absolute;inset:2px;background:var(--gold)}
.tl-item[data-cat="cert"] .tl-dot{transform:rotate(45deg)}
.tl-item:hover .tl-dot,.tl-item.open .tl-dot{box-shadow:0 0 0 5px rgba(218,165,34,.22)}
.tl-item.in .tl-dot{animation:ping 1.1s var(--ease) 1}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(242,181,38,.65)}100%{box-shadow:0 0 0 14px rgba(242,181,38,0)}}

/* tarjeta */
.tl-card{background:var(--panel);border:1px solid var(--line);position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .3s,box-shadow .3s,transform .3s var(--ease)}
.tl-card::before{content:"";position:absolute;left:-1px;top:-1px;width:1.1rem;height:1.1rem;border-left:2px solid var(--gold);border-top:2px solid var(--gold);pointer-events:none}
.tl-item:hover .tl-card,.tl-item.open .tl-card{border-color:var(--line-2);box-shadow:0 18px 40px -22px rgba(0,0,0,.8);transform:translateY(-2px)}
.tl-head{all:unset;box-sizing:border-box;display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;width:100%;padding:1.05rem 1.2rem;cursor:pointer}
.tl-head:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.tl-meta{grid-column:1;display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:center;font:600 .74rem var(--sans);letter-spacing:.1em;text-transform:uppercase}
.tl-cat{color:var(--gold-lt)}
.tl-per{color:var(--mute)}
.tl-title{grid-column:1;font:650 1.2rem/1.25 var(--sans);color:#fff;margin-top:.15rem}
.tl-org{grid-column:1;font:.95rem var(--serif);color:var(--mute)}
.tl-chev{grid-column:2;grid-row:1/4;align-self:center;width:.7rem;height:.7rem;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .3s}
.tl-item.open .tl-chev{transform:rotate(-135deg)}
.tl-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.tl-item.open .tl-more{grid-template-rows:1fr}
.tl-more-in{overflow:hidden;padding:0 1.2rem;opacity:0;transition:opacity .3s,padding .35s}
.tl-item.open .tl-more-in{opacity:1;padding:0 1.2rem 1.2rem}
.tl-more-in p{font-size:.98rem;color:#c3cbd0;margin:0 0 .7rem}
.tl-more-in ul{margin:0 0 .8rem;padding-left:1.1rem;font-size:.95rem;color:#c3cbd0}
.tl-more-in li::marker{color:var(--gold)}
.tl-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin:0}
.tl-tags span{font:600 .72rem var(--sans);border:1px solid var(--line-2);color:#d7dde0;padding:.15rem .55rem}

/* entrada / salida (filtros) */
.js .tl-item{opacity:0}
.js .tl-item[data-side="left"]{transform:translateX(-26px)}
.js .tl-item[data-side="right"]{transform:translateX(26px)}
.js .tl-item.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .tl-item.in.out{opacity:0;transform:translateY(10px) scale(.98);transition:opacity .26s ease,transform .26s ease}

.tl-empty{position:relative;text-align:center;color:var(--mute);font:1rem var(--sans);padding:2rem 0}

/* pie */
.cv-foot{position:relative;z-index:2;max-width:80rem;margin:0 auto;padding:1.2rem var(--pad) 2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font:.85rem var(--sans);color:var(--mute);border-top:1px solid var(--line)}
.cv-foot p{margin:0}

/* ---------- Barra de filtros en una sola fila cuando no caben los 5 filtros + el botón ---------- */
@media (max-width:80rem){
  .cv-filterbar-in{padding:.6rem var(--pad);flex-wrap:nowrap;gap:.7rem}
  .filters{flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .filters::-webkit-scrollbar{display:none}
  .filters.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent)}
  .chip-btn{flex:none;padding:.5rem .85rem;font-size:.8rem;white-space:nowrap}
  #cv-toggle-all{flex:none}
}

/* ---------- Móvil y tablet: una sola columna ---------- */
@media (max-width:60rem){
  .tl-line{left:.55rem;transform:none}
  .tl-item,.tl-item[data-side="left"],.tl-item[data-side="right"]{width:100%;margin-left:0;padding-left:2.4rem;padding-right:0}
  .tl-item::before,.tl-item[data-side="left"]::before,.tl-item[data-side="right"]::before{left:.55rem;right:auto;width:1.8rem;transform-origin:left}
  .tl-item .tl-dot,.tl-item[data-side="left"] .tl-dot,.tl-item[data-side="right"] .tl-dot{left:.02rem;right:auto}
  .js .tl-item,.js .tl-item[data-side="left"],.js .tl-item[data-side="right"]{transform:translateX(18px)}
  .js .tl-item.in{transform:none}
}
@media (max-width:30rem){
  .cv-top .brand img{height:2.2rem}
  .btn-sm span{display:none}
  .btn-sm{padding:.6rem .8rem}
}

@media (prefers-reduced-motion:reduce){
  .js .tl-item{opacity:1;transform:none}
  .tl-item::before{transform:scaleX(1)}
  .tl-line i{transform:scaleY(1)}
}

.cv-right{display:flex;align-items:center;gap:1.1rem}
@media (max-width:30rem){.cv-right{gap:.7rem}}