/* ==========================================================================
   AV Diagnostico v4 — NOSOTROS (#nosotros)
   Tres piezas: cabecera editorial asimetrica · galeria full-bleed de fotos
   sueltas en marquee infinito · linea de tiempo que se dibuja al scrollear.
   Sistema: claro/editorial · Fraunces titulos con una palabra en italica teal ·
   Inter cuerpo · JetBrains Mono labels · todo CUADRADO (radius 0) ·
   acido = un solo punto de 6px en el eyebrow. No redefine .btn ni tokens.
   z-index 2: debe TAPAR el sticky-stack de .areas (z-index 1).
   ========================================================================== */

#nosotros {
  position: relative;
  z-index: 2;
  background: var(--bg);
  color: var(--ink);
  border-top: 1px solid var(--rule);
  overflow: hidden;                    /* el marquee es mas ancho que la pagina */
}

/* ============================================================ 1. CABECERA */
#nosotros .nos__head {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: clamp(32px, 4vw, 72px);
  padding-block: clamp(80px, 10vw, 128px) clamp(40px, 5vw, 68px);
}

#nosotros .nos__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 22px;
  font-family: var(--mono); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2);
}
#nosotros .nos__dot { width: 6px; height: 6px; background: var(--acid); flex: none; }  /* unico acido */

#nosotros .nos__title {
  margin: 0;
  font-family: var(--serif); font-weight: 460;
  font-size: clamp(2rem, 0.9rem + 3.6vw, 4.1rem); line-height: 1.02; letter-spacing: -0.024em;
  color: var(--ink);
  max-width: 13ch; text-wrap: balance;
}
#nosotros .nos__title em { font-family: var(--serif); font-style: italic; font-weight: 420; color: var(--teal-deep); }

/* columna de apoyo, separada por un hairline (gesto editorial) */
#nosotros .nos__head-aside {
  border-left: 1px solid var(--rule);
  padding-left: clamp(22px, 2.6vw, 48px);
}

#nosotros .nos__deck {
  margin: 0; max-width: 46ch;
  font-family: var(--sans); font-size: var(--fs-deck); line-height: 1.6;
  color: var(--ink-2);
}
#nosotros .nos__body {
  margin: 16px 0 0; max-width: 46ch;
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.65;
  color: var(--dim);
}

/* ---- chip de pertenencia (cuadrado, hairline) ---- */
#nosotros .nos__chip {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin: 24px 0 0; padding: 10px 14px;
  max-width: 100%;
  font-family: var(--mono); font-weight: 500; font-size: 11px;
  letter-spacing: .12em; line-height: 1.3; text-transform: uppercase;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule); border-radius: 0;
  transition: color .28s ease, border-color .28s ease, background-color .28s ease;
}
#nosotros .nos__chip:hover { color: var(--ink); border-color: var(--teal-deep); background: var(--teal-wash); }
#nosotros .nos__chip-ico { width: 15px; height: 15px; flex: none; color: var(--teal-deep); }
#nosotros .nos__chip span { min-width: 0; overflow-wrap: anywhere; }
#nosotros .nos__arw { width: 13px; height: 13px; flex: none; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
#nosotros .nos__chip:hover .nos__arw { transform: translate(2px, -2px); }

/* ---- dato pendiente del cliente ---- */
#nosotros .nos__pending {
  margin: 22px 0 0; padding-top: 13px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans); font-style: italic; font-size: .875rem; line-height: 1.5;
  color: var(--dim);
  max-width: 44ch;
}

/* ============================================================ 2. GALERIA */
#nosotros .nos__gallery {
  position: relative;
  background: var(--bg-soft);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(20px, 2.4vw, 32px) clamp(26px, 3vw, 42px);
  overflow: hidden;
}

#nosotros .nos__gal-bar {
  width: var(--container);
  margin: 0 auto clamp(16px, 2vw, 26px);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px 20px;
}
#nosotros .nos__gal-label,
#nosotros .nos__gal-hint {
  margin: 0;
  font-family: var(--mono); font-weight: 500; font-size: 11px;
  letter-spacing: .16em; line-height: 1.4; text-transform: uppercase;
}
#nosotros .nos__gal-label { color: var(--ink-2); }
#nosotros .nos__gal-hint  { color: var(--dim); }

/* el texto de ayuda cambia segun el dispositivo (ver media queries) */
#nosotros .nos__hint-pause { display: none; }
#nosotros .nos__hint-swipe { display: none; }
@media (hover: hover) and (pointer: fine) {
  #nosotros .nos__hint-pause { display: inline; }
}

/* ---- pista del marquee ---- */
#nosotros .nos__viewport {
  --rowh: clamp(220px, 30vw, 460px);
  --gap: clamp(14px, 1.7vw, 28px);
  position: relative;
  height: calc(var(--rowh) * 1.22);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

