/* =========================================
   ESTILOS PÁGINA: NOSOTROS
   ========================================= */

/* ─────────── HERO DE LA PÁGINA ─────────── */
.page-hero {
  padding: 160px 24px 80px; text-align: center;
  max-width: 800px; margin: 0 auto;
}

/* ESTE ES EL ESTILO FALTANTE PARA "Nuestra Misión" */
.hero-tag {
  display: inline-block;
  font-size: 0.68rem; 
  font-weight: 600; 
  letter-spacing: 0.12em; 
  text-transform: uppercase; 
  color: #00A87A; /* El verde de tu marca */
  margin-bottom: 16px;
}

.page-h1 {
  font-size: clamp(2.5rem, 4vw, 3.8rem); font-weight: 200;
  letter-spacing: -.03em; margin-bottom: 24px; line-height: 1.1;
}
.page-h1 strong { font-weight: 600; }
.page-intro {
  font-size: 1.1rem; color: #4a4a4e; font-weight: 300; line-height: 1.6;
}

/* ─────────── FEATURE BENTO (Para Excelencia Mexicana y Socios) ─────────── */
/* Mantenemos exactamente las clases originales (.b1, .b2, .bento-section) */

.bento-section {
  padding:120px 56px;
  max-width:1160px; margin:0 auto;
}

.bento {
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap:12px;
}

.bento-card {
  background:#fafafa; border:1px solid rgba(0,0,0,0.07);
  border-radius:20px; padding:40px;
  transition:border-color .25s, box-shadow .25s;
}
.bento-card:hover {
  border-color:rgba(0,168,122,.2);
  box-shadow:0 8px 40px rgba(0,168,122,.06);
}

.b1 { grid-column:span 5; }
.b2 { grid-column:span 7; }
.b3 { grid-column:span 7; }
.b4 { grid-column:span 5; }

.bento-icon {
  width:44px; height:44px;
  background:rgba(0,168,122,.08);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:28px; font-size:1.2rem;
}

.bento-h3 {
  font-size:1.1rem; font-weight:500; letter-spacing:-.02em;
  margin-bottom:10px;
}
.bento-p {
  font-size:.83rem; color:#4a4a4e; line-height:1.65; font-weight:300;
}

/* ─────────── EQUIPO (TEAM GRID) ─────────── */
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px; max-width: 1160px; margin: 60px auto 120px; padding: 0 24px;
}
.team-card {
  text-align: center; padding: 32px;
  border: 1px solid rgba(0,0,0,0.07); border-radius: 16px; background: #fafafa;
}
.team-avatar {
  width: 80px; height: 80px; background: #eee; border-radius: 50%;
  margin: 0 auto 20px; object-fit: cover;
}
.team-name { font-weight: 600; color: #1d1d1f; margin-bottom: 4px; }
.team-role { font-size: 0.8rem; color: #00A87A; text-transform: uppercase; letter-spacing: 0.05em; }

/* ─────────── RESPONSIVE NOSOTROS ─────────── */
@media(max-width:960px){
  .bento-section { padding:80px 24px; }
  .bento { grid-template-columns:1fr 1fr; }
  .b1,.b2,.b3,.b4 { grid-column:span 1; }
}
@media(max-width:540px){
  .bento { grid-template-columns:1fr; }
}