/* =================================================================
   JRI Core — páginas internas
   Encabezado, equipo, historia, valores y reseñas.

   Una sola hoja para las cinco: en las páginas institucionales aparecen
   siempre juntas, así que separarlas serían cinco peticiones en lugar de
   una sin ahorrar un solo byte útil.

   La ruta de navegación NO está aquí: vive en `base.css` porque, desde que
   se añadió a la ficha de producto y a los archivos, aparece casi en todo
   el sitio y arrastraría esta hoja entera a páginas que no usan nada más
   de ella.
   ================================================================= */

/* ---------------- Encabezado de página ---------------- */
.jri-about-intro { padding-bottom: var(--space-6); }
.jri-about-lead {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  color: var(--text-muted-2);
}
.jri-about-lead strong { color: var(--near-black); }
.jri-about-lead p:last-child { margin-bottom: 0; }

.jri-porque-hero { padding-bottom: var(--space-7); }
.jri-porque-lead {
  max-width: 760px;
  margin-bottom: var(--space-6);
  font-size: 16px;
  color: var(--text-muted-2);
}
.jri-porque-lead p:last-child { margin-bottom: 0; }

.jri-cert-row { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.jri-cert-badge { max-width: 520px; width: 100%; height: auto; border-radius: var(--radius-md); }
.jri-sunat { font-size: 14px; color: var(--text-muted-2); }
.jri-sunat strong { color: var(--near-black); }
.jri-sunat p { margin: 0; display: inline; }

/* ---------------- Sangrado del contenido ----------------
   En el Figma de «Sobre la empresa» los títulos van a ras del contenedor y
   todo lo que cuelga de ellos entra un poco. Es el mismo valor en las tres
   secciones, así que va en una variable en vez de repetido. */
.jri-about-intro--lateral,
.jri-about-team,
.jri-about-history {
  --jri-sangria: var(--space-8);
  /* El Figma respira menos entre bloques que el resto del sitio: con el
     `--space-9` de `.jri-section` quedaban 108 px entre secciones. */
  padding-block: var(--space-7);
}

/* Variante «lateral»: título arriba a la izquierda y, debajo, la entradilla
   junto a una foto. Es la intro de «Sobre la empresa» en el Figma. */
.jri-intro-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  padding-inline-start: var(--jri-sangria);
}
/* Sin foto no hay segunda columna: el texto no debe estirarse a lo ancho. */
.jri-intro-split--sola { grid-template-columns: minmax(0, 1fr); max-width: 840px; }
.jri-intro-text { font-size: 16px; line-height: 1.65; color: var(--text-muted-2); }
.jri-intro-text strong { color: var(--near-black); }
.jri-intro-text p:last-child { margin-bottom: 0; }
.jri-intro-text .jri-cert-row { margin-top: var(--space-6); }
/* Apaisada como en el Figma, pero anclada arriba: la foto de plantilla es
   3:2 y con el recorte centrado se comía las cabezas de la fila del fondo. */
.jri-intro-media img {
  width: 100%;
  aspect-ratio: 2 / 1;
  /* Al apilarse ocupa el ancho entero: sin tope, en tablet se iba a 450 px
     de alto y se comía la pantalla. */
  max-height: 360px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg);
}

/* ---------------- Nuestro equipo ---------------- */
.jri-team-body { padding-inline-start: var(--jri-sangria); }

/* El destacado va sobre el fondo de la página, sin tarjeta: en el Figma la
   foto y la cita conviven sin recuadro ni filete de color. */
.jri-team-lead {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-8);
}
.jri-team-lead-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.jri-team-lead-quote { max-width: 640px; }
/* El filete y la sangría del `blockquote` los pone el tema; en el Figma la
   cita va suelta, sin marca a la izquierda. */
.jri-team-lead-quote blockquote {
  margin: 0 0 var(--space-5);
  padding: 0;
  border: 0;
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-muted-2);
}
.jri-team-lead-name { font-size: 15px; margin: 0 0 2px; color: var(--near-black); }
.jri-team-lead-role {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: 700;
  color: var(--near-black);
  margin: 0;
}

/* Ancho fijo de tarjeta: con cuatro integrantes o con ocho miden lo mismo y
   se alinean a la izquierda, como en el Figma. Un ancho en porcentaje las
   estiraría a repartirse la fila. */
.jri-team-grid { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-5); }
.jri-team-member { width: 150px; text-align: center; }
.jri-team-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-100);
}
.jri-team-photo img { width: 100%; height: 100%; object-fit: cover; }
.jri-team-name { font-size: 13px; margin: 0; color: var(--near-black); }
.jri-team-role { font-size: 12px; font-weight: 700; color: var(--near-black); margin: 0; }

