/* ═══════════════════════════════════════════════════════════════
   NOSOTROS — Redesign completo
   BioCivil M&M S.A.S.
   Prefijo: ns-  (no colisiona con main.css ni metallic-index.css)
═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   1. HERO — Split foto (izq) / texto (der) — compacto, único
   ────────────────────────────────────────────────────────────── */
.ns-hero {
  position: relative;
  width: 100%;
  height: 76vh;
  min-height: 500px;
  max-height: 780px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 45% 55%;
}

/* ─── Panel izquierdo: foto ──────────────────────────────── */
.ns-hero-photo-panel {
  position: relative;
  overflow: hidden;
}

.ns-hero-photo-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(10%) contrast(1.06) brightness(0.90);
  display: block;
}

/* Fade hacia la derecha para mezclar con el panel oscuro */
.ns-hero-photo-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      transparent 40%,
      oklch(5.5% 0.03 255 / 0.65) 72%,
      oklch(5.5% 0.03 255) 100%),
    linear-gradient(to bottom,
      oklch(5.5% 0.03 255 / 0.50) 0%,
      transparent 16%,
      transparent 80%,
      oklch(5.5% 0.03 255 / 0.65) 100%);
}

/* ─── Panel derecho: texto ───────────────────────────────── */
.ns-hero-text-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(90px + 3rem) 9% 4.5rem 5%;
  background: oklch(5.5% 0.03 255);
  z-index: 1;
}

/* Blueprint grid sutil sólo en el panel de texto */
.ns-hero-text-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(oklch(100% 0 0 / 0.032) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / 0.032) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}

.ns-hero-text-panel > * {
  position: relative;
  z-index: 1;
}

/* Eyebrow */
.ns-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: oklch(54% 0.23 146);
  margin-bottom: 1.6rem;
  animation: nsSlideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.ns-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  flex-shrink: 0;
  background: linear-gradient(90deg, transparent, oklch(54% 0.23 146));
}

/* Hero headline */
.ns-hero-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2.5rem, 4.2vw, 5.2rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.04em;
  margin: 0 0 2rem;
  color: #fff;
}

.ns-hero-title .ns-line {
  display: block;
  animation: nsSlideUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
  overflow: hidden;
}
.ns-hero-title .ns-line:nth-child(1) { animation-delay: 0.18s; }
.ns-hero-title .ns-line:nth-child(2) { animation-delay: 0.30s; }
.ns-hero-title .ns-line:nth-child(3) { animation-delay: 0.42s; }

