/* ===== About Us (fix sombra + botón neón, solo tokens) ===== */

/* tipografías */
#about .font-display{
  font-family: var(--font-display);
  letter-spacing: .04em;
}

/* overline */
#about .nc-overline{
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .25em;
  font-weight: 700;
  color: var(--morado-2);
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
#about .nc-overline::after{
  content:""; width:72px; height:3px; border-radius:2px;
  display:inline-block; background: var(--morado);
}

/* ===== Card de media ===== */
#about .nc-media{
  position:relative; overflow:hidden;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg-dark-1) 85%, transparent); /* base */
  border: 1px solid transparent;

  /* Sombra visible en dark + anillo tenue (no se pierde) */
  box-shadow:
    0 4px 24px rgba(0,0,0,.35),
    0 0 0 1px color-mix(in srgb, var(--text-light) 10%, transparent);
}
html[data-bs-theme="light"] #about .nc-media{
  background: color-mix(in srgb, var(--off-white) 92%, transparent);
  /* en light la sombra suave */
  box-shadow:
    0 6px 18px rgba(0,0,0,.12),
    0 0 0 1px color-mix(in srgb, var(--text-dark) 8%, transparent);
}
html[data-bs-theme="dark"] #about .nc-media:hover{
  /* glow neón sutil al hover (minimalista) */
  box-shadow:
    0 6px 26px rgba(0,0,0,.45),
    0 0 0 2px color-mix(in srgb, var(--morado-2) 28%, transparent),
    0 0 1rem color-mix(in srgb, var(--morado) 20%, transparent);
}

#about .nc-media img{
  display:block; width:100%; height:auto; object-fit:cover;
  transition: transform .35s ease;
}
#about .nc-media:hover img{ transform: scale(1.02); }

/* ===== Botón “Saber más” en modo neón ===== */
/* Sobrescribe variables de Bootstrap SOLO dentro de #about */
#about .btn.btn-primary{
  --bs-btn-bg: var(--morado);
  --bs-btn-border-color: var(--morado);
  --bs-btn-color: var(--text-light);

  --bs-btn-hover-bg: var(--morado-2);
  --bs-btn-hover-border-color: var(--morado-2);
  --bs-btn-hover-color: var(--text-light);

  --bs-btn-active-bg: var(--morado-2);
  --bs-btn-active-border-color: var(--morado-2);
  --bs-btn-active-color: var(--text-light);

  /* halo neón sutil */
  box-shadow: none;
}
#about .btn.btn-primary:hover{
  box-shadow: 0 0 .6rem rgba(255,0,255,.35), 0 0 1.1rem rgba(138,43,226,.25); /* usa tus tokens de neón */
}
#about .btn.btn-primary:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--morado-2) 60%, transparent);
  outline-offset: 2px;
}

/* Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  #about .nc-media img{ transition: none; }
}