/* ═══════════════════════════════════════════════════
   KNB DEV · NOIR ACID — Sistema de diseño v1
   Dark:  #0c0c0c bg / #e8fe00 accent
   Light: #f4f1ea bg / #c8d800 accent (muted yellow)
   Font:  Space Grotesk + DM Mono
═══════════════════════════════════════════════════ */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ── CSS VARIABLES ── */
:root {
  --na-bg:      #f4f1ea;
  --na-fg:      #111;
  --na-accent:  #9aaa00;
  --na-muted:   #555;
  --na-dim:     #999;
  --na-border:  #d4d0c8;
  --na-card:    #eae7df;
  --na-card2:   #e2ddd6;
  --na-nav:     #111;
  --na-nav-fg:  #f0ede8;
  --na-font:    'Space Grotesk', system-ui, sans-serif;
  --na-mono:    'DM Mono', 'Courier New', monospace;
}

html.dark {
  --na-bg:      #0c0c0c;
  --na-fg:      #f0ede8;
  --na-accent:  #e8fe00;
  --na-muted:   #aaa;
  --na-dim:     #3a3a3a;
  --na-border:  #1e1e1e;
  --na-card:    #0f0f0f;
  --na-card2:   #141414;
  --na-nav:     #0c0c0c;
  --na-nav-fg:  #f0ede8;
}

/* ══════════════════════════════════════
   BASE
══════════════════════════════════════ */
*, *::before, *::after {
  font-family: var(--na-font) !important;
}
code, pre, .na-mono-text {
  font-family: var(--na-mono) !important;
}
body {
  background: var(--na-bg) !important;
  color: var(--na-fg) !important;
  transition: background .35s, color .35s;
}
/* Kill dark gradient from Tailwind */
html.dark body {
  background: var(--na-bg) !important;
  background-image: none !important;
}
::selection {
  background: var(--na-accent);
  color: #0c0c0c;
}

/* ══════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--na-nav); }
::-webkit-scrollbar-thumb { background: var(--na-border); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--na-accent); }

/* ══════════════════════════════════════
   ACCENT: Todos los azules → amarillo ácido
══════════════════════════════════════ */
.text-blue-300, .text-blue-400, .text-blue-500,
.text-blue-600, .text-blue-700 {
  color: var(--na-accent) !important;
}
html.dark .dark\:text-blue-300,
html.dark .dark\:text-blue-400 {
  color: var(--na-accent) !important;
}
.hover\:text-blue-400:hover, .hover\:text-blue-500:hover,
.hover\:text-blue-600:hover, .hover\:text-blue-700:hover {
  color: var(--na-accent) !important;
}
html.dark .dark\:hover\:text-blue-400:hover {
  color: var(--na-accent) !important;
}
/* Link globales */
a { color: inherit; }
a:hover { color: var(--na-accent); }

/* ══════════════════════════════════════
   CTA BUTTONS (pink/red gradient → ácido)
══════════════════════════════════════ */
[class*="from-pink-6"], [class*="from-pink-7"],
[class*="to-red-6"], [class*="to-red-7"] {
  background: var(--na-accent) !important;
  background-image: none !important;
  color: #0c0c0c !important;
  border-radius: 0 !important;
}
[class*="from-pink-6"]:hover, [class*="from-pink-7"]:hover {
  opacity: .88 !important;
}
/* Focus ring */
[class*="focus:ring-blue"] {
  --tw-ring-color: var(--na-accent) !important;
}

