/* =================================================================
   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; }

/* ---------------- Equipo sin persona destacada ----------------
   Cuando la sección es el contenido principal de la página —«Nuestro equipo»
   de SaviWork— no hay destacado que marque la jerarquía, así que las tarjetas
   dejan de ser satélites de 150 px y pasan a ser el bloque: se agrandan, se
   centran y toman el lenguaje de tarjeta del sistema (filete superior, radio
   grande, sombra y el levantamiento al pasar por encima).
   Solo se aplica bajo el modificador: el uso original no se toca. */
.jri-about-team--solo-rejilla .jri-team-body { padding-inline-start: 0; }

.jri-about-team--solo-rejilla .jri-team-grid {
  display: grid;
  /* `1fr` es `minmax(auto, 1fr)` y desborda con fotos anchas: `minmax(0, …)`. */
  grid-template-columns: repeat(auto-fit, minmax(0, 280px));
  justify-content: center;
  gap: var(--space-7) var(--space-6);
}

.jri-about-team--solo-rejilla .jri-team-member {
  width: auto;
  padding-bottom: var(--space-5);
  background: #fff;
  border-top: 4px solid var(--brand-yellow);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.jri-about-team--solo-rejilla .jri-team-member:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px 0 rgba(0, 0, 0, .12);
}

/* La foto llena el ancho de la tarjeta y no repite el radio: lo recorta la
   propia tarjeta con su `overflow`. */
.jri-about-team--solo-rejilla .jri-team-photo {
  margin-bottom: var(--space-4);
  border-radius: 0;
}

.jri-about-team--solo-rejilla .jri-team-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
/* El cargo en naranja, pero en el tono oscuro: es letra, no fondo. */
.jri-about-team--solo-rejilla .jri-team-role {
  font-size: 13px;
  color: var(--brand-sage-dark);
}

/* 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; }

  /* La regla de arriba pone `width` a la mitad, pero en la variante el ancho
     lo reparte la rejilla: se le devuelve el `auto` o las tarjetas se encogen
     dentro de su propia columna. */
  .jri-about-team--solo-rejilla .jri-team-member { width: auto; }
  .jri-about-team--solo-rejilla .jri-team-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
}