/* ═══════════════════════════════════════════════════════════
   VWT · NOSOTROS
   Página informativa, con la identidad del sitio y sin efectos
   grandes: papel, volanta bordó, títulos del contrato, texto
   ligero y un ritmo de tres bloques: cómo trabajamos, lo que nos
   mueve y el cierre en negro.
   ═══════════════════════════════════════════════════════════ */
.ns{
  --ns-pad: clamp(1.4rem, 5vw, 6rem);
  --ns-max: calc(1400px * var(--k, 1));
  --ns-sec: clamp(3.2rem, calc(7 * var(--1vh)), 5.6rem);
  --ns-t: .9s;
  --ns-e: cubic-bezier(.22,1,.36,1);
  --ns-acc: #AC3749;
  --ns-negro: #0B0708;
  --ns-papel: #FFFFFF;
  --ns-humo: #F6F2F0;
  --ns-linea: rgba(11,7,8,.14);
  font-family: 'Poppins', sans-serif; background: var(--ns-papel); color: var(--ns-negro);
}
.ns-in{ max-width: var(--ns-max); margin-inline: auto; padding-inline: var(--ns-pad) }
.ns-rv{ opacity: 0; transform: translateY(22px); transition: opacity var(--ns-t) var(--ns-e), transform var(--ns-t) var(--ns-e) }
.ns-rv[data-d="1"]{ transition-delay: .1s } .ns-rv[data-d="2"]{ transition-delay: .2s }
.ns-rv.on{ opacity: 1; transform: none }

/* contrato tipográfico del sitio */
.ns-kick{ margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--ns-acc) }
.ns-kick-light{ color: rgba(255,255,255,.78) }
.ns-h1, .ns-h2{ margin: clamp(.9rem,1.8vw,1.3rem) 0 0; font-size: calc(99.2px * var(--k, 1)); font-weight: 700; letter-spacing: -.055em; line-height: .94; max-width: 22ch }
.ns-h2-light{ color: #fff }
.ns-lead{ margin: clamp(1.2rem,2.4vw,1.8rem) 0 0; max-width: 54ch; font-size: calc(18.6px * var(--k, 1)); line-height: 1.6; font-weight: 300; color: #3A3436 }

.ns-open{ margin-top: var(--nav-h, 62px); padding: var(--ns-sec) 0 }

/* cómo trabajamos: encabezado fijo, tres puntos numerados */
.ns-como{ padding: var(--ns-sec) 0; border-top: 1px solid var(--ns-linea) }
.ns-como-grid{ display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,.58fr); gap: calc(80.0px * var(--k, 1)); align-items: start }
.ns-como-hd{ position: sticky; top: calc(var(--nav-h, 62px) + 2rem) }
.ns-lista{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ns-linea) }
.ns-lista li{ display: grid; grid-template-columns: clamp(2.6rem,4vw,4rem) 1fr; gap: calc(32.0px * var(--k, 1)); padding: clamp(1.6rem,3vw,2.4rem) 0; border-bottom: 1px solid var(--ns-linea) }
.ns-n{ font-size: .82rem; font-weight: 700; color: var(--ns-acc); padding-top: .2rem }
.ns-item-k{ margin: 0 0 .4rem; font-size: .82rem; font-weight: 600; color: var(--ns-acc) }
.ns-lista h3, .ns-val-grid h3{ margin: 0; font-size: calc(33.6px * var(--k, 1)); font-weight: 700; letter-spacing: -.045em; line-height: 1.05 }
.ns-lista p:last-child, .ns-val-grid p{ margin: .8rem 0 0; max-width: 56ch; font-size: calc(17.9px * var(--k, 1)); line-height: 1.6; font-weight: 300; color: #3A3436 }
.ns-lista a{ color: var(--ns-acc); text-decoration: underline; text-underline-offset: .18em }

/* lo que nos mueve: tres columnas sobre humo */
.ns-val{ padding: var(--ns-sec) 0; background: var(--ns-humo) }
.ns-val-grid{ list-style: none; margin: clamp(2.4rem,5vw,3.6rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: calc(48.0px * var(--k, 1))}
.ns-val-grid li{ padding-top: 1.2rem; border-top: 1px solid var(--ns-linea) }
.ns-val-grid .ns-n{ display: block; margin-bottom: .8rem; padding: 0 }

/* cierre en negro */
.ns-fin{ padding: var(--ns-sec) 0; background: var(--ns-negro); color: #fff }
.ns-fin-grid{ display: grid; grid-template-columns: minmax(0,.6fr) minmax(0,.4fr); gap: calc(80.0px * var(--k, 1)); align-items: end }
.ns-fin-cta{ display: grid; gap: .9rem; justify-items: start }
.ns-btn{
  display: inline-flex; align-items: center; justify-content: center; padding: 1.05rem 2.1rem; border-radius: 100px;
  background: #fff !important; color: var(--ns-negro) !important; -webkit-text-fill-color: var(--ns-negro); text-decoration: none;
  font: inherit; font-size: .88rem; font-weight: 600; letter-spacing: -.01em;
  transition: background-color var(--ns-t) var(--ns-e), color var(--ns-t) var(--ns-e), transform var(--ns-t) var(--ns-e);
}
.ns-btn:hover{ background: var(--ns-acc) !important; color: #fff !important; -webkit-text-fill-color: #fff; transform: translateY(-2px) }
.ns-lnk{ display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; text-decoration: none; color: #fff !important; -webkit-text-fill-color: #fff }
.ns-lnk i{ font-style: normal; transition: transform .6s var(--ns-e) }
.ns-lnk:hover i{ transform: translateX(4px) }
.ns-fin-n{ margin: 0; font-size: .82rem; color: rgba(255,255,255,.62) }

@media (max-width: 900px){
  .ns-como-grid, .ns-fin-grid{ grid-template-columns: 1fr }
  .ns-como-hd{ position: static; margin-bottom: 1.6rem }
  .ns-val-grid{ grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce){ .ns-rv{ opacity: 1; transform: none; transition: none } }

/* ═══════════════════════════════════════════════════════════
   MODO OSCURO · mismos valores que el sistema del sitio
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .ns, body.dark .ns{ --ns-papel: #000000; --ns-humo: #0C0A0A; --ns-negro: #0C0A0A; --ns-linea: rgba(255,255,255,.12); background: #000; color: #F7F5F5 }
html[data-theme="dark"] .ns-lead, html[data-theme="dark"] .ns-lista p:last-child, html[data-theme="dark"] .ns-val-grid p,
body.dark .ns-lead, body.dark .ns-lista p:last-child, body.dark .ns-val-grid p{ color: #DCD7D7 }
html[data-theme="dark"] .ns-fin, body.dark .ns-fin{ background: #0C0A0A; border-top: 1px solid rgba(255,255,255,.12) }
html[data-theme="dark"] .ns-btn, body.dark .ns-btn{ background: #F7F5F5 !important; color: #000 !important; -webkit-text-fill-color: #000 }