.ns-line--accent {
  background: linear-gradient(
    135deg,
    oklch(40% 0.19 143)  0%,
    oklch(68% 0.27 149) 32%,
    oklch(52% 0.22 146) 55%,
    oklch(70% 0.26 150) 74%,
    oklch(42% 0.19 143) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes nsSlideUp {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sub */
.ns-hero-sub {
  font-size: clamp(0.97rem, 1.4vw, 1.12rem);
  color: oklch(72% 0.018 240);
  line-height: 1.72;
  max-width: 500px;
  margin-bottom: 2.4rem;
  animation: nsSlideUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.52s both;
}

.ns-hero-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  animation: nsSlideUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.62s both;
}

/* Right panel — floating stats constellation */
.ns-hero-right {
  position: relative;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Concentric decorative rings */
.ns-rings {
  position: absolute;
  width: 320px;
  height: 320px;
  pointer-events: none;
}

.ns-ring {
  position: absolute;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.ns-ring--1 {
  width: 100%;
  height: 100%;
  border: 1px solid oklch(52% 0.22 145 / 0.18);
  animation: nsRingPulse 5s ease-in-out infinite;
}
.ns-ring--2 {
  width: 72%;
  height: 72%;
  border: 1px solid oklch(52% 0.22 145 / 0.12);
  animation: nsRingPulse 5s ease-in-out 0.6s infinite;
}
.ns-ring--3 {
  width: 44%;
  height: 44%;
  border: 1px dashed oklch(52% 0.22 145 / 0.22);
  animation: nsRingSpin 24s linear infinite;
}
.ns-ring--4 {
  width: 86%;
  height: 86%;
  border: 1px solid oklch(28% 0.16 220 / 0.12);
  animation: nsRingSpin 40s linear infinite reverse;
}

/* Small dot on the spinning ring */
.ns-ring--3::before {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: oklch(64% 0.26 148);
  top: -3.5px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px oklch(64% 0.26 148 / 0.7);
}

@keyframes nsRingPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@keyframes nsRingSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Center glow */
.ns-rings-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle,
    oklch(52% 0.22 145 / 0.20) 0%,
    oklch(52% 0.22 145 / 0.06) 55%,
    transparent 75%
  );
}

/* Floating stat cards */
.ns-stat-float {
  position: absolute;
  background: oklch(100% 0 0 / 0.055);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid oklch(100% 0 0 / 0.10);
  border-radius: 16px;
  padding: 1.2rem 1.6rem;
  text-align: center;
  z-index: 2;
  min-width: 120px;
}

/* Gradient border on stat cards */
.ns-stat-float::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    oklch(100% 0 0 / 0.05),
    oklch(100% 0 0 / 0.20) 40%,
    oklch(60% 0.24 148 / 0.30) 65%,
    oklch(100% 0 0 / 0.06)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

.ns-stat-float--1 {
  top: 14px;
  left: 0;
  animation: nsStatIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both, nsFloat1 6s ease-in-out 1.5s infinite;
}
.ns-stat-float--2 {
  bottom: 50px;
  right: 0;
  animation: nsStatIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.80s both, nsFloat2 7.5s ease-in-out 1.5s infinite;
}
.ns-stat-float--3 {
  bottom: 14px;
  left: 38px;
  animation: nsStatIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.95s both, nsFloat3 8s ease-in-out 1.5s infinite;
}

@keyframes nsStatIn {
  from { opacity: 0; transform: translateY(22px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes nsFloat1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes nsFloat2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes nsFloat3 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}

.ns-stat-num {
  font-family: 'Sora', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg,
    oklch(42% 0.19 143), oklch(68% 0.27 149) 50%, oklch(44% 0.19 143)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ns-stat-num .ns-stat-plus {
  font-size: 1.6rem;
  -webkit-text-fill-color: oklch(66% 0.25 148);
  color: oklch(66% 0.25 148);
}

.ns-stat-label {
  font-size: 0.69rem;
  color: oklch(62% 0.018 240);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  margin-top: 0.3rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Scroll indicator */
.ns-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
  animation: nsSlideUp 0.7s ease 1.2s both;
}

.ns-scroll-hint span {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: oklch(55% 0.02 240);
}

.ns-scroll-bar {
  width: 1px;
  height: 44px;
  overflow: hidden;
  position: relative;
}

.ns-scroll-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, oklch(54% 0.23 146), transparent);
  animation: nsScrollPulse 2.2s ease-in-out infinite;
}

@keyframes nsScrollPulse {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}

/* Corner brackets (like CTA section) */
.ns-corner {
  position: absolute;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 1;
}
.ns-corner--tl { top: 5.5rem; left: 5%;  border-top:  1px solid oklch(52% 0.22 145 / 0.32); border-left:  1px solid oklch(52% 0.22 145 / 0.32); }
.ns-corner--tr { top: 5.5rem; right: 5%; border-top:  1px solid oklch(28% 0.14 220 / 0.25); border-right: 1px solid oklch(28% 0.14 220 / 0.25); }
.ns-corner--bl { bottom: 2rem; left: 5%; border-bottom: 1px solid oklch(28% 0.14 220 / 0.22); border-left: 1px solid oklch(28% 0.14 220 / 0.22); }
.ns-corner--br { bottom: 2rem; right: 5%; border-bottom: 1px solid oklch(52% 0.22 145 / 0.28); border-right: 1px solid oklch(52% 0.22 145 / 0.28); }


/* ──────────────────────────────────────────────────────────────
   2. MANIFIESTO — Cita grande + línea de tiempo
   ────────────────────────────────────────────────────────────── */
.ns-manifesto {
  position: relative;
  background:
    radial-gradient(ellipse 65% 80% at 50% 40%, oklch(16% 0.08 250 / 0.9) 0%, transparent 60%),
    oklch(4% 0.02 252);
  padding: 8rem 5%;
  text-align: center;
  overflow: hidden;
}

.ns-manifesto::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(oklch(100% 0 0 / 0.03) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

/* Top glow line */
.ns-manifesto::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    oklch(52% 0.22 145 / 0.50) 30%,
    oklch(70% 0.28 150 / 0.80) 50%,
    oklch(52% 0.22 145 / 0.50) 70%,
    transparent
  );
}

.ns-manifesto-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto 5rem;
}

.ns-manifesto-quote-mark {
  font-family: 'Sora', sans-serif;
  font-size: clamp(6rem, 10vw, 12rem);
  font-weight: 800;
  line-height: 0.6;
  color: oklch(52% 0.22 145 / 0.20);
  display: block;
  margin-bottom: 1rem;
  user-select: none;
}

.ns-manifesto-text {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.8rem, 3.8vw, 4rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 2rem;
  border: none;
}

.ns-manifesto-text em {
  font-style: normal;
  background: linear-gradient(
    135deg,
    oklch(42% 0.19 143)  0%,
    oklch(68% 0.27 149) 35%,
    oklch(52% 0.22 146) 55%,
    oklch(70% 0.26 150) 75%,
    oklch(44% 0.19 143) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ns-manifesto-author {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(48% 0.02 240);
  font-weight: 600;
}

/* ─── Timeline ─────────────────────────────────────────────── */
.ns-timeline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  max-width: 860px;
  margin: 0 auto;
}

.ns-tl-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  max-width: 180px;
}

.ns-tl-year {
  font-family: 'Sora', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: oklch(55% 0.02 240);
  letter-spacing: -0.02em;
}

.ns-tl-item--now .ns-tl-year {
  color: oklch(66% 0.26 148);
}

.ns-tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: oklch(30% 0.06 248);
  border: 2px solid oklch(40% 0.08 248);
  flex-shrink: 0;
  position: relative;
}

