:root{
  /* Light by default */
  --page-bg:#f2f2f2;
  --text:#111;
  --muted:#8b8b8b;
  --soft:#d9d9d9;
  --pin:#111;
}

html.dark{
  --page-bg:#0b0b0b;
  --text:#f5f5f5;
  --muted:#a6a6a6;
  --soft:#1b1b1b;
  --pin:#e8e8e8;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--text);
  font:16px/1.45 "PPNeueMontreal",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.btn{
  display:inline-block;
  padding:.8rem 1.2rem;
  border:1px solid currentColor;
  border-radius:999px;
  font-weight:600;
  letter-spacing:.02em;
  transition:.25s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:var(--text); color: var(--page-bg); border-color:var(--text);
}

/* util */
.container{max-width:1200px;margin:auto;padding:0 24px}
section{position:relative;background:transparent}

/* =========================================================
   SKILLS — columna izquierda sticky + ventana de enfoque
   (compatible con tu HTML/JS actuales)
   ========================================================= */

.skills-section{
  padding: clamp(60px, 10vw, 120px) 0;
  background: transparent;
}

.skills-grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
}

.skills-left{
  position: sticky;
  top: 50vh;                  /* centrado vertical */
  transform: translateY(-50%);
}

.skills-kicker{
  display: inline-block;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(18px, 2.8vw, 24px);
}

.skills-pin{
  height: 1px;
  width: 42px;
  background: var(--pin);
  margin-top: 10px;
  opacity: .6;
}

/* Columna derecha con máscara superior/inferior */
.skills-right{
  max-height: 80vh;
  overflow-y: auto;
  padding-right: 8px;
  -webkit-overflow-scrolling: touch;

  /* desvanecido arriba/abajo para “ventana” de enfoque */
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
html.dark .skills-right{
  mask-image: linear-gradient(to bottom, transparent 0, #fff 12%, #fff 88%, transparent 100%);
}

/* Fallback visual a la máscara (para navegadores sin mask-image) */
.skills-right::before,
.skills-right::after{
  content: "";
  position: sticky;
  left: 0; right: 0;
  height: 56px;
  pointer-events: none;
  z-index: 1;
}
.skills-right::before{
  top: 0;
  background: linear-gradient(to bottom, var(--page-bg), transparent);
}
.skills-right::after{
  bottom: 0;
  background: linear-gradient(to top, var(--page-bg), transparent);
}

.skills-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;

  /* separación compacta para “ver” prev/next antes */
  gap: clamp(10px, 1.2vw, 16px);
}

/* Estados: por defecto muy difuso; prev/next visibles; activo nítido */
.skill{
  font-weight: 800;
  font-size: clamp(28px, 5vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--muted);
  filter: blur(1.1px);
  opacity: .22;
  transition: opacity .25s ease, filter .25s ease, color .25s ease, transform .25s ease;
}

.skill.is-prev,
.skill.is-next{
  opacity: .55;
  color: color-mix(in oklab, var(--text) 38%, transparent);
  filter: blur(.55px);
}

.skill.is-active{
  color: var(--text);
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Scrollbar sutil */
.skills-right::-webkit-scrollbar{ width: 8px; }
.skills-right::-webkit-scrollbar-thumb{
  background: var(--soft);
  border-radius: 8px;
}

/* Responsive */
@media (max-width: 980px){
  .skills-grid{ grid-template-columns: 1fr; }
  .skills-left{
    position: sticky;
    top: 12px;
    transform: none;
    margin-bottom: 12px;
  }
  .skills-right{ max-height: 70vh; }
}