/* ══════════════════════════════════════
   BACKGROUNDS (Tailwind overrides)
══════════════════════════════════════ */
.bg-white { background: var(--na-card) !important; }
.bg-gray-100 { background: var(--na-card) !important; }
.bg-gray-300 { background: var(--na-card2) !important; }
html.dark .dark\:bg-gray-700 { background: var(--na-card2) !important; }
html.dark .dark\:bg-gray-800 { background: var(--na-card) !important; }
html.dark .dark\:bg-gray-900 { background: var(--na-nav) !important; }
html.dark .dark\:bg-gray-950 { background: #070707 !important; }
/* Footer */
.bg-gray-100.dark\:bg-gray-900,
footer { background: var(--na-nav) !important; }

/* ══════════════════════════════════════
   TEXT (Tailwind overrides)
══════════════════════════════════════ */
.text-gray-800, .text-gray-900 { color: var(--na-fg) !important; }
html.dark .dark\:text-white { color: var(--na-fg) !important; }
.text-gray-600, .text-gray-700 { color: var(--na-muted) !important; }
html.dark .dark\:text-gray-300 { color: var(--na-muted) !important; }
html.dark .dark\:text-gray-200 { color: var(--na-fg) !important; }
.text-gray-400, .text-gray-500 { color: var(--na-dim) !important; }
html.dark .dark\:text-gray-400 { color: var(--na-muted) !important; }

/* ══════════════════════════════════════
   BORDERS
══════════════════════════════════════ */
.border-gray-200 { border-color: var(--na-border) !important; }
html.dark .dark\:border-gray-700 { border-color: var(--na-border) !important; }

/* ══════════════════════════════════════
   HEADINGS
══════════════════════════════════════ */
h1, h2, h3, h4 {
  color: var(--na-fg) !important;
  letter-spacing: -.01em;
}
h2[data-i18n] {
  font-size: clamp(16px, 2vw, 20px) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--na-border);
  margin-bottom: 24px !important;
}
h2[data-i18n]::after {
  display: none !important;
}

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
#mainNavbar {
  background: transparent !important;
  border-bottom: none !important;
  top: 0 !important;
}
#mainNavbar.shadow-md {
  background: var(--na-nav) !important;
  border-bottom: 1px solid var(--na-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#mainNavbar a,
#mainNavbar .nav-link {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(240,237,232,.5) !important;
  transition: color .2s !important;
}
html:not(.dark) #mainNavbar a,
html:not(.dark) #mainNavbar .nav-link {
  color: rgba(240,237,232,.6) !important;
}
#mainNavbar a:hover,
#mainNavbar .nav-link:hover,
#mainNavbar .nav-link.text-blue-500 {
  color: var(--na-accent) !important;
}

/* Hamburger */
#burgerBtn span {
  background: var(--na-nav-fg) !important;
}

/* Mobile menu */
#mobileMenu {
  background: var(--na-nav) !important;
}
#mobileMenu a {
  color: rgba(240,237,232,.55) !important;
  font-size: 13px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
#mobileMenu a:hover {
  color: var(--na-accent) !important;
}

/* ══════════════════════════════════════
   PROJECT CARDS
══════════════════════════════════════ */
[class*="rounded-2xl"].group {
  background: var(--na-card) !important;
  border-radius: 2px !important;
  border: 1px solid var(--na-border) !important;
}
html.dark [class*="rounded-2xl"].group {
  background: var(--na-card) !important;
}
/* Overlay hover stays black — brand-compatible */

/* Slider arrows */
#prevGridPage, #nextGridPage {
  background: var(--na-card2) !important;
  color: var(--na-fg) !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 0 !important;
}
#prevGridPage:hover, #nextGridPage:hover {
  background: var(--na-accent) !important;
  color: #0c0c0c !important;
  border-color: var(--na-accent) !important;
}

/* Bullets */
#gridBullets button {
  background: var(--na-border) !important;
  border-radius: 0 !important;
  height: 3px !important;
  width: 28px !important;
}
#gridBullets button.bg-blue-500 {
  background: var(--na-accent) !important;
}
#gridBullets button.scale-110 {
  transform: none !important;
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer {
  background: var(--na-nav) !important;
  border-top: 1px solid var(--na-border) !important;
  color: var(--na-muted) !important;
}
footer .text-blue-500,
footer [class*="text-blue"] {
  color: var(--na-accent) !important;
}
footer a:hover { color: var(--na-accent) !important; }

/* ══════════════════════════════════════
   CONTACT FORM
══════════════════════════════════════ */
#contact input,
#contact textarea,
#contact select {
  background: var(--na-card2) !important;
  border: 1px solid var(--na-border) !important;
  color: var(--na-fg) !important;
  border-radius: 2px !important;
}
#contact input:focus,
#contact textarea:focus {
  border-color: var(--na-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(232,254,0,.1) !important;
}
#contact input::placeholder,
#contact textarea::placeholder {
  color: var(--na-dim) !important;
}
/* Send button */
#contact button[type="submit"],
#contact [class*="bg-blue"] {
  background: var(--na-accent) !important;
  color: #0c0c0c !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