.ns-tl-item--now .ns-tl-dot {
  background: oklch(54% 0.24 148);
  border-color: oklch(66% 0.26 148);
  box-shadow: 0 0 14px oklch(54% 0.24 148 / 0.70);
  animation: nsDotPulse 2.5s ease-in-out infinite;
}

@keyframes nsDotPulse {
  0%, 100% { box-shadow: 0 0 10px oklch(54% 0.24 148 / 0.55); }
  50% { box-shadow: 0 0 22px oklch(54% 0.24 148 / 0.90); }
}

.ns-tl-label {
  font-size: 0.73rem;
  color: oklch(52% 0.02 240);
  text-align: center;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.ns-tl-item--now .ns-tl-label {
  color: oklch(70% 0.04 200);
}

/* Connecting lines between dots */
.ns-tl-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, oklch(28% 0.06 248), oklch(36% 0.08 250));
  align-self: center;
  margin-top: -14px; /* align with dot */
  position: relative;
  top: -3px;
}

.ns-tl-line--active {
  background: linear-gradient(90deg, oklch(36% 0.08 250), oklch(54% 0.24 148));
}


/* ──────────────────────────────────────────────────────────────
   3. DOS DISCIPLINAS — Split dramático
   ────────────────────────────────────────────────────────────── */
.ns-split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  min-height: 80vh;
  position: relative;
  overflow: hidden;
}

.ns-split-panel {
  position: relative;
  padding: 7rem 6%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  transition: background 0.5s ease;
}

.ns-split-panel--civil {
  background: oklch(7% 0.03 252);
}

.ns-split-panel--civil::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/servicios-civil-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  transition: opacity 0.5s ease;
  z-index: 0;
}

.ns-split-panel--civil:hover::before {
  opacity: 0.32;
}

/* Dark overlay for readability */
.ns-split-panel--civil::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 90% at 50% 50%, oklch(8% 0.04 252 / 0.72) 0%, oklch(8% 0.04 252 / 0.50) 100%);
  z-index: 0;
  pointer-events: none;
}

.ns-split-panel--ambiental {
  background: oklch(6% 0.04 145);
}

