/* ==========================================================================
   EMAPRO — sobre-nos.css
   Estilos exclusivos de la página Sobre Nós.
   ========================================================================== */

[data-animar] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
[data-animar].visible { opacity: 1; transform: translateY(0); }

/* ---------- Historia ---------- */
.historia__inner { max-width: 860px; margin-inline: auto; }
.historia__inner p { margin-bottom: 20px; font-size: 1.05rem; }

/* ---------- Misión y Visión ---------- */
.mision-vision { background: var(--crema); }

.mision-vision__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.mv-tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-left: 5px solid var(--verde-claro);
  border-radius: var(--radio);
  padding: 40px 34px;
  transition: var(--transicion);
}

.mv-tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.mv-tarjeta__icono { font-size: 2.2rem; margin-bottom: 16px; }
.mv-tarjeta h3 { font-size: 1.4rem; margin-bottom: 14px; color: #333333;}

/* ---------- Pilares ---------- */
.pilares-sobre__encabezado { text-align: center; max-width: 680px; margin: 0 auto 54px; }

.pilares-sobre__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pilar-sobre {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 32px 26px;
  transition: var(--transicion);
}

.pilar-sobre:hover { transform: translateY(-6px); box-shadow: var(--sombra); border-color: var(--verde-claro); }
.pilar-sobre__icono { font-size: 2rem; margin-bottom: 14px; }
.pilar-sobre h3 { font-size: 1.1rem; margin-bottom: 10px; color: #333333; }
.pilar-sobre p { font-size: 0.92rem; }

/* ---------- Equipo ---------- */
.equipo { background: var(--crema); }
.equipo__encabezado { text-align: center; max-width: 680px; margin: 0 auto 54px; }

.equipo__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.miembro {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 36px 28px;
  text-align: center;
  transition: var(--transicion);
}

.miembro:hover { transform: translateY(-6px); box-shadow: var(--sombra); }

.miembro img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 20px;
  border: 4px solid var(--lima);
}

.miembro h3 { font-size: 1.2rem; margin-bottom: 4px; }

.miembro__cargo {
  display: inline-block;
  color: var(--verde-medio);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 14px;
}

.miembro p { font-size: 0.92rem; text-align: left; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .mision-vision__grid { grid-template-columns: 1fr; }
  .pilares-sobre__grid, .equipo__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .pilares-sobre__grid, .equipo__grid { grid-template-columns: 1fr; }
}