/* cinta = dos pistas identicas; se traslada -50% = exactamente una pista */
#nosotros .nos__belt {
  --nos-base: 92s;   /* velocidad de crucero. 56s eran para 6 fichas;
                        con 10 la cinta es mas larga y hay que subirlo
                        en proporcion para que la velocidad NO cambie. */
  --spd: 1;          /* multiplicador que modula el scroll (js/nosotros.js) */
  display: flex;
  width: max-content;
  height: 100%;
  animation: nos-drift calc(var(--nos-base) / var(--spd)) linear infinite;
  will-change: transform;
}
@keyframes nos-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
#nosotros .nos__viewport:hover .nos__belt,
#nosotros .nos__viewport:focus-within .nos__belt { animation-play-state: paused; }

#nosotros .nos__track {
  display: flex; align-items: center;
  height: 100%;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0 var(--gap) 0 0;   /* el gap final hace la costura invisible */
}

/* ---- fotos sueltas: distinto tamano, offset y rotacion leve ---- */
#nosotros .nos__fig {
  --k: .8;          /* alto relativo a la fila */
  --ar: 4 / 5;      /* proporcion declarada = cero CLS */
  --dy: 0px;        /* desfase vertical */
  --rot: 0deg;      /* rotacion leve */
  position: relative;
  flex: none;
  height: calc(var(--rowh) * var(--k));
  aspect-ratio: var(--ar);
  overflow: hidden;
  background: rgba(14, 26, 31, .05);
  border: 1px solid var(--rule);
  border-radius: 0;
  transform: translate3d(0, var(--dy), 0) rotate(var(--rot));
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .5s ease;
}
#nosotros .nos__fig img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.96) contrast(1.02);
}
/* campo de microscopio: circulo, se muestra entero sobre negro y no se recorta
   contra la proporcion de la ficha (ver .area__media--field en areas.css) */
#nosotros .nos__fig--field { background: #000; }
#nosotros .nos__fig--field img { object-fit: contain; }
/* al hover se endereza y sube */
#nosotros .nos__fig:hover {
  transform: translate3d(0, calc(var(--dy) - 12px), 0) rotate(0deg);
  box-shadow: 0 18px 40px rgba(14, 26, 31, .16);
  border-color: var(--teal);
}

/* La galeria paso de 6 a 10 fichas. El --ar de cada posicion coincide EXACTO
   con la proporcion del archivo que va ahi, asi que ninguna foto se recorta.
   Si se reordenan las fotos hay que reordenar tambien estos valores. */
#nosotros .nos__track > .nos__fig:nth-child(1)  { --k: .74; --ar: 4 / 5; --dy: -22px; --rot: -2.2deg; }
#nosotros .nos__track > .nos__fig:nth-child(2)  { --k: .90; --ar: 3 / 2; --dy:  14px; --rot:  1.5deg; }
#nosotros .nos__track > .nos__fig:nth-child(3)  { --k: .58; --ar: 1 / 1; --dy: -12px; --rot:  2.6deg; }
#nosotros .nos__track > .nos__fig:nth-child(4)  { --k: 1;   --ar: 3 / 4; --dy:  20px; --rot: -1.4deg; }
#nosotros .nos__track > .nos__fig:nth-child(5)  { --k: .66; --ar: 3 / 2; --dy: -26px; --rot:  2deg;   }
#nosotros .nos__track > .nos__fig:nth-child(6)  { --k: .82; --ar: 4 / 5; --dy:   8px; --rot: -2.6deg; }
#nosotros .nos__track > .nos__fig:nth-child(7)  { --k: .54; --ar: 1 / 1; --dy:  18px; --rot:  1.8deg; }
#nosotros .nos__track > .nos__fig:nth-child(8)  { --k: .70; --ar: 3 / 2; --dy: -18px; --rot: -1.8deg; }
#nosotros .nos__track > .nos__fig:nth-child(9)  { --k: .96; --ar: 3 / 4; --dy:  12px; --rot:  2.2deg; }
#nosotros .nos__track > .nos__fig:nth-child(10) { --k: .78; --ar: 4 / 5; --dy: -14px; --rot: -2deg;   }

/* ============================================================ 3. LINEA DE TIEMPO */
#nosotros .nos__road {
  width: var(--container);
  margin-inline: auto;
  padding-block: clamp(56px, 7vw, 100px) clamp(72px, 9vw, 124px);
}

#nosotros .nos__road-title {
  margin: 0 0 clamp(40px, 5vw, 68px);
  font-family: var(--serif); font-weight: 460;
  font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 20ch; text-wrap: balance;
}
#nosotros .nos__road-title em { font-family: var(--serif); font-style: italic; font-weight: 420; color: var(--teal-deep); }

#nosotros .nos__road-wrap { position: relative; }

#nosotros .nos__line { position: absolute; display: block; overflow: visible; }
#nosotros .nos__line path { fill: none; stroke: var(--teal-deep); stroke-width: 2; }
#nosotros .nos__line--h { top: 5px; left: 0; width: 100%; height: 2px; }
#nosotros .nos__line--v { display: none; }

#nosotros .nos__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
}

#nosotros .nos__step { position: relative; padding-top: 32px; }

#nosotros .nos__mark {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 12px; height: 12px; border-radius: 0;
}
/* HOY: marca SOLIDA */
#nosotros .nos__step--now .nos__mark { background: var(--teal); }
/* EN DESARROLLO: marca HUECA (outline teal) */
#nosotros .nos__step--dev .nos__mark { background: var(--bg); border: 2px solid var(--teal-deep); }