.ns-split-panel--ambiental::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/servicios-ambiental-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  transition: opacity 0.5s ease;
  z-index: 0;
}

.ns-split-panel--ambiental:hover::before {
  opacity: 0.32;
}

/* Dark green overlay for readability */
.ns-split-panel--ambiental::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 90% at 50% 50%, oklch(7% 0.05 145 / 0.72) 0%, oklch(7% 0.05 145 / 0.50) 100%);
  z-index: 0;
  pointer-events: none;
}

/* Content wrapper — por encima de imagen y overlay */
.ns-split-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Large background number */
.ns-split-bg-num {
  position: absolute;
  right: -3%;
  bottom: -8%;
  font-family: 'Sora', sans-serif;
  font-size: clamp(120px, 16vw, 240px);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
  z-index: 1;
}

.ns-split-panel--civil .ns-split-bg-num {
  color: oklch(100% 0 0 / 0.04);
}

.ns-split-panel--ambiental .ns-split-bg-num {
  right: auto;
  left: -3%;
  color: oklch(52% 0.22 145 / 0.07);
}

/* Discipline number */
.ns-disc-num {
  font-family: 'Sora', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 1.8rem;
}

.ns-split-panel--civil .ns-disc-num {
  color: oklch(55% 0.04 240);
}
.ns-split-panel--ambiental .ns-disc-num {
  color: oklch(54% 0.23 146);
}

/* Icon circle */
.ns-disc-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.8rem;
  flex-shrink: 0;
}

.ns-split-panel--civil .ns-disc-icon {
  background: oklch(100% 0 0 / 0.08);
  border: 1px solid oklch(100% 0 0 / 0.12);
  color: oklch(78% 0.02 240);
}

.ns-split-panel--ambiental .ns-disc-icon {
  background: oklch(52% 0.22 145 / 0.18);
  border: 1px solid oklch(52% 0.22 145 / 0.30);
  color: oklch(68% 0.25 148);
}

/* Discipline title */
.ns-disc-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.8rem, 2.8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 1.4rem;
}

.ns-split-panel--civil .ns-disc-title {
  color: #fff;
}

.ns-split-panel--ambiental .ns-disc-title {
  background: linear-gradient(
    135deg,
    oklch(50% 0.21 145),
    oklch(72% 0.28 150) 45%,
    oklch(54% 0.22 146) 60%,
    oklch(74% 0.27 151) 80%,
    oklch(48% 0.20 144)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ns-disc-desc {
  font-size: 0.98rem;
  color: oklch(70% 0.018 240);
  line-height: 1.75;
  max-width: 440px;
  margin-bottom: 2rem;
}

/* Specialty chips */
.ns-disc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
}

.ns-disc-chip {
  padding: 0.35rem 0.9rem;
  border-radius: 100px;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.ns-split-panel--civil .ns-disc-chip {
  background: oklch(100% 0 0 / 0.07);
  border: 1px solid oklch(100% 0 0 / 0.12);
  color: oklch(75% 0.02 240);
}

.ns-split-panel--ambiental .ns-disc-chip {
  background: oklch(52% 0.22 145 / 0.14);
  border: 1px solid oklch(52% 0.22 145 / 0.25);
  color: oklch(72% 0.24 148);
}

/* Vertical divider */
.ns-split-divider {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    oklch(52% 0.22 145 / 0.20) 20%,
    oklch(66% 0.26 148 / 0.50) 50%,
    oklch(52% 0.22 145 / 0.20) 80%,
    transparent 100%
  );
  width: 1px;
  align-self: stretch;
}


/* ──────────────────────────────────────────────────────────────
   4. MISIÓN & VISIÓN
   ────────────────────────────────────────────────────────────── */
.ns-mv {
  position: relative;
  padding: 7rem 5%;
  background:
    radial-gradient(ellipse 90% 60% at 50% 50%, oklch(12% 0.05 252 / 0.8) 0%, transparent 65%),
    oklch(5% 0.028 253);
  overflow: hidden;
}

.ns-mv::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(oklch(100% 0 0 / 0.03) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

.ns-mv-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
}

.ns-mv-eyebrow {
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: oklch(54% 0.23 146);
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.ns-mv-eyebrow::before,
.ns-mv-eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: oklch(54% 0.23 146 / 0.5);
}

.ns-mv-heading {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  margin: 0;
}

/* Cards grid */
.ns-mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.ns-mv-card {
  position: relative;
  border-radius: 24px;
  padding: 3rem;
  overflow: hidden;
  border: 1px solid transparent;
}

/* Gradient border */
.ns-mv-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    145deg,
    oklch(100% 0 0 / 0.04),
    oklch(100% 0 0 / 0.18) 30%,
    oklch(64% 0.25 148 / 0.32) 58%,
    oklch(100% 0 0 / 0.08) 80%,
    oklch(100% 0 0 / 0.03)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

.ns-mv-card--mision {
  background:
    radial-gradient(ellipse 80% 70% at 10% 90%, oklch(22% 0.14 145 / 0.25) 0%, transparent 60%),
    oklch(9% 0.04 252 / 0.9);
}

.ns-mv-card--vision {
  background:
    radial-gradient(ellipse 80% 70% at 90% 10%, oklch(18% 0.10 252 / 0.35) 0%, transparent 60%),
    oklch(9% 0.04 252 / 0.9);
}

/* Large background word */
.ns-mv-card::after {
  content: attr(data-label);
  position: absolute;
  bottom: -0.2em;
  right: -0.1em;
  font-family: 'Sora', sans-serif;
  font-size: clamp(60px, 9vw, 130px);
  font-weight: 800;
  line-height: 1;
  color: oklch(100% 0 0 / 0.03);
  pointer-events: none;
  letter-spacing: -0.04em;
  user-select: none;
}

/* Card icon */
.ns-mv-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: oklch(52% 0.22 145 / 0.15);
  border: 1px solid oklch(52% 0.22 145 / 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(66% 0.25 148);
  margin-bottom: 1.8rem;
}

.ns-mv-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: oklch(54% 0.23 146);
  margin-bottom: 0.7rem;
}