#contact button[type="submit"]:hover,
#contact [class*="bg-blue"]:hover {
  opacity: .88 !important;
}
/* Captcha & step indicators */
#contact [class*="text-blue"] { color: var(--na-accent) !important; }
#contact [class*="bg-blue"] { background: var(--na-accent) !important; color: #0c0c0c !important; }

/* ══════════════════════════════════════
   ACCESSIBILITY PANEL
══════════════════════════════════════ */
#accessibility-panel {
  background: var(--na-card2) !important;
  border: 1px solid var(--na-border) !important;
  color: var(--na-fg) !important;
  border-radius: 2px !important;
}
#accessibility-panel * { color: var(--na-fg) !important; }
#accessibility-panel button,
#accessibility-panel [class*="bg-blue"] {
  background: var(--na-accent) !important;
  color: #0c0c0c !important;
  border-radius: 0 !important;
}
/* Accessibility tooltip button */
[title="Accesibilidad"],
[title="Accessibility"] {
  background: var(--na-nav) !important;
  color: var(--na-accent) !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 0 !important;
}

/* ══════════════════════════════════════
   MODALS (Project, Legal, Under construction)
══════════════════════════════════════ */
[class*="fixed"][class*="inset-0"] > div,
[class*="fixed"][class*="z-["] > div {
  background: var(--na-card) !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 2px !important;
}
[class*="fixed"][class*="inset-0"] h2,
[class*="fixed"][class*="inset-0"] h3 {
  color: var(--na-fg) !important;
}
[class*="fixed"][class*="inset-0"] [class*="bg-blue"],
[class*="fixed"][class*="z-["] [class*="bg-blue"] {
  background: var(--na-accent) !important;
  color: #0c0c0c !important;
}
/* Close button */
[class*="fixed"] button[class*="text-gray"] {
  color: var(--na-muted) !important;
}
[class*="fixed"] button[class*="text-gray"]:hover {
  color: var(--na-accent) !important;
}

/* ══════════════════════════════════════
   CV SECTION
══════════════════════════════════════ */
#cv [class*="bg-white"],
#cv [class*="bg-gray"] {
  background: var(--na-card) !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 2px !important;
}
#cv [class*="text-blue"] { color: var(--na-accent) !important; }
#cv a { color: var(--na-accent) !important; }
#cv a:hover { opacity: .8; }

/* ══════════════════════════════════════
   SOFT SKILLS
══════════════════════════════════════ */
#softskills-loader [class*="bg-blue"],
#softskills-loader button.bg-blue-500,
#softskills-loader [class*="ring-blue"] {
  background: var(--na-accent) !important;
  color: #0c0c0c !important;
}
#softskills-loader button {
  border-radius: 2px !important;
}
#softskills-loader [class*="text-blue"] {
  color: var(--na-accent) !important;
}

/* ══════════════════════════════════════
   CREATIVE SECTION
══════════════════════════════════════ */
#creative [class*="bg-white"],
#creative [class*="bg-gray"] {
  background: var(--na-card) !important;
  border: 1px solid var(--na-border) !important;
  border-radius: 2px !important;
}
#creative [class*="text-blue"] { color: var(--na-accent) !important; }

/* ══════════════════════════════════════
   MARQUEE (strips de tecnologías)
══════════════════════════════════════ */
.animate-marquee span:not(.ms) {
  color: var(--na-muted) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  font-family: var(--na-font) !important;
}
.animate-marquee {
  color: var(--na-muted) !important;
}

/* ══════════════════════════════════════
   CLASES CUSTOM NA-* (usadas en nuevos componentes)
══════════════════════════════════════ */

/* Hero label (eyebrow) */
.na-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--na-accent);
  margin-bottom: 18px;
}
.na-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--na-accent);
  flex-shrink: 0;
}

/* Display headings */
.na-h1 {
  font-size: clamp(40px, 7.5vw, 92px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: var(--na-fg);
}
.na-h1 em {
  font-style: normal;
  color: var(--na-accent);
}

/* Subtitles */
.na-subtitle {
  font-size: 15px;
  font-weight: 400;
  color: var(--na-muted);
  line-height: 1.76;
  max-width: 520px;
}

/* Availability indicator */
.na-avail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--na-accent);
}
.na-avail-dot {
  width: 7px;
  height: 7px;
  background: var(--na-accent);
  border-radius: 50%;
  flex-shrink: 0;
  animation: na-pulse 2s infinite;
}
@keyframes na-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(232,254,0,.6); }
  50%      { box-shadow: 0 0 0 7px rgba(232,254,0,0); }
}
html:not(.dark) .na-avail-dot {
  animation: na-pulse-light 2s infinite;
}
@keyframes na-pulse-light {
  0%,100% { box-shadow: 0 0 0 0 rgba(100,110,0,.5); }
  50%      { box-shadow: 0 0 0 6px rgba(100,110,0,0); }
}