/* el margin negativo compensa el padding+borde: el TEXTO del label queda alineado
   con la marca y el titulo, tenga caja o no */
#nosotros .nos__stage {
  display: inline-block;
  margin: 0 0 10px -8px;
  padding: 4px 7px;
  border: 1px solid transparent;
  font-family: var(--mono); font-weight: 500; font-size: 10.5px;
  letter-spacing: .16em; line-height: 1.2; text-transform: uppercase;
}
#nosotros .nos__step--now .nos__stage { color: var(--ink); }
/* la etiqueta EN DESARROLLO va encajonada: imposible confundirla con un servicio actual */
#nosotros .nos__step--dev .nos__stage {
  color: var(--ink-2);
  border-color: var(--teal-deep);
}

#nosotros .nos__step-title {
  margin: 0;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1rem, .94rem + .25vw, 1.16rem); line-height: 1.22; letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
#nosotros .nos__step--dev .nos__step-title { font-weight: 460; color: var(--ink-2); }

#nosotros .nos__step-text {
  margin: 9px 0 0;
  font-family: var(--sans); font-size: .875rem; line-height: 1.5;
  color: var(--ink-2);
}

#nosotros .nos__road-note {
  margin: clamp(30px, 3.6vw, 48px) 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: .875rem; line-height: 1.55;
  color: var(--dim);
  max-width: 64ch;
}
#nosotros .nos__note-key {
  font-family: var(--mono); font-weight: 500; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}

/* ============================================================ RESPONSIVE */
/* cabecera a una columna un poco antes, para que el titulo no quede angosto */
@media (max-width: 1100px) {
  #nosotros .nos__head { grid-template-columns: 1fr; align-items: start; gap: 28px; }
  #nosotros .nos__head-aside {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--rule); padding-top: 26px;
  }
  #nosotros .nos__deck, #nosotros .nos__body { max-width: 58ch; }
  #nosotros .nos__title { max-width: 18ch; }
}

/* ≤900: fotos mas chicas y linea de tiempo VERTICAL */
@media (max-width: 900px) {
  #nosotros .nos__head { padding-block: clamp(64px, 13vw, 96px) clamp(32px, 6vw, 52px); }
  #nosotros .nos__title { font-size: clamp(1.9rem, 7vw, 2.6rem); }

  #nosotros .nos__viewport { --rowh: clamp(190px, 40vw, 300px); --gap: 12px; }
  #nosotros .nos__belt { --nos-base: 34s; }

  #nosotros .nos__road-title { font-size: clamp(1.5rem, 6vw, 2.1rem); max-width: 17ch; }

  #nosotros .nos__line--h { display: none; }
  #nosotros .nos__line--v { display: block; top: 0; left: 5px; width: 2px; height: 100%; }

  #nosotros .nos__steps { grid-template-columns: 1fr; gap: 0; }
  #nosotros .nos__step { padding: 0 0 30px 34px; }
  #nosotros .nos__step:last-child { padding-bottom: 0; }
  #nosotros .nos__mark { top: 2px; }
  #nosotros .nos__step-title { max-width: 24ch; }
  #nosotros .nos__step-text { max-width: 46ch; }
}

/* 320px: nada se corta ni empuja el ancho */
@media (max-width: 380px) {
  #nosotros .nos__chip { font-size: 10px; letter-spacing: .08em; padding: 10px 12px; }
  #nosotros .nos__gal-label, #nosotros .nos__gal-hint { font-size: 10px; letter-spacing: .12em; }
  #nosotros .nos__step { padding-left: 28px; }
}

/* ============================================================ REDUCED MOTION
   Todo visible y quieto: la cinta se frena y la pista queda scrolleable a mano. */
@media (prefers-reduced-motion: reduce) {
  #nosotros .nos__belt { animation: none; width: max-content; }
  #nosotros .nos__track--dup { display: none; }
  #nosotros .nos__viewport {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none; mask-image: none;
  }
  #nosotros .nos__track { padding-inline: 4vw; }
  #nosotros .nos__fig,
  #nosotros .nos__chip,
  #nosotros .nos__arw { transition: none; }
  #nosotros .nos__hint-base,
  #nosotros .nos__hint-pause { display: none; }
  #nosotros .nos__hint-swipe { display: inline; }
}


/* ============================================================ PISO DE LECTURA
   Auditoria responsive: estos rotulos estaban entre 10 y 11px. En mono, en
   mayusculas y con letter-spacing abierto, a 320-430px de ancho eso se vuelve
   dificil de leer — y el publico de un laboratorio incluye gente grande.
   El piso se aplica SOLO en telefono: en desktop el rotulo chico y tracked es
   una decision del sistema y se mantiene. */
@media (max-width: 700px) {
  #nosotros .nos__stage,
  #nosotros .nos__hint-base,
  #nosotros .nos__note-key,
  #nosotros .nos__chip,
  #nosotros .nos__chip span,
  #nosotros .nos__gal-label,
  #nosotros .nos__gal-hint { font-size: 12px; letter-spacing: .12em; }
}