/* =========================================================
   nosotros.css — estilos exclusivos de nosotros.html
   Títulos en weight 400 (Roman 55), igual que el resto del sitio —
   ver la regla de consistencia tipográfica en .section-header h2
   (base.css) y README.md § Tipografía.
   ========================================================= */

/* ---------- Institucional (encabezado, centrado) ---------- */

.institucional-block {
  padding: 96px 0;
}

.institucional-inner {
  max-width: 1040px;
  margin: 0 auto;
}

.institucional-inner h1 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 400;
  color: var(--color-primary);
  margin: 0 0 40px;
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-align: center;
}

/* Texto institucional a 2 columnas: justificado con guionado automático
   para que no queden "lagunas" de espacio en blanco por el justify, y
   la última línea de cada párrafo alineada a la izquierda (no
   estirada) — requiere lang="es"/"es-AR" en <html> para que el
   navegador use el diccionario de silabación correcto. */
.institucional-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
}

.institucional-body p {
  font-size: 17px;
  line-height: 1.9;
  color: var(--color-text-muted);
  margin: 0 0 22px;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.institucional-column p:last-child {
  margin-bottom: 0;
}

/* ---------- Nuestra Misión (video de fondo completo) ---------- */

/* Fondo gris (--color-surface, el mismo tono que ya usaba esta sección
   antes del video) detrás del <video>: se ve un instante mientras
   carga el archivo y como color de relleno si el navegador no puede
   reproducirlo, en vez de un color ajeno al resto de la página. */
.mision-block {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  display: flex;
  align-items: center;
  padding: 96px 0;
  background: var(--color-surface);
}

.mision-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Filtro oscuro tenue sobre el video para que el texto blanco mantenga
   contraste óptimo sin importar el fotograma que esté reproduciéndose. */
.mision-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(4, 32, 76, 0.5);
}

.mision-inner {
  position: relative;
  z-index: 3;
}

/* Línea guía + sobretítulo: clase compartida .accent-text (base.css). */
.mision-text {
  max-width: 560px;
}

.mision-text h2 {
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 400;
  color: #ffffff;
  margin: 0 0 20px;
  line-height: 1.2;
}

.mision-text p {
  font-size: 16px;
  line-height: 1.75;
  color: #ffffff;
  margin: 0;
  max-width: 460px;
}

/* ---------- Nuestra Trayectoria (slider horizontal) ---------- */

.trayectoria-block {
  padding: 96px 0 80px;
}

.trayectoria-title {
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 400;
  color: var(--color-primary);
  margin: 0 0 48px;
}

.trayectoria-slider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
}

.trayectoria-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.trayectoria-arrow:hover {
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.trayectoria-arrow svg {
  width: 18px;
  height: 18px;
}

.trayectoria-viewport {
  flex: 1;
  min-width: 0;
}

/* Grilla de 3 filas (arriba / eje / abajo) con alto automático: cada
   fila crece según el contenido más alto, por eso el texto nunca se
   recorta. Cada tarjeta recibe su columna vía JS (grid-column) para
   que 2 columnas llenen exactamente el ancho visible en escritorio. */
.trayectoria-track {
  display: grid;
  grid-template-rows: auto 2px auto;
  grid-auto-columns: calc((100% - 32px) / 2);
  row-gap: 28px;
  column-gap: 32px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: 2px; /* = padding-left del track: snap y botones coinciden */
  cursor: grab;
  scrollbar-width: none;
  padding: 4px 2px;
}

.trayectoria-track::-webkit-scrollbar {
  display: none;
}

.trayectoria-track.dragging,
.trayectoria-track.animating {
  scroll-snap-type: none;
}

.trayectoria-track.dragging {
  cursor: grabbing;
  user-select: none;
}

.trayectoria-axis {
  grid-row: 2;
  grid-column: 1 / -1;
  background: var(--color-border);
  height: 2px;
}

/* Todas las tarjetas comparten la misma estructura: alineadas al borde
   izquierdo de su columna (justify-self:start, sin margin extra), así el
   borde izquierdo de la primera tarjeta de cada página es idéntico y
   coincide con el punto de snap/desplazamiento (columna = tarjeta). */
.trayectoria-item {
  min-width: 0;
  max-width: 400px;
  width: 100%;
  margin: 0;
  justify-self: start;
  scroll-snap-align: start;
}

.trayectoria-item.above {
  align-self: end;
}

.trayectoria-item.below {
  align-self: start;
}

.trayectoria-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.trayectoria-card.in-view {
  opacity: 1;
  transform: none;
}

.trayectoria-year {
  display: block;
  font-size: 26px;
  font-weight: 500;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.trayectoria-year-line {
  display: block;
  width: 28px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 8px 0 14px;
}

.trayectoria-subtitle {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 8px;
}

.trayectoria-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* =========================================================
   Matricería (oscura) y Materia Prima (clara)
   Misma plantilla estructural (.split-*), solo cambia el tema de
   color vía el modificador --dark / --light en la sección.
   ========================================================= */

.split-section--dark {
  background: #0a0a0a;
  color: var(--color-white);
}

.split-section--light {
  background: var(--color-surface);
  color: var(--color-text);
}

.split-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 88px 0 56px;
}

/* La línea guía se dibuja con ::before (no border-left) para que no
   sume ancho a la caja: así el padding-left es la única fuente del
   offset de contenido, y coincide exactamente con el de
   .split-keypoints-grid más abajo. */
.split-text {
  position: relative;
  max-width: 440px;
  padding-left: 28px;
}

.split-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.split-section--light .split-text::before {
  background: rgba(4, 32, 76, 0.3);
}

.split-text .kicker {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 14px;
}

.split-section--light .split-text .kicker {
  color: var(--color-text-muted);
}

.split-text h2 {
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 400;
  color: var(--color-white);
  margin: 0 0 16px;
  line-height: 1.28;
}

.split-section--light .split-text h2 {
  color: var(--color-primary);
}

.split-text p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.split-section--light .split-text p {
  color: var(--color-text);
}

.split-media {
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background-color: #111111;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.split-section--light .split-media {
  background-color: var(--color-border);
}

/* Materia Prima: la foto ocupa TODA la celda superior (sin marco, sin bordes
   redondeados), como la tarjeta de Materia Prima del inicio. Capas de fondo
   absolutas que rotan con crossfade (crossfade.js); background-size: cover.
   Las fotos son 16:9 con la pieza a la derecha y fondo blanco a la izquierda,
   por eso el texto oscuro va a la izquierda y se ancla a la derecha. */
.split-hero {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

/* Matricería (tema oscuro): el fondo de la celda es negro, igual que la foto. */
.split-section--dark .split-hero {
  background: #000000;
}

.split-hero-media {
  position: absolute;
  inset: 0;
}

.split-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease;
}

.split-hero-bg.active {
  opacity: 1;
}

.split-hero .split-top-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: 1fr;
  min-height: clamp(420px, 42vw, 700px);
  padding-top: 72px;
  padding-bottom: 72px;
}