.ns-mv-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
  line-height: 1.2;
}

.ns-mv-text {
  font-size: 0.95rem;
  color: oklch(68% 0.016 240);
  line-height: 1.78;
}


/* ──────────────────────────────────────────────────────────────
   5. VALORES — Grid asimétrico con números grandes
   ────────────────────────────────────────────────────────────── */
.ns-valores {
  position: relative;
  padding: 8rem 5%;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      oklch(0% 0 0 / 0.012) 1px,
      transparent 2px
    ),
    linear-gradient(
      150deg,
      oklch(96.5% 0.004 232)  0%,
      oklch(100%  0     0)    30%,
      oklch(98%   0.003 145)  58%,
      oklch(99.5% 0.001 0)    78%,
      oklch(96%   0.004 228) 100%
    );
  overflow: hidden;
}

.ns-valores-header {
  text-align: center;
  margin-bottom: 4.5rem;
  position: relative;
  z-index: 1;
}

.ns-val-eyebrow {
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: oklch(44% 0.20 144);
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.ns-val-eyebrow::before,
.ns-val-eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: oklch(50% 0.20 144 / 0.4);
}

.ns-val-heading {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  font-weight: 800;
  color: oklch(14% 0.06 252);
  letter-spacing: -0.03em;
  margin: 0 0 0.9rem;
}

.ns-val-sub {
  font-size: 1rem;
  color: oklch(38% 0.02 240);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Values grid — Bento-box style */
.ns-val-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 1.4rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.ns-val-card {
  position: relative;
  background: #fff;
  border: 1px solid oklch(0% 0 0 / 0.07);
  border-radius: 20px;
  padding: 2.4rem 2.2rem;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s ease;
}

.ns-val-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px oklch(0% 0 0 / 0.10), 0 0 0 1px oklch(52% 0.22 145 / 0.15);
  border-color: oklch(52% 0.22 145 / 0.25);
}

/* Large decorative number in background */
.ns-val-card::before {
  content: attr(data-num);
  position: absolute;
  right: -0.1em;
  bottom: -0.25em;
  font-family: 'Sora', sans-serif;
  font-size: 7rem;
  font-weight: 800;
  line-height: 1;
  color: oklch(52% 0.22 145 / 0.055);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
}

