/* ===== Portfolio (usa únicamente tokens) ===== */
#portfolio{
  isolation:isolate; /* evita overlaps con otras secciones */
}

/* Encabezado */
#portfolio .overline{
  font-family: var(--nc-font-display, Orbitron), Roboto, sans-serif;
  letter-spacing:.25em; text-transform:uppercase; font-weight:700;
  color: var(--nc-accent-strong);
  display:inline-flex; align-items:center; gap:.75rem; font-size:.9rem;
}
#portfolio .overline::after{
  content:""; width:72px; height:3px; border-radius:2px;
  background: var(--nc-accent-primary); display:inline-block;
}
#portfolio .title{
  font-family: var(--nc-font-display, Orbitron), Roboto, sans-serif;
}

/* ===== Carrusel ===== */
#portfolio .carousel,
#portfolio .carousel-inner,
#portfolio .carousel-item{
  overflow: visible; /* permite el glow suave sin recortes */
}
#portfolio .carousel-indicators [data-bs-target]{
  width:.7rem; height:.7rem; border-radius:50%;
  background: color-mix(in srgb, var(--nc-text-light) 50%, transparent);
  border:none; margin:0 .35rem;
  transition: transform .2s ease, background .2s ease;
}
#portfolio .carousel-indicators .active{
  background: var(--nc-accent-primary);
  transform: scale(1.15);
}

/* ===== Card ===== */
#portfolio .nc-card{
  display:flex; flex-direction:column; height:100%;
  background: color-mix(in srgb, var(--nc-bg, var(--nc-bg-dark)) 86%, transparent);
  border:1px solid color-mix(in srgb, var(--nc-accent-primary) 22%, transparent);
  border-radius: var(--nc-radius-xl, 1rem);
  box-shadow: var(--nc-shadow-soft, 0 4px 24px rgba(0,0,0,.25));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#portfolio .nc-card:hover,
#portfolio .nc-card:focus-within{
  transform: translateY(-3px);
  box-shadow: 0 10px 34px color-mix(in srgb, var(--nc-accent-strong) 28%, transparent);
  border-color: color-mix(in srgb, var(--nc-accent-strong) 42%, transparent);
}

/* Imagen superior */
#portfolio .nc-card-img{
  width:100%; height:220px; object-fit:cover; display:block;
  border-top-left-radius: inherit; border-top-right-radius: inherit;
}

/* Tag píldora (sin absolute para evitar encimar) */
#portfolio .nc-tag-wrap{
  display:flex; justify-content:flex-start; padding:.75rem 1rem 0;
}
#portfolio .nc-tag{
  padding:.35rem .6rem; border-radius:999px; font-size:.8rem; font-weight:600;
  background: color-mix(in srgb, var(--nc-accent-primary) 25%, transparent);
  color: var(--nc-text-light); backdrop-filter: blur(6px);
}

/* Barra de acciones */
#portfolio .nc-actions{
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem;
  border-top:1px solid color-mix(in srgb, var(--nc-accent-primary) 18%, transparent);
  background: color-mix(in srgb, var(--nc-bg, var(--nc-bg-dark)) 6%, transparent);
  flex-wrap:wrap;
}
#portfolio .nc-action{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px;
  border:1px solid transparent; background: transparent; color: var(--nc-text);
}
#portfolio .nc-action:focus-visible,
#portfolio .nc-action:hover{
  border-color: color-mix(in srgb, var(--nc-accent-primary) 45%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--nc-accent-primary) 18%, transparent);
  outline:none;
}

/* Cuerpo */
#portfolio .nc-card-body{
  padding:1rem 1rem 1.2rem;
  display:flex; flex-direction:column; gap:.4rem; flex:1 1 auto;
}
#portfolio .nc-title{
  font-family: var(--nc-font-display, Orbitron), Roboto, sans-serif;
  font-weight:800; font-size:1.1rem; line-height:1.25; margin:0;
}
#portfolio .nc-desc{
  font-size:.95rem; color: var(--nc-text-muted, var(--nc-text-light)); margin:0;
}
#portfolio .nc-read{
  margin-top:.25rem; font-weight:700; text-decoration:none;
  color: var(--nc-accent-primary);
}
#portfolio .nc-read:hover, #portfolio .nc-read:focus-visible{
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px;
  outline:none;
}

/* Grid de cada slide: sin encimados */
#portfolio .carousel-item > .row{
  --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem;
  display:flex; flex-wrap:wrap;
}
#portfolio .carousel-item .col{ display:flex; }
#portfolio .carousel-item .col > .nc-card{ width:100%; }

/* Tema claro */
html[data-bs-theme="light"] #portfolio .nc-card{
  background: color-mix(in srgb, var(--nc-bg-light) 92%, transparent);
}
@media (max-width: 480px){
  #portfolio .nc-card-img{ height:180px; }
}
@media (prefers-reduced-motion: reduce){
  #portfolio .nc-card{ transition:none; }
  #portfolio .carousel-indicators [data-bs-target]{ transition:none; }
}