/* =========================================================
   CREATIVE — EQUIPO.CSS
   Estilos exclusivos de la página Equipo / Sobre nosotros.
   Depende de base.css (tokens, tipografía, botones, header,
   footer, navegación, .pagina-intro) e imagenes-vars.

   Composición propia (no copia Home ni Servicios): una rejilla
   de personas que se adapta sola a 2, 3 o 4 miembros — sin
   tarjetas, sin bordes, solo foto + nombre + cargo, con el
   mismo lenguaje tipográfico de toda la web.
   ========================================================= */

.equipo-pagina{ background: var(--marfil); padding: 60px 0 40px; }

.equipo-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.miembro .foto{
  width:100%;
  aspect-ratio: 4/5;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 20px;
}
.miembro .foto svg{ width:64px; height:64px; opacity:.45; }

.miembro .nombre{ font-family: var(--serif); font-size: 22px; }
.miembro .cargo{
  font-size: 12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.6;
  margin-top:4px;
}

/* ============ ENLACE AL MÉTODO (reutiliza contenido ya aprobado) ============ */
.equipo-metodo{ background: var(--marfil); padding: 20px 0 90px; }
.equipo-metodo .linea{
  border-top: 1px solid rgba(33,30,31,.14);
  padding-top: 32px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.equipo-metodo p{ font-size:15px; max-width:420px; opacity:.75; }

/* ============ DESKTOP ============ */
@media (min-width: 900px){
  .equipo-pagina{ padding: 100px 0 60px; }
  .equipo-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  .miembro .nombre{ font-size: 24px; }

  .equipo-metodo{ padding: 30px 0 130px; }
  .equipo-metodo .linea{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding-top:40px;
  }
  .equipo-metodo p{ margin:0; }
}