/* Accent top bar */
.ns-val-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    oklch(42% 0.19 143),
    oklch(68% 0.27 149) 50%,
    oklch(42% 0.19 143)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ns-val-card:hover::after {
  opacity: 1;
}

.ns-val-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: oklch(52% 0.22 145 / 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.4rem;
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.ns-val-card:hover .ns-val-icon {
  background: oklch(52% 0.22 145 / 0.14);
}

.ns-val-icon svg {
  width: 22px;
  height: 22px;
  stroke: oklch(46% 0.20 144);
}

.ns-val-title {
  font-family: 'Sora', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: oklch(14% 0.06 252);
  letter-spacing: -0.02em;
  margin-bottom: 0.65rem;
}

.ns-val-desc {
  font-size: 0.87rem;
  color: oklch(40% 0.015 240);
  line-height: 1.72;
  position: relative;
  z-index: 1;
}

/* Featured first card — spans 2 rows */
.ns-val-card--featured {
  grid-row: span 2;
  background:
    radial-gradient(ellipse 80% 60% at 20% 90%, oklch(20% 0.12 145 / 0.18) 0%, transparent 60%),
    oklch(8% 0.04 252);
  border-color: oklch(100% 0 0 / 0.08);
  color: #fff;
}

.ns-val-card--featured::before {
  color: oklch(52% 0.22 145 / 0.09);
  font-size: 9rem;
}

.ns-val-card--featured:hover {
  box-shadow: 0 20px 50px oklch(0% 0 0 / 0.35), 0 0 0 1px oklch(52% 0.22 145 / 0.30);
  border-color: oklch(52% 0.22 145 / 0.35);
}

.ns-val-card--featured .ns-val-icon {
  background: oklch(52% 0.22 145 / 0.18);
  border: 1px solid oklch(52% 0.22 145 / 0.30);
}

.ns-val-card--featured .ns-val-icon svg {
  stroke: oklch(68% 0.25 148);
}

.ns-val-card--featured .ns-val-title {
  color: #fff;
  font-size: 1.35rem;
}

.ns-val-card--featured .ns-val-desc {
  color: oklch(72% 0.018 240);
}


/* ──────────────────────────────────────────────────────────────
   6. CTA FIX — "Ver servicios" en nosotros también
   ────────────────────────────────────────────────────────────── */
/* Already handled by btn-outline-white class in main.css */


/* ──────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Hero: apila foto encima del texto en tablet */
  .ns-hero {
    grid-template-columns: 1fr;
    grid-template-rows: 260px 1fr;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .ns-hero-photo-panel::after {
    background:
      linear-gradient(to bottom,
        transparent 45%,
        oklch(5.5% 0.03 255 / 0.65) 78%,
        oklch(5.5% 0.03 255) 100%);
  }
  .ns-hero-text-panel {
    padding: 2.5rem 6% 4rem;
  }

  .ns-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1px auto;
  }
  .ns-split-panel { padding: 5rem 6%; }
  .ns-split-divider {
    width: auto;
    height: 1px;
    background: linear-gradient(to right,
      transparent,
      oklch(52% 0.22 145 / 0.30) 20%,
      oklch(66% 0.26 148 / 0.50) 50%,
      oklch(52% 0.22 145 / 0.30) 80%,
      transparent
    );
    align-self: auto;
  }
  .ns-split-panel--ambiental .ns-split-bg-num { left: auto; right: -3%; }

  .ns-mv-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ns-manifesto { padding: 5rem 5%; }
  .ns-manifesto-quote-mark { font-size: clamp(4rem, 14vw, 8rem); }

  .ns-timeline {
    flex-wrap: wrap;
    gap: 2rem;
  }
  .ns-tl-line { display: none; }
  .ns-tl-item { min-width: 120px; }

  .ns-mv { padding: 5rem 5%; }
  .ns-mv-card { padding: 2.2rem 1.8rem; }

  .ns-valores { padding: 5rem 5%; }
  .ns-val-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ns-val-card--featured {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media (max-width: 500px) {
  .ns-hero-title { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .ns-hero-text-panel { padding: 2rem 5% 3.5rem; }
  .ns-val-grid { grid-template-columns: 1fr; }
}


/* ──────────────────────────────────────────────────────────────
   MEJORA 1: FOTO DEL EQUIPO EN EL HERO
   ────────────────────────────────────────────────────────────── */
.ns-hero-photo {
  position: absolute;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  overflow: hidden;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.ns-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(18%) contrast(1.05);
}

/* Dark vignette over photo */
.ns-hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle,
    oklch(6% 0.03 252 / 0.38) 0%,
    oklch(6% 0.03 252 / 0.62) 65%,
    oklch(6% 0.03 252 / 0.82) 100%
  );
}

/* Green metallic ring framing the photo */
.ns-hero-photo-ring {
  position: absolute;
  width: 278px;
  height: 278px;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  background: conic-gradient(
    from 160deg,
    oklch(52% 0.22 145 / 0.60),
    oklch(70% 0.28 150 / 0.90) 25%,
    oklch(46% 0.20 144 / 0.40) 55%,
    oklch(68% 0.26 148 / 0.70) 78%,
    oklch(52% 0.22 145 / 0.60)
  );
  -webkit-mask:
    radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));
  animation: nsRingSpin 12s linear infinite;
}

