/* =================================================================
   JRI Core — Sobre la empresa (Savi Safety)

   Réplica de la página de savisafety.com, ahora con campos: presentación
   con imagen, equipo (quien dirige con su cita + rejilla de personas),
   propósito y visión en dos tarjetas negras, y los socios comerciales.

   Los `jri-marcador*` son los huecos de ejemplo: gris muy claro, en cursiva
   y sin contraste fuerte, para que se lean como «falta rellenar» y no como
   contenido publicado.
   ================================================================= */

.jri-empresa { padding-block: 0 60px; }

/* ---------------- Presentación ---------------- */
.jri-empresa-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-bottom: 60px;
}
.jri-prosa-corta { font-size: 14px; line-height: 22.4px; color: rgb(38 38 38); }
.jri-prosa-corta p { margin: 0 0 12px; }

.jri-empresa-nota {
  margin: 20px 0 0;
  padding: 14px 18px;
  background: var(--c-gris, #F1F3F5);
  border-radius: var(--radius, 3px);
  font-size: 14px;
}
.jri-empresa-nota a { color: #1B6EC2; text-decoration: none; }
.jri-empresa-nota a:hover { text-decoration: underline; }

.jri-empresa-intro__media img { width: 100%; height: auto; border-radius: var(--radius, 3px); }

/* ---------------- Equipo ---------------- */
.jri-empresa-equipo-titulo { margin-bottom: 30px; }

.jri-empresa-lider {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  margin-bottom: 50px;
}
.jri-empresa-lider__foto img,
.jri-empresa-lider__foto .jri-marcador-img { width: 100%; border-radius: var(--radius, 3px); }

/* El bocadillo de la cita: rectángulo con el pico apuntando a la foto, como en el sitio. */
.jri-empresa-cita {
  position: relative;
  margin: 20px 0 0;
  padding: 20px 24px;
  background: var(--c-blanco, #fff);
  border: 1px solid var(--c-hairline, #E5E5E5);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 6%);
  font-style: italic;
  font-size: 15px;
  line-height: 24px;
}
.jri-empresa-cita::before {
  content: '';
  position: absolute;
  top: 28px;
  left: -10px;
  width: 18px;
  height: 18px;
  background: inherit;
  border-left: 1px solid var(--c-hairline, #E5E5E5);
  border-bottom: 1px solid var(--c-hairline, #E5E5E5);
  transform: rotate(45deg);
}

.jri-empresa-firma { margin: 18px 0 0; font-size: 14px; line-height: 20px; }
.jri-empresa-firma strong { display: block; color: rgb(38 38 38); }
.jri-empresa-firma span { display: inline-flex; align-items: center; gap: 8px; color: var(--c-texto-suave, #777); }

/* El enlace al perfil: el círculo azul de LinkedIn que usa el sitio. */
.jri-empresa-perfil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0A66C2;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  text-transform: lowercase;
}

.jri-empresa-equipo {
  display: grid;
  /* Fichas de 160 px, no cuatro columnas repartidas: en un contenedor de 1.540 px, cuatro
     columnas dan retratos de 350 px y el sitio los tiene a ~130. Con `auto-fill` la rejilla se
     llena sola y las fichas conservan su tamaño en cualquier ancho. */
  grid-template-columns: repeat(auto-fill, minmax(0, 160px));
  justify-content: start;
  gap: 30px 24px;
  margin: 0 0 60px;
  padding: 0;
  list-style: none;
}
.jri-empresa-persona__foto { position: relative; }
.jri-empresa-persona__foto img,
.jri-empresa-persona__foto .jri-marcador-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 2px solid var(--c-amarillo, #F5EC08);
  border-radius: 6px;
}
.jri-empresa-persona__foto .jri-empresa-perfil { position: absolute; right: 8px; bottom: 8px; }
.jri-empresa-persona__nombre { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: rgb(38 38 38); }
.jri-empresa-persona__cargo { margin: 2px 0 0; font-size: 14px; color: var(--c-texto-suave, #777); }

/* ---------------- Propósito y visión ---------------- */
.jri-empresa-pilares {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 50px;
}
.jri-empresa-pilar {
  padding: 32px;
  background: var(--c-negro, #111110);
  color: var(--c-blanco, #fff);
  border-radius: 10px;
  text-align: center;
}
.jri-empresa-pilar h3 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: inherit;
}
.jri-empresa-pilar div { font-size: 14px; line-height: 22.4px; }

/* ---------------- Socios ---------------- */
.jri-empresa-socios-titulo {
  margin: 0 0 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgb(38 38 38);
}
.jri-empresa-socios {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jri-empresa-socios li {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 220 / 96;
  padding: 14px;
  background: #F7F7F7;
  border-radius: var(--radius, 3px);
}
.jri-empresa-socios img { width: 100%; height: 100%; object-fit: contain; }

/* ---------------- Marcadores ---------------- */
.jri-marcador { color: #B9B9B9; font-style: italic; }

.jri-marcador-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, transparent 47%, #DADADA 47%, #DADADA 53%, transparent 53%),
    #F1F3F5;
  border-radius: var(--radius, 3px);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
  .jri-empresa-intro,
  .jri-empresa-lider { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .jri-empresa-equipo { grid-template-columns: repeat(auto-fill, minmax(0, 150px)); }
  .jri-empresa-socios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* En una columna el pico del bocadillo apunta hacia arriba, a la foto. */
  .jri-empresa-cita::before { top: -10px; left: 32px; border: 0; border-top: 1px solid var(--c-hairline, #E5E5E5); border-left: 1px solid var(--c-hairline, #E5E5E5); }
}

@media (max-width: 767px) {
  .jri-empresa-equipo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; justify-content: stretch; }
  .jri-empresa-pilares { grid-template-columns: minmax(0, 1fr); }
  .jri-empresa-socios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jri-empresa-pilar { padding: 24px; }
}