/* El glifo de LinkedIn. Va en línea tras el cargo del destacado y como
   insignia sobre la esquina de cada foto. La insignia queda dentro del
   `overflow: hidden` de la foto a propósito: sacarla la recortaría. */
.jri-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  flex: none;
  border-radius: 3px;
  background: #0A66C2;
  color: var(--white);
}
.jri-linkedin:hover { background: #004182; }
.jri-linkedin-icon { width: 12px; height: 12px; display: block; }
.jri-linkedin--badge {
  position: absolute;
  right: 6px; bottom: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--white);
}
.jri-linkedin--badge .jri-linkedin-icon { width: 13px; height: 13px; }

/* ---------------- Nuestra historia ----------------
   Mosaico: cada hito es una columna, y la foto sube o baja dentro de ella
   según la posición. Con `auto-fit` tres hitos dan tres columnas y un cuarto
   entra en la misma fila mientras quepa. */
.jri-history-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8) var(--space-7);
  align-items: start;
  padding-inline-start: var(--jri-sangria);
}
.jri-history-item { display: flex; flex-direction: column; gap: var(--space-5); }
.jri-history-photo { order: 2; }
.jri-history-item--foto-arriba .jri-history-photo { order: 0; }
.jri-history-photo img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
/* El Figma no lleva el año como rótulo —va dentro del párrafo—, pero el
   campo existe y se sigue pintando. En dorado sobre blanco no se leía
   (1,8:1), así que va en negro. */
.jri-history-year {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--near-black);
  margin-bottom: var(--space-2);
}
.jri-history-text { font-size: 15px; line-height: 1.6; color: var(--text-muted-2); }
.jri-history-text strong { color: var(--near-black); }
.jri-history-text p { margin: 0 0 var(--space-4); }
.jri-history-text p:last-child { margin-bottom: 0; }

/* ---------------- Reseñas ---------------- */
.jri-testi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.jri-testi-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
}
.jri-testi-head { display: flex; align-items: center; gap: var(--space-4); }
.jri-testi-avatar {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--brand-yellow);
  color: var(--near-black);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
}
.jri-testi-meta { display: flex; flex-direction: column; }
.jri-testi-name { font-size: 15px; font-weight: 700; color: var(--near-black); }
.jri-testi-company {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--text-muted-2);
}
.jri-testi-quote { margin: 0; color: var(--text-muted-2); font-style: italic; }
.jri-testi-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted-2);
}
.jri-testi-link:hover { color: var(--brand-gold); }

/* ---------------- Valores ---------------- */
.jri-values { background: var(--gray-100); }
.jri-values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.jri-value-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
}
.jri-value-icon { flex: none; width: 72px; height: 72px; object-fit: contain; border-radius: var(--radius-lg); }
.jri-value-body h3 { font-size: 16px; font-weight: 700; text-transform: uppercase; margin-bottom: var(--space-2); }
.jri-value-body p { margin: 0; color: var(--text-muted-2); }

/* ---------------- Responsive ----------------
   En el diseño estático estas cuatro reglas se escribieron sin el prefijo
   `jri-` (`.team-grid`, `.team-lead`…), así que nunca llegaron a aplicarse:
   la rejilla del equipo se quedaba en 4 columnas hasta los 500 px. Aquí van
   con el prefijo correcto. */
@media (max-width: 980px) {
  /* Sin espacio para dos columnas, la sangría del Figma solo estrecha el
     texto: se retira junto con el reparto en columnas. */
  .jri-about-intro--lateral,
  .jri-about-team,
  .jri-about-history { --jri-sangria: 0px; }

  .jri-intro-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .jri-team-lead { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-6); }
}

@media (max-width: 767px) {
  .jri-team-lead { grid-template-columns: minmax(0, 1fr); }
  .jri-team-lead-photo img { aspect-ratio: 16 / 9; }
  .jri-testi-grid { grid-template-columns: 1fr; }
  .jri-values-grid { grid-template-columns: 1fr; }
  /* La foto siempre encima del texto: en una sola columna la alternancia
     dejaría un hito con la foto separada de su párrafo. */
  .jri-history-photo { order: 0; }
}

@media (max-width: 500px) {
  .jri-team-grid { gap: var(--space-5) var(--space-4); }
  .jri-team-member { width: calc(50% - var(--space-4) / 2); }
  .jri-value-card { flex-direction: column; }
}