@media (max-width: 1024px) {
  .ns-hero-photo { width: 200px; height: 200px; }
  .ns-hero-photo-ring { width: 207px; height: 207px; }
}


/* ──────────────────────────────────────────────────────────────
   MEJORA 2: CONTADORES ANIMADOS
   ────────────────────────────────────────────────────────────── */
.ns-counter {
  display: inline;
}

/* "+" suffix keeps its color after counter runs */
.ns-stat-num .ns-stat-plus {
  display: inline;
}


/* ──────────────────────────────────────────────────────────────
   MEJORA 3: ¿POR QUÉ BIOCIVIL? — 4 diferenciadores
   ────────────────────────────────────────────────────────────── */
.ns-porque {
  position: relative;
  padding: 8rem 5%;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, oklch(14% 0.06 252 / 0.7) 0%, transparent 65%),
    oklch(6.5% 0.032 253);
  overflow: hidden;
}

.ns-porque::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(oklch(100% 0 0 / 0.032) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / 0.032) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

/* Green line top */
.ns-porque::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    oklch(52% 0.22 145 / 0.40) 30%,
    oklch(68% 0.26 150 / 0.70) 50%,
    oklch(52% 0.22 145 / 0.40) 70%,
    transparent
  );
}

.ns-pq-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
}

.ns-pq-eyebrow {
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: oklch(54% 0.23 146);
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.ns-pq-eyebrow::before,
.ns-pq-eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: oklch(54% 0.23 146 / 0.5);
}

.ns-pq-heading {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  margin: 0;
}

/* 4-card grid */
.ns-pq-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.ns-pq-card {
  position: relative;
  border-radius: 20px;
  padding: 2.4rem 2rem;
  background: oklch(100% 0 0 / 0.04);
  border: 1px solid oklch(100% 0 0 / 0.08);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease,
              background 0.35s ease;
}

.ns-pq-card:hover {
  transform: translateY(-6px);
  border-color: oklch(52% 0.22 145 / 0.30);
  background: oklch(100% 0 0 / 0.07);
}

/* Gradient border on hover */
.ns-pq-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    145deg,
    oklch(100% 0 0 / 0.00),
    oklch(64% 0.24 148 / 0.00) 50%,
    oklch(100% 0 0 / 0.00)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  transition: background 0.35s ease;
}

.ns-pq-card:hover::before {
  background: linear-gradient(
    145deg,
    oklch(100% 0 0 / 0.05),
    oklch(64% 0.24 148 / 0.45) 50%,
    oklch(100% 0 0 / 0.05)
  );
}

/* Large bg number */
.ns-pq-card::after {
  content: attr(data-num);
  position: absolute;
  right: -0.12em;
  bottom: -0.28em;
  font-family: 'Sora', sans-serif;
  font-size: 6.5rem;
  font-weight: 800;
  line-height: 1;
  color: oklch(52% 0.22 145 / 0.06);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
}