/* CTA button */
.na-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  background: var(--na-accent);
  color: #0c0c0c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  outline: none;
  transition: transform .2s, box-shadow .2s, opacity .2s;
  text-decoration: none;
  font-family: var(--na-font);
}
.na-cta:hover {
  transform: translate(-3px,-3px);
  box-shadow: 3px 3px 0 rgba(232,254,0,.25);
  color: #0c0c0c;
  opacity: 1;
}
.na-cta-arrow {
  font-size: 15px;
  transition: transform .18s;
  display: inline-block;
}
.na-cta:hover .na-cta-arrow { transform: translateX(4px); }

/* Ghost/secondary button */
.na-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border: 1px solid var(--na-border);
  color: var(--na-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  outline: none;
  transition: border-color .2s, color .2s;
  text-decoration: none;
  font-family: var(--na-font);
}
.na-ghost:hover {
  border-color: var(--na-accent);
  color: var(--na-accent);
}

/* Intro paragraphs */
.na-p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--na-muted);
  font-weight: 400;
}
.na-p strong, .na-p b {
  color: var(--na-fg);
  font-weight: 600;
}
.na-p em {
  color: var(--na-accent);
  font-style: normal;
}
.na-p a {
  color: var(--na-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s;
}
.na-p a:hover { opacity: .78; }

/* Section label (monospace eyebrow) */
.na-label {
  font-family: var(--na-mono) !important;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--na-dim);
  display: block;
  margin-bottom: 14px;
}

/* Tag chips */
.na-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid rgba(232,254,0,.28);
  color: var(--na-accent);
}
html:not(.dark) .na-tag {
  border-color: rgba(90,100,0,.28);
}

/* Accordion button */
.na-accordion-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  background: var(--na-card2);
  border: 1px solid var(--na-border);
  color: var(--na-fg);
  cursor: pointer;
  transition: border-color .25s, background .25s;
  text-align: left;
  font-family: var(--na-font);
}
.na-accordion-btn:hover {
  border-color: rgba(232,254,0,.3);
}
.na-accordion-eyebrow {
  font-family: var(--na-mono) !important;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--na-accent);
  display: block;
  margin-bottom: 5px;
}
.na-accordion-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--na-fg);
  letter-spacing: -.01em;
}
.na-accordion-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--na-accent);
  transition: transform .3s;
}
.na-accordion-chevron.open {
  transform: rotate(180deg);
}

/* Looking-for content (inside accordion) */
.na-looking p {
  font-size: 14px;
  line-height: 1.88;
  color: var(--na-muted);
  padding: 0 !important;
}
.na-looking p + p {
  margin-top: 16px;
}
.na-looking strong, .na-looking b {
  color: var(--na-fg);
  font-weight: 600;
}
.na-looking em {
  color: var(--na-accent);
  font-style: normal;
}

/* Closing italic */
.na-closing {
  text-align: center;
  font-size: 13px;
  color: var(--na-dim);
  font-style: italic;
  max-width: 580px;
  margin: 56px auto 0;
  padding: 0 16px;
  border-top: 1px solid var(--na-border);
  padding-top: 28px;
}

/* Intro divider line */
.na-divider {
  height: 1px;
  background: var(--na-border);
  margin: 40px 0;
}

/* Stat block */
.na-stat-n {
  font-size: 26px;
  font-weight: 700;
  color: var(--na-accent);
  line-height: 1;
}
.na-stat-l {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--na-dim);
  margin-top: 3px;
}

/* Grayscale photo — hover desaturates */
.na-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter .7s ease;
}
.na-photo:hover {
  filter: grayscale(0) contrast(1);
}

/* Photo wrapper */
.na-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  border: 1px solid var(--na-border);
}
.na-photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(232,254,0,.04) 100%);
  pointer-events: none;
}