/* ============================================
   TMASI — /equipo.html (vista independiente)
   Depende de los tokens y componentes definidos en css/style.css
   (botones, eyebrow, container, .equipo__item/.equipo__icon,
   .team-card...). Mismo lenguaje visual que css/experiencia.css.
============================================ */

/* ---------- Introducción + áreas institucionales ---------- */
.equipo-hero{background:var(--gray-50);padding:64px 0 100px;}
.equipo-hero__back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.86rem;font-weight:700;color:var(--ink-soft);
  margin-bottom:28px;
  transition:color .2s var(--ease);
}
.equipo-hero__back:hover{color:var(--blue-700);}
.equipo-hero__intro{max-width:680px;margin-top:14px;font-size:1.02rem;}

.equipo-areas__grid{
  margin-top:44px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}

/* ---------- Integrantes ---------- */
.equipo-people{background:var(--white);padding:100px 0 110px;}
.equipo-people__grid{
  margin-top:44px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.equipo-people .team-card{box-shadow:var(--shadow-card);}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .equipo-areas__grid{grid-template-columns:1fr;}
  .equipo-people__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .equipo-hero{padding:44px 0 60px;}
  .equipo-people{padding:70px 0;}
  .equipo-people__grid{grid-template-columns:1fr;gap:22px;}
}