.ns-pq-icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: oklch(52% 0.22 145 / 0.14);
  border: 1px solid oklch(52% 0.22 145 / 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(66% 0.25 148);
  margin-bottom: 1.6rem;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.ns-pq-card:hover .ns-pq-icon {
  background: oklch(52% 0.22 145 / 0.22);
  border-color: oklch(52% 0.22 145 / 0.40);
}

.ns-pq-title {
  font-family: 'Sora', sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  line-height: 1.25;
}

.ns-pq-desc {
  font-size: 0.88rem;
  color: oklch(66% 0.016 240);
  line-height: 1.72;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .ns-pq-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .ns-pq-grid { grid-template-columns: 1fr; }
  .ns-porque { padding: 5rem 5%; }
}


/* ──────────────────────────────────────────────────────────────
   MEJORA 4: COBERTURA NACIONAL
   ────────────────────────────────────────────────────────────── */
.ns-cobertura {
  position: relative;
  padding: 7rem 5%;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      oklch(100% 0 0 / 0.007) 1px,
      transparent 2px
    ),
    linear-gradient(
      155deg,
      oklch(10% 0.045 248)  0%,
      oklch(20% 0.082 252) 20%,
      oklch(13% 0.055 248) 40%,
      oklch(22% 0.086 250) 60%,
      oklch(12% 0.050 247) 78%,
      oklch(18% 0.072 250) 90%,
      oklch(11% 0.045 248) 100%
    );
  overflow: hidden;
}

/* Top metallic sweep */
.ns-cobertura::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    oklch(60% 0.26 148 / 0.55) 25%,
    oklch(74% 0.28 151 / 0.85) 50%,
    oklch(60% 0.26 148 / 0.55) 75%,
    transparent
  );
  pointer-events: none;
}

.ns-cob-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  position: relative;
  z-index: 1;
}

.ns-cob-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: oklch(60% 0.25 148);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.ns-cob-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: oklch(60% 0.25 148 / 0.6);
}

.ns-cob-heading {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.7rem, 2.8vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 1.2rem;
}

.ns-cob-sub {
  font-size: 0.97rem;
  color: oklch(68% 0.018 240);
  line-height: 1.75;
  margin-bottom: 2.5rem;
  max-width: 420px;
}

.ns-cob-stats {
  display: flex;
  gap: 2.5rem;
}

.ns-cob-stat-num {
  font-family: 'Sora', sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg,
    oklch(42% 0.19 143), oklch(68% 0.27 149) 50%, oklch(44% 0.19 143)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}

.ns-cob-stat-label {
  font-size: 0.73rem;
  color: oklch(56% 0.02 240);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.3rem;
  font-weight: 600;
}

/* Right panel — regions display */
.ns-cob-regions {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.ns-cob-zone {
  position: relative;
}

.ns-cob-zone-name {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(42% 0.06 240);
  margin-bottom: 0.55rem;
}

.ns-cob-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ns-cob-chip {
  padding: 0.32rem 0.85rem;
  border-radius: 100px;
  font-size: 0.73rem;
  font-weight: 500;
  background: oklch(100% 0 0 / 0.06);
  border: 1px solid oklch(100% 0 0 / 0.10);
  color: oklch(70% 0.016 240);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: default;
}

.ns-cob-chip:hover {
  background: oklch(52% 0.22 145 / 0.14);
  border-color: oklch(52% 0.22 145 / 0.30);
  color: oklch(74% 0.24 148);
}

/* Highlighted chips (already operated) */
.ns-cob-chip--active {
  background: oklch(52% 0.22 145 / 0.14);
  border-color: oklch(52% 0.22 145 / 0.28);
  color: oklch(72% 0.24 148);
}

.ns-cob-chip--active::before {
  content: '·';
  margin-right: 0.3em;
  color: oklch(64% 0.26 148);
}

@media (max-width: 900px) {
  .ns-cob-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 500px) {
  .ns-cobertura { padding: 5rem 5%; }
  .ns-cob-stats { gap: 1.5rem; }
}