/* Mismo padding-left que .split-text para que el eje izquierdo del
   texto superior y de los puntos clave quede perfectamente alineado. */
.split-keypoints-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 32px 0 64px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.split-section--light .split-keypoints-grid {
  border-top-color: var(--color-border);
}

.split-keypoint h3 {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0 0 8px;
}

.split-section--light .split-keypoint h3 {
  color: var(--color-primary);
}

.split-keypoint p {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
  max-width: 340px;
}

.split-section--light .split-keypoint p {
  color: var(--color-text-muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .institucional-inner {
    max-width: 640px;
  }

  .institucional-body {
    grid-template-columns: 1fr;
  }

  .split-top-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Materia Prima en celular: la foto completa arriba (16:9, sin recortar la
     pieza) ocupando todo el ancho, y el texto debajo. */
  .split-hero-media {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
  }

  .split-hero .split-top-grid {
    min-height: 0;
    padding-top: 32px;
    padding-bottom: 40px;
  }

  .mision-block {
    min-height: 460px;
  }
}

@media (max-width: 720px) {
  /* Mobile: slider horizontal de a 2 tarjetas por página (igual
     mecanismo que escritorio — grid de 3 filas arriba/eje/abajo, con
     el grid-column/grid-row que ya pone cada tarjeta desde
     renderTrayectoria() en nosotros.js — solo más angostas), lo que
     arma el zigzag: la primera tarjeta de cada página cae en la
     columna izquierda y fila "above", la segunda en la columna
     derecha y fila "below". Las flechas pasan a la fila de abajo del
     bloque en vez de ir a los costados, vía grid-template-areas en
     .trayectoria-slider (mismo prev/next y misma línea-eje que
     escritorio, sin tocar el HTML/JS). */
  .trayectoria-slider {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-areas:
      "viewport viewport viewport viewport"
      ".        prev      next    .";
    column-gap: 12px;
    row-gap: 16px;
    align-items: center;
    padding: 0 8px;
  }

  .trayectoria-viewport {
    grid-area: viewport;
    width: 100%;
  }

  .trayectoria-arrow-prev {
    grid-area: prev;
  }

  .trayectoria-arrow-next {
    grid-area: next;
  }

  .trayectoria-track {
    grid-auto-columns: calc((100% - 16px) / 2);
    column-gap: 16px;
    row-gap: 20px;
  }

  .trayectoria-card {
    padding: 16px 14px;
  }

  .trayectoria-year {
    font-size: 20px;
  }

  .trayectoria-year-line {
    margin: 6px 0 10px;
  }

  .trayectoria-subtitle {
    font-size: 11px;
  }

  .trayectoria-desc {
    font-size: 12.5px;
    line-height: 1.5;
  }
}

@media (max-width: 640px) {
  .institucional-block {
    padding: 64px 0;
  }

  .mision-block {
    padding: 56px 0;
  }

  .trayectoria-block {
    padding: 64px 0 56px;
  }

  .trayectoria-slider {
    padding: 0 8px;
  }

  .split-top-grid {
    padding: 56px 0 32px;
  }

  .split-text,
  .split-keypoints-grid {
    padding-left: 20px;
  }

  .split-keypoints-grid {
    grid-template-columns: 1fr;
    padding-bottom: 